You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using the DatePicker with NVDA in Firefox, incorrect values for the day / month / year spinbutton segments are announced, regardless of the actual written value.
🤔 Expected Behavior?
When navigating with the screen reader NVDA in Firefox, it should announce the actual values set for day, month and year.
😯 Current Behavior
When using the DatePicker with NVDA in Firefox, different values than the ones written in the DateField are announced.
The component DOM output in the DevTools seems correct. It seems the problem lies in the browser/screen reader layer associated with the accessibility tree.
Suspected root cause: the segments are rendered as <span contenteditable role="spinbutton"> rather than native input elements. NVDA's spinbutton handling on Firefox may not read the value the same way it reads a native <input type="number">, or Firefox is creating the accessibility tree differently, exposing incorrect values.
🔦 Context
We found this issue during manual accessibility testing.
Using NVDA in Chrome announces segment values correctly. The same goes for VoiceOver + Safari, Chrome, and Firefox on macOS. VoiceOver correctly announces the segment label, current value, and role on all three.
Only the combination of NVDA and Firefox does not produce a correct output.
Navigate to the DatePicker example under the heading "Value", which already has a date selected
Navigate through the DateField (with arrow keys) and listen to the initial screen reader output, comparing it to the actually written numbers
Version
We're not using the @adobe/react-spectrum monolithic package. Instead we pull in individual React Aria / React Stately packages: @react-aria/datepicker 3.17.0, @react-aria/calendar 3.10.0, @react-aria/button 3.15.0, @react-aria/i18n 3.13.0, @react-stately/datepicker 3.17.0, @react-stately/calendar 3.10.0, @internationalized/date 3.12.1. All are on their latest available versions as of today.
Provide a general summary of the issue here
When using the DatePicker with NVDA in Firefox, incorrect values for the day / month / year spinbutton segments are announced, regardless of the actual written value.
🤔 Expected Behavior?
When navigating with the screen reader NVDA in Firefox, it should announce the actual values set for day, month and year.
😯 Current Behavior
When using the DatePicker with NVDA in Firefox, different values than the ones written in the DateField are announced.
Example 1
Firefox-NVDA--announcement.mov
Example 2
Or, when looking at the example in the docs:
💁 Possible Solution
The component DOM output in the DevTools seems correct. It seems the problem lies in the browser/screen reader layer associated with the accessibility tree.
Suspected root cause: the segments are rendered as
<span contenteditable role="spinbutton">rather than native input elements. NVDA's spinbutton handling on Firefox may not read the value the same way it reads a native<input type="number">, or Firefox is creating the accessibility tree differently, exposing incorrect values.🔦 Context
We found this issue during manual accessibility testing.
Using NVDA in Chrome announces segment values correctly. The same goes for VoiceOver + Safari, Chrome, and Firefox on macOS. VoiceOver correctly announces the segment label, current value, and role on all three.
Only the combination of NVDA and Firefox does not produce a correct output.
🖥️ Steps to Reproduce
Version
We're not using the @adobe/react-spectrum monolithic package. Instead we pull in individual React Aria / React Stately packages: @react-aria/datepicker 3.17.0, @react-aria/calendar 3.10.0, @react-aria/button 3.15.0, @react-aria/i18n 3.13.0, @react-stately/datepicker 3.17.0, @react-stately/calendar 3.10.0, @internationalized/date 3.12.1. All are on their latest available versions as of today.
What browsers are you seeing the problem on?
Firefox
If other, please specify.
No response
What operating system are you using?
Windows 11
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response