Cover six actions/communication behaviours the browser suite missed
Plan step 36's handoff listed six behaviours no browser test exercised yet: - FieldsTest: <x-select>'s open list uses the customizable picker (appearance: base-select) where the browser supports it, drawn as M3's 48px-row menu. - CommunicationTest: a two-line snackbar's action stays on the title's row from 600px, only wrapping under it below that (toast.css's [data-md-toast-wrap]). - ActionsTest: a disabled menu item reached by the keyboard withholds its state layer (interaction.css's [aria-disabled="true"] rule). - DataTest: a paginator's page step shows md-focus-ring's outline on keyboard focus, alongside its already-tested 48px target. - CommunicationTest: a transient rich tooltip stays open 1.5s after focus leaves rather than closing at once (rich-tooltip.js's LEAVE_GRACE_MS). - ActionsTest: an xs or sm group segment takes a press at its 48px edge, past its drawn size, now that the target comes from the shared md-touch-target class rather than a rule of its own. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
4bf1ca13a3
commit
a29a147f1a
@@ -132,3 +132,18 @@ it('draws each page step 40px and lets it be pressed anywhere in its 48px target
|
||||
->assertScript("(() => { const step = document.querySelector('[data-md-pagination] button[aria-label=\"Go to page 2\"]'); const box = step.getBoundingClientRect(); return box.width === 40 && box.height === 40 && document.elementFromPoint(box.left + box.width / 2, box.top - 3) === step; })()")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-md-pagination] [aria-current=\"page\"]')).backgroundColor !== 'rgba(0, 0, 0, 0)'");
|
||||
});
|
||||
|
||||
it('shows a page step\'s keyboard focus ring, from md-focus-ring', function () {
|
||||
$step = "document.querySelector('[data-md-pagination] button[aria-label=\"Go to page 2\"]')";
|
||||
|
||||
$page = dataProbe();
|
||||
|
||||
// A key press first puts the browser in keyboard modality, as a keyboard user would be —
|
||||
// Firefox only counts a scripted focus as :focus-visible after one.
|
||||
$page->keys('#by-name [data-md-sort-header-button]', 'Tab');
|
||||
$page->script("{$step}.focus()");
|
||||
|
||||
$page->assertScript("document.activeElement === {$step}")
|
||||
->assertScript("getComputedStyle({$step}).outlineStyle === 'solid'")
|
||||
->assertScript("getComputedStyle({$step}).outlineWidth === '3px'");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user