fix: resolve aria-hidden focusable descendants accessibility violation#41
Open
LorenzoGalassi wants to merge 1 commit intoawran5:mainfrom
Open
fix: resolve aria-hidden focusable descendants accessibility violation#41LorenzoGalassi wants to merge 1 commit intoawran5:mainfrom
LorenzoGalassi wants to merge 1 commit intoawran5:mainfrom
Conversation
The chat box container had aria-hidden hardcoded to 'true' regardless of open/close state, while containing focusable <input> and <button> elements. This caused an axe/Lighthouse accessibility violation: "[aria-hidden=true] elements must not contain focusable descendants". Changes: - Chat box: toggle aria-hidden based on isOpen state - Chat box: add inert attribute when closed to fully remove descendants from tab order and assistive technology tree - Open button: replace aria-hidden='true' with role, tabIndex, aria-label and keyboard handler so it is reachable by keyboard and screen readers - Close button: same treatment as open button Fixes accessibility score regression reported by Lighthouse/PageSpeed.
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
1 participant
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.
Problem
The chat box container has
aria-hiddenhardcoded to'true'at all times, even when the chat is open. When the chat is closed, the<input>and<button>elements inside the container remain focusable via keyboard, which violates WCAG 2.1 — 4.1.2 Name, Role, Value and triggers a Lighthouse/axe error:Additionally, the open/close button
divhasaria-hidden='true'making it completely invisible to assistive technologies, and lacks keyboard support (role,tabIndex, keyboard handler).Fix
Chat box container:
aria-hiddenbased onisOpenstate instead of hardcodingtrueinertattribute when closed — this removes all descendants from the tab order and assistive technology tree without affecting the CSS height transition animation.inertis now baseline across all modern browsers.Open button & close button (
divelements acting as buttons):aria-hidden='true'role="button",tabIndex={0},aria-label, andonKeyDownhandler so they are reachable and operable via keyboard and screen readersTesting
Verified with Lighthouse accessibility audit — the
[aria-hidden="true"] elements must not contain focusable descendantsviolation is resolved after this change.