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
|
fabricteam
reviewed
Feb 28, 2025
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual regressions to review in the fluentuiv9 Visual Regression Report
Drawer 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Drawer.overlay drawer full - High Contrast.chromium.png | 2220 | Changed |
SpinButton Converged 92 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| SpinButton Converged.Appearance- filled-darker - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - Dark Mode.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - High Contrast.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker - RTL.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-darker.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - Dark Mode.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - High Contrast.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter - RTL.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- filled-lighter.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - Dark Mode.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - High Contrast.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default) - RTL.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default).focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default).mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- outline (default).mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - Dark Mode.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - High Contrast.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline - RTL.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Appearance- underline.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Max Bound.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - Dark Mode.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - High Contrast.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound - RTL.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound.focused.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.At Min Bound.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - Dark Mode.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - Dark Mode.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - Dark Mode.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - High Contrast.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - High Contrast.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - High Contrast.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - RTL.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - RTL.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value - RTL.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Display Value.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- filled-darker.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- filled-darker.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- filled-darker.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- filled-lighter.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- filled-lighter.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- filled-lighter.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- outline.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- outline.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- outline.mouseDownIncrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- underline.focused.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- underline.mouseDownDecrement.chromium.png | 0 | Removed |
| SpinButton Converged.Invalid- underline.mouseDownIncrement.chromium.png | 0 | Removed |
There was a problem hiding this comment.
Hey @smhigley , do you know why those screenshots are removed?
There was a problem hiding this comment.
I'm guessing it was just a screenshot tool issue, I'll update the branch and see if it fixes just by running again
ValentinaKozlova
approved these changes
Feb 28, 2025
smhigley
force-pushed
the
spinbutton-value-update
branch
from
6fc6550 to
c77e7cb
Compare
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)