Fix screen readers not announcing updated aria-describedby in Firefox
#51035
Conversation
This file contains 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
kevin940726
added
[Focus] Accessibility (a11y)
|
Size Change: +746 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in fc69115. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5108593137
|
|
@kevin940726 Now that our React version is newer, If this is a bad solution, we might try rendering the Thanks. |
|
@alexstine Thanks for taking a stab! I think I have a different solution in efa7fdd which forces recomputation with a |
alexstine
approved these changes
May 29, 2023
andrewserong
approved these changes
May 30, 2023
There was a problem hiding this comment.
Thanks for the detailed explanation and jsfiddle @kevin940726, this is testing well for me with VoiceOver running on macOS, and nice idea abstracting it into a small separate component. LGTM! ✨
|
I'm going to merge this. If anyone can point me to any related issues in Firefox please do 🙇♂️! If there's none, I'm also happy to file one or contribute if someone can guide me through where the relevant code base is. ❤️ |
|
Looks like this would be a good place to start: https://codetribute.mozilla.org/projects/a11y |
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…ox (WordPress#51035) * Fix aria-describedby not updating content * Try aria-description. * Try a different approach * Fix missing prop --------- Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Originally discovered and reported by @alexstine in #50422 (review). This PR fixes the issue where screen readers in Firefox fail to announce updated changes when the content of an element referenced by the
aria-describedbyattribute is updated.Why?
It's important to make sure screen readers get the correct and expected experience.
It is crucial to ensure that screen readers provide the correct and expected experience for users.
I investigated this issue further and found that it appears to be a bug specific to Firefox, as it is only reproducible in Firefox. The following conditions must all be met for the issue to occur:
aria-*attribute that references an element's ID, such asaria-describedbyoraria-labelledby.aria-*attribute must be hidden from assistive technology, for example, throughdisplay: none,aria-hidden="true", orhidden.span.textContent = 'Updated changes'works fine, butspan.childNodes[0].nodeValue = 'Updated changes'does not. This issue is particularly noticeable in modern frontend frameworks like React, which always updates the smallest possible node for simplicity and performance.How?
To fix this issue, we only need to modify one of the conditions mentioned above. Since we need to support Firefox and screen readers, we cannot change conditions (1) and (2). Modifying (3) is also tricky because it sometimes double-announces the description if it's accessible to screen readers.
I created a
<AriaReferencedText>component in this PR to leverage (4) to force a recomputation oftextContentwhen the text changes. It triggers Firefox to acknowledge the changes and announce the correct value.This might not be the best solution, so I also want to seek insights from the Firefox accessibility team to understand the root cause of this issue. If we all agree that it is a bug, we may be able to address it in a future Firefox release.
Testing Instructions for the minimal reproducible jsfiddle
I created a jsfiddle to demonstrate the issue. Be sure to open it in Firefox and follow these steps.
textContentdirectly. The screen reader should announce "Updated! Everything works correctly".textNode. The screen reader should announce "Not updated, something is wrong".Testing Instructions for the List View in gutenberg
Screenshots or screencast
List view screencasts:
before.mp4
after.mp4
jsfiddle screencast:
Kapture.2023-05-29.at.10.12.28.mp4