noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'worktree-agent-a6769a5cd2c4b070e'

Browse Source
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:19:47 +02:00
parent d74fa250ee 5e58dd5449
commit 24520402c1
26 changed files with 747 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/CarouselTest.php
+14 -13
View File
@@ -60,7 +60,7 @@ function onCarousel(int $index, string $body, string $scope = '#carousel'): stri
JS;
}
const FIRST_SCROLLER = '#carousel [role="region"] >> nth=0';
const FIRST_ITEM = '#carousel [data-material-carousel-item] >> nth=0';
function carouselShowcase(array $options = [])
{
@@ -110,19 +110,21 @@ it('moves one item with the next and previous buttons', function () {
it('moves one item with the arrow keys, and to the ends with Home and End', function () {
$page = carouselShowcase();
$page->keys(FIRST_SCROLLER, 'ArrowRight')
->assertScript(onCarousel(0, 'return at(1)'));
// M3 puts the tab stop on the item, so the keys are the focused item's and each one moves
// focus to the item it scrolls to.
$page->keys(FIRST_ITEM, 'ArrowRight')
->assertScript(onCarousel(0, 'return at(1) && document.activeElement === items[1]'));
$page->keys(FIRST_SCROLLER, 'ArrowRight')
$page->keys(':focus', 'ArrowRight')
->assertScript(onCarousel(0, 'return at(2)'));
$page->keys(FIRST_SCROLLER, 'ArrowLeft')
$page->keys(':focus', 'ArrowLeft')
->assertScript(onCarousel(0, 'return at(1)'));
$page->keys(FIRST_SCROLLER, 'End')
$page->keys(':focus', 'End')
->assertScript(onCarousel(0, 'return Math.abs(scroller.scrollLeft - (scroller.scrollWidth - scroller.clientWidth)) < 1.5 && inset(items.length - 1) < 0.5 && root.querySelector(\'[aria-label="Next"]\').disabled'));
$page->keys(FIRST_SCROLLER, 'Home')
$page->keys(':focus', 'Home')
->assertScript(onCarousel(0, 'return at(0)'));
});
@@ -146,15 +148,14 @@ it('brings a partly hidden item into focus when it is pressed', function () {
$page->assertScript(onCarousel(0, 'return inset(4) < 0.5 && scroller.scrollLeft > 0'));
});
it('scrolls instantly and keeps content pinned to its mask under reduced motion', function () {
it('scrolls instantly and leaves every item unmasked under reduced motion', function () {
carouselShowcase(['reducedMotion' => 'reduce'])
->assertScript(onCarousel(0, <<<'JS'
root.querySelector('[aria-label="Next"]').click()
const arrived = at(1)
await pause(50)
const last = items.length - 1
return arrived && inset(last) > 0.5
&& surface(last).style.getPropertyValue('--material-carousel-pin') === surface(last).style.getPropertyValue('--material-carousel-inset')
return arrived && items.every((_, i) => inset(i) === 0)
&& items.every((item) => Math.abs(item.getBoundingClientRect().width - size) < 1.5)
JS));
});
@@ -184,7 +185,7 @@ it('mirrors in a right-to-left page', function () {
->assertNoJavaScriptErrors()
->assertScript(onCarousel(0, 'return size > 0 && at(0) && inset(0) < 0.5 && inset(items.length - 1) > 0.5', 'body'));
$page->keys('[role="region"]', 'ArrowLeft')
$page->keys('[data-material-carousel-item] >> nth=0', 'ArrowLeft')
->assertScript(onCarousel(0, <<<'JS'
return scroller.scrollLeft < -1 && at(1) && inset(0) > 0.5 && inset(1) < 0.5
&& parseFloat(surface(0).style.getPropertyValue('--material-carousel-shift')) < 0
@@ -193,7 +194,7 @@ it('mirrors in a right-to-left page', function () {
$page->click('button[aria-label="Next"]')
->assertScript(onCarousel(0, 'return at(2)', 'body'));
$page->keys('[role="region"]', 'ArrowRight')
$page->keys('[data-material-carousel-item] >> nth=2', 'ArrowRight')
->assertScript(onCarousel(0, 'return at(1)', 'body'));
});
tests/Browser/ContainmentTest.php
+19 -3
View File
@@ -214,12 +214,28 @@ it('dismisses a bottom sheet dragged down past a quarter of its height', functio
it('opens a row\'s opener from a press anywhere on the row, but not from its own buttons', function () {
$page = containment();
$page->script("window.__opened = 0; document.querySelector('#containment [data-card][data-list-row] [data-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
$row = '#containment [data-card][data-list-row]:not([data-list-actionable])';
$page->click('#containment [data-card][data-list-row] p')
$page->script("window.__opened = 0; document.querySelector('{$row} [data-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
$page->click("{$row} p")
->assertScript('window.__opened === 1');
$page->click('#containment [data-card][data-list-row] button:has-text("Copy link")')
$page->click("{$row} button:has-text(\"Copy link\")")
->assertScript('window.__opened === 1');
});
it('makes a directly actionable card the one tab stop, answering Enter', function () {
$card = '#containment [data-card][data-list-actionable]';
$page = containment();
$page->script("window.__opened = 0; document.querySelector('{$card} [data-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
$page->script("document.querySelector('{$card}').focus()")
->assertScript("document.activeElement.matches('{$card}')");
$page->keys($card, 'Enter')
->assertScript('window.__opened === 1');
});