[Date Picker] Cannot change day in the component via keyboard when NVDA is active

[geospatialem]

monday.com sync: #18048483301

Check existing issues

• I have checked for existing issues to avoid duplicates and reviewed the Accessibility page for guidance.

Summary

The date-picker component's day cannot be changed via keyboard arrow keys when NVDA is active, however normal keyboard functionality and JAWS provide as-expected functionality to the component.

Actual Behavior

When NVDA is active the component's day cannot be changed via keyboard.

Expected Behavior

• When NVDA is active the component's day can be changed via keyboard arrow keys

Reproduction Sample

https://codepen.io/geospatialem/pen/OPygNQb

Reproduction Steps

1. Activate NVDA
2. Open the sample
3. Keyboard navigate into the component
4. Try to change the day
5. Observe the arrow keys are not functional when trying to select a day

Reproduction Version

3.2.1

Working W3C Example/Tutorial

No response

Relevant Info

Keyboard navigation works as-expected outside of AT and with JAWS, but across browsers with NVDA is not functional

Our third party audit recommended the following:

The Date picker is properly implemented, so the user can navigate it using only the keyboard/screen reader, relationships of the data are clearly described and communicated.

1. Use role="dialog", aria-modal="true" and add an accessible name to the container (e.g.: aria-label=" Choose date").
2. Use a <table> tag with role="grid".
3. Provide an attribute scope="col" to each of the <th> tags within the <thead> tag.
4. Wrap all the content within a <tbody>/<td> and use <th scope="row"> only for the row header.
5. Add descriptive accessible names to the buttons, and ensure the focus is trapped within the modal while it's expanded.
6. Add aria-live=polite to the header region to ensure the Month/year content is updated.

For more information about creating accessible custom date pickers, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[geospatialem]

This seems related to the ref of the component's date-picker-month, where the left/right arrow keys aren't getting picked up properly with NVDA (note: the up/down arrows are responding as-expected):

calcite-design-system/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx

Lines 658 to 663 in 3815a50

	ref={(el) => {
	// when moving via keyboard, focus must be updated on active date
	if (ref && active && this.activeFocus) {
	el?.setFocus();
	}
	}}

Marked the above as spike complete, however more exploration may be needed as to why this is occurring.