Skip to content

NVDA in Firefox announces wrong constant values for date segments (DatePicker) #10081

@dnikub

Description

@dnikub

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

  • day is 15, announced as "46"
  • month is 04, announced as "27"
  • year is 2026, announced as "20"
Firefox-NVDA--announcement.mov

Example 2

Or, when looking at the example in the docs:

  • day is 3, announced as "6"
  • month is 2, announced as "9"
  • year is 2020, announced as "20"
Image

💁 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

  1. Start NVDA
  2. Open Firefox
  3. Open https://react-aria.adobe.com/DatePicker
  4. Navigate to the DatePicker example under the heading "Value", which already has a date selected
  5. 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.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    waitingWaiting on Issue Author

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions