2 min lesson
Agent-driven browser: keyboard, inspector, contrast, responsive
Complete "Agent-driven browser: keyboard, inspector, contrast, responsive". Check the final state against the lesson before you move on.
Check your understanding
Run this practice: Browser tool — prove a new icon-only button is keyboard- and screen-reader-safe.
Outcome: Contrast clears the 4.5:1 AA threshold, and at 360px the button holds its place without overlapping the title. Proof point for the PR: the filter control has a visible focus ring, an accessible name of 'Filter reports', and no overflow down to phone width.
Browser tool — prove a new icon-only button is keyboard- and screen-reader-safe
Agent-driven browser: keyboard, inspector, contrast, responsive
SayWe shipped an icon-only filter button in the reports toolbar. It looks right in the screenshot, but icon-only controls are exactly where keyboard and screen-reader users get stranded. Open the running page and check it for real.
Type
localhost:3000/reports → Tab to the filter buttonDoTab through the toolbar until focus reaches the new button.
SeeIt takes focus, but there is no visible focus ring — a keyboard user cannot tell where they are. A static screenshot never shows that.
SayRestore the focus-visible ring, then read the button's accessible name in the inspector — an icon button needs an aria-label because it has no text.
SeeThe inspector now reports the accessible name 'Filter reports', and the focus order runs toolbar → filter → table, matching the left-to-right visual flow.
DoCheck the icon's contrast against the toolbar, then resize the browser to a 360px-wide viewport.
SeeContrast clears the 4.5:1 AA threshold, and at 360px the button holds its place without overlapping the title. Proof point for the PR: the filter control has a visible focus ring, an accessible name of 'Filter reports', and no overflow down to phone width.