Make this component genuinely accessible: **[component name and file path]** Adding ARIA attributes until the linter goes quiet is not the job. Most of the fix is usually semantics and focus, and most bad ARIA is worse than none. ## 1. Semantics before attributes Check what it is built from. A `div` with an `onclick` becomes a `button`. A list of things becomes a `ul`. A disclosure becomes a `button` carrying `aria-expanded="true|false"` for its state, and `aria-controls=""` to point at the region it opens — two different attributes doing two different jobs. Every ARIA attribute you keep, justify to me. If a native element does the same job, use the native element and delete the attribute — the browser already handles the states, the keyboard and the announcements, and your version will not. ## 2. Keyboard Work through it with the mouse unplugged: - Everything interactive is reachable by Tab, in the order it appears on screen — reachable, which for a composite widget means the widget takes one tab stop and the arrow keys move within it, not a stop per item. - Each control answers the keys its native equivalent answers: a button on Enter and Space, a link on Enter alone. Do not bind Space on a link — it scrolls the page, and readers expect that. - Escape closes anything that overlays, and focus returns to whatever opened it. - Composite widgets — tabs, menus, listboxes — use arrow keys with one tab stop, not a tab stop per item. - No keyboard trap, except a modal dialog, where the trap is the point. - Visible focus on every stop. `:focus-visible`, never `outline: none` with nothing to replace it. ## 3. Screen reader - Every control has an accessible name that says what it does. A `title` can act as a fallback name, but do not rely on it: it draws a tooltip that needs a pointer, so it reaches neither a keyboard nor a touch screen. Put the name in the markup — a visible label, or visually hidden text when the visible label is an icon — and keep `title` for at most a hover convenience. - State changes that matter are announced, once. For a result count or a save confirmation, put `role="status"` on a small dedicated region that holds just that sentence. Wrapping a whole list in `aria-live` is the blunter instrument: what gets read depends on `aria-atomic` and on how the list mutates, so it is easy to end up re-announcing far more than changed. - Icons that carry no information get `aria-hidden="true"`. ## 4. The rest - **Contrast**: 4.5:1 for body text and 3:1 for large text, where large means at least 24px regular or about 18.7px bold. A visual cue that is the only thing identifying a control needs 3:1; purely decorative edges do not. Check the hover and focus states too, which is usually where it fails. Disabled controls are exempt under WCAG — check them anyway and tell me what you find, but report it as a judgement call, not a failure. - **Reduced motion**: honour `prefers-reduced-motion: reduce`, for scripted animation as well as CSS transitions. For a small transition, shortening it is fine; for anything that moves a long way or scales, remove the movement or swap it for a fade, because a fast large movement still triggers what the setting exists to prevent. Always leave the element in its final state. - **Unique ids per instance.** Two of these on one page must not collide. In Svelte 5 use `$props.id()` rather than a module-level counter. - **Cleanup.** Every listener and timer removed when the component is destroyed. - **SSR safety.** No `window` or `document` at module scope or during render. ## 5. Verify Tab through it and tell me the focus order you observed. Run an automated check (axe or similar) and report what it says — but do not stop at a clean automated result, because it cannot tell you whether the focus order makes sense or whether the accessible name is accurate. Finish with: what you changed, what ARIA you deleted and why, the contrast numbers for each state, and anything still wrong that needs a design decision from me.