fix: Spinbutton aria-valuenow vs native value update timing fix #33923
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
|
Pull request demo site: URL |
📊 Bundle size report
Unchanged fixtures
|
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
Hey @smhigley , do you know why those screenshots are removed?
ValentinaKozlova
approved these changes
Feb 28, 2025
smhigley
force-pushed
the
spinbutton-value-update
branch
from
6fc6550 to
c77e7cb
Compare
github-actions
bot
modified the milestones:
February Project Cycle Q1 2025,
March Project Cycle Q1 2025
🕵 fluentuiv9 No visual regressions between this PR and main |
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.
Previous Behavior
The basic problem is that we use
<input type="text" role="spinbutton">, which creates tension between the native inputvalueand the spinbutton role's expectation foraria-valuenow. Some screen readers will usevalue, and others will usearia-valuenow. However, if we setaria-valuenowwith React, the timing of the update is one cycle after the native input/change happens. The result is that some screen readers (Narrator and VoiceOver) will read the previous value instead of the new value on value changes.I previously removed the default
aria-valuetext(which is similar tovaluenowfor the purposes of this bug) to avoid having two separate sources of providing the value, but both VO and Narrator will not use the nativevalueto calculate a spinbutton value, and will default to saying 0.New Behavior
To get around the timing problem that comes with using DOM attribute updates to provide
aria-valuenow, I instead updated our code to set the IDL attribute directly (i.e.el.ariaValueNow = newValue).Testing with VoiceOver, Narrator, NVDA, and JAWS, this seems to now work as expected.
Related Issue(s)