Accessibility audit: keyboard, screen-reader, reduced-motion (CI fixes)#880
Open
Timrossid wants to merge 24 commits into
Open
Accessibility audit: keyboard, screen-reader, reduced-motion (CI fixes)#880Timrossid wants to merge 24 commits into
Timrossid wants to merge 24 commits into
Conversation
…CI checks - Add useFocusTrap hook for focus trapping and restoration across all dialogs - Add jsx-a11y ESLint plugin and axe-core Playwright for CI checks - Fix primary flows keyboard completeness (arrow nav, escape handlers) - Fix focus restoration after overlays close (ShortcutOverlay, CommandPalette, ProofInspectorModal, SenderConversionDialog, SnoozeDialog, SettingsModal, Compose) - Add live region announcements (aria-live) for proof inspector and app root - Fix ARIA roles: dialog attributes on SettingsModal, Compose, provenance modal - Fix EmailList invalid listbox role (changed to list) - Add aria-labels to icon-only buttons in EmailView, Sidebar collapsed state - Add aria-current to sidebar navigation, aria-label to nav landmarks - Add Escape key handlers to Topbar dropdown menus - Add data-shortcuts-disabled attribute support for WCAG 2.1.4 compliance - Add screen-reader live regions to root layout for status/alert announcements - Add accessibility E2E spec with axe-core violation checks
- Fix prettier syntax error in Sidebar.tsx (removed duplicate nested <nav>) - Fix undefined hasUnread reference in SettingsModal (added useChangelog hook call)
Collaborator
|
@Timrossid Kindly Fix CL and COnflict Conflict can be fixed via web editor |
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…aths Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…instead Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…cal vitest config used for CI debugging Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Timrossid <timothyegwuda@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why this matters
Security controls that are inaccessible create both exclusion and operational risk.
Scope
This PR addresses audit findings across: focus order, dialog trapping, semantic names, live regions, contrast, keyboard shortcuts, reduced motion, and error messaging.
Changes
Focus Management
useFocusTraphook providing focus trapping and restoration for all custom dialogsKeyboard Complete
aria-current="page"to sidebar navigation itemsaria-labelto icon-only buttons in EmailView (Snooze, Archive, Trash, Star)data-shortcuts-disabledattribute support for WCAG 2.1.4 single-key shortcut complianceARIA & Semantic Names
role="listbox"on EmailList (changed torole="list")role="dialog",aria-modal="true",aria-labelto SettingsModal, Compose, and provenance modalrole="menu"androle="menuitem"to Topbar account dropdownaria-labelto sidebar<nav>landmark and collapsed folder buttonsaria-labelledbylinking to ShortcutOverlay and ProofInspectorModal headingsLive Regions
aria-live="polite"andaria-live="assertive"containers in root layoutaria-live="polite"wrapping proof inspector search resultsAutomated Checks (CI)
eslint-plugin-jsx-a11ywith recommended rules to ESLint config@axe-core/playwrightfor automated accessibility testing in CIReduced Motion
@media (prefers-reduced-motion: reduce)respected throughoutCI Fixes Included
Acceptance Criteria
Closes #72