Skip to content

feat(datagrid-web): add WCAG 4.1.3 status region and selection accessibility improvements#2300

Open
iobuhov wants to merge 3 commits into
mainfrom
3084/a11y-dg-selection
Open

feat(datagrid-web): add WCAG 4.1.3 status region and selection accessibility improvements#2300
iobuhov wants to merge 3 commits into
mainfrom
3084/a11y-dg-selection

Conversation

@iobuhov

@iobuhov iobuhov commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds screen reader announcements for selection changes and comprehensive keyboard accessibility for DataGrid selection controls, meeting WCAG 2.2 AA requirements.

Changes

  • Status region (role="status") announces selection count changes to screen readers (WCAG 4.1.3)
  • aria-label on select-all checkbox: "Select all rows" (WCAG 4.1.2)
  • Focus management: Returns focus to logical element when SelectAllBar disappears (WAI-ARIA APG)
  • aria-disabled instead of native disabled on SelectAllBar button to prevent focus loss
  • aria-live="assertive" on SelectAllBar button to announce label changes
  • Focus indicators: Added :focus-visible outline to SelectAllBar buttons (WCAG 2.4.7)
  • CSS cleanup: Removed blanket .table *:focus { outline: 0 } rule
  • E2E tests: 18 comprehensive Playwright tests covering all accessibility requirements

Test Plan

  • All unit tests pass (225/225)
  • All E2E tests pass (18/18)
  • Lint clean (0 errors)
  • Manual screen reader testing (VoiceOver)
  • Keyboard-only navigation verified

Test Project

Updated test project branch: datagrid-web/data-widgets-3.0_2

🤖 Generated with Claude Code

iobuhov and others added 3 commits July 2, 2026 15:38
…heckbox labels

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…tus region

- Add selectionStatusStore factory to widget-plugin-grid with smart text logic
- Create SelectionStatus component with role="status" and sr-only styling
- Create SelectionStatusViewModel for DI pattern
- Wire up DI tokens, injection hooks, and container bindings
- Integrate SelectionStatus into WidgetFooter outside conditional visibility
- Status region announces "All X rows selected" vs "Y items selected" correctly
- Export selection model functions from widget-plugin-grid main entry

Implementation follows WCAG 4.1.3 Status Messages requirements:
- Uses role="status" (implicit aria-live="polite" + aria-atomic="true")
- Always present in DOM when selection enabled
- Announces complete messages without interrupting screen reader
- Matches visual SelectAllBar text to prevent announcement/visual mismatch

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…E tests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@iobuhov iobuhov requested a review from a team as a code owner July 2, 2026 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant