Skip to content

fix(a11y): resolve accessibility issues in JsonViewer, SearchBox, and SelectOnClick#2800

Open
ApurveKaranwal wants to merge 1 commit into
Redocly:mainfrom
ApurveKaranwal:fix/a11y-improvements
Open

fix(a11y): resolve accessibility issues in JsonViewer, SearchBox, and SelectOnClick#2800
ApurveKaranwal wants to merge 1 commit into
Redocly:mainfrom
ApurveKaranwal:fix/a11y-improvements

Conversation

@ApurveKaranwal

Copy link
Copy Markdown

What/Why/How?

  • What: Key interactive components in Redoc (JSON tree collapser buttons, Search Box clear icon, and SelectOnClick wrapper) were not keyboard-accessible or screen-reader friendly.
  • Why: Users relying on assistive technologies or navigating with a keyboard alone could not focus on, activate, or understand the states (expanded/collapsed) of these components.
  • How:
    • JSON Viewer: Updated the collapser button HTML generation to include aria-expanded and descriptive aria-label attributes. Handled keydown (Enter) triggers inside JsonViewer.tsx and called event.preventDefault() to prevent duplicate execution from the browser's synthetic click on <button> elements. Wrapped handlers in React.useCallback to satisfy ESLint warnings.
    • Search Box: Added tabIndex={0}, role="button", and aria-label="Clear search" to the clear search icon, alongside an onKeyDown handler listening for Enter/Space. Annotated search result box with role="menu", an dynamic results-found aria-label, and aria-live="polite" for the empty-results state.
    • SelectOnClick: Added tabIndex={0}, role="button", and aria-label="Select all text", enabling keyboard activation via Enter or Space.
    • Troubleshooting Docs: Updated the troubleshooting instructions in the README.md to help developers easily diagnose rendering or search issues.

Reference

Resolves accessibility gaps (WCAG 2.1 AA) in interactive components.

Tests

  • Added Jest unit tests inside src/components/__tests__/JsonViewer.tsx to verify:
    • Collapser elements initialize with proper default aria-expanded and aria-label values.
    • Expanding and collapsing updates the ARIA attributes properly.
    • Pressing Enter correctly toggles the state of collapsers.
  • Verified that the full test suite runs and passes (npm run unit).

##Fixes #2799

Screenshots (optional)

N/A (semantic markup changes)

Check yourself

  • Code is linted
  • Tested
  • All new/updated code is covered with tests

@ApurveKaranwal ApurveKaranwal requested a review from a team as a code owner June 2, 2026 17:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(a11y): improve keyboard navigation and screen reader support in JSON viewer, search box, and select elements

1 participant