zwave-js / zwave-js-ui / 21024658288

20%

push

github

feat(a11y): comprehensive accessibility improvements for screen readers and keyboard users (#4518)

Icon-only buttons announce "button" to screen readers without context
because Vuetify 3 adds `aria-hidden="true"` to all icons. This makes the
UI inaccessible to visually impaired users. After reviewing the A11y
Project checklist, additional keyboard accessibility improvements were
implemented.

## Changes

### Icon Button Labels

Added `aria-label` attributes to all icon-only buttons:

- **BaseFab component** - Dynamic labels for FAB ("Open menu"/"Close
menu") and speed dial buttons (using existing tooltip text)
- **Dialog close buttons** - "Close dialog" across DialogAdvanced,
DialogHealthCheckInfo, DialogNodesManager
- **Navigation buttons** - "Go back", "Go to home" in ErrorPage
- **Interactive controls** - "Clear file input", "More options", "Check
for updates"
- **Group toggles** - Dynamic "Expand group"/"Collapse group" labels

### Skip Link

Added "Skip to main content" link for keyboard accessibility:
- Allows keyboard users to bypass navigation and jump directly to main
content
- Visible only when focused with Tab key
- Hidden by default (position: absolute with top: -40px)

### Focus Visibility

Fixed focus indicators in code editors:
- Replaced `outline: none` with visible custom focus indicators in
DialogGatewayValue and Store views
- Blue outline (2px solid #1976d2) with 2px offset for better visibility
- Ensures keyboard users can see which element has focus

## Example

```vue
<!-- Before: screen reader announces "button" -->
<v-btn icon="close" @click="$emit('close')" />

<!-- After: screen reader announces "Close dialog button" -->
<v-btn icon="close" aria-label="Close dialog" @click="$emit('close')" />
```

For dynamic states:
```vue
<v-fab
  icon
  :aria-label="_value ? 'Close menu' : 'Open menu'"
  @click="toggle()"
/>
```

## WCAG Compliance

- ✅ **1.1.1** Non-text Content (Level A) - Icon buttons have text
alternatives
- ✅ **2.4.1... (continued)

334 of 443 branches covered (75.4%)

Branch coverage included in aggregate %.

4052 of 22025 relevant lines covered (18.4%)

1.14 hits per line