DatePicker a11y fixes

[xman343]

Changes

#1148 - All examples are currently failing. Any rule violations that can be resolved just by modifying the examples will be implemented. If it is impossible to resolve a rule violation at the example level, then a change to the component may be necessary.

• Basic, DateRange, Disabled, Localized, Main, WithCombinedTime, WithTime, and WithYear are violating the aria-input-field-name rule, due to the date table within the calendar not having an accessible name. ("ARIA input fields must have an accessible name.")
• • Passing fix: Implemented useId() and aria-labeledby in component so that the date table is labeled by the currently selected month in the month header.
• WithCombinedTime and WithTime are violating the color-contrast rule, due to the background color of each selectable TimePicker list item being the same as the background color of the TimePicker. ("Elements must meet minimum color contrast ratio thresholds.")
• Menu is violating the button-name rule due to the Date Picker Button not having a proper label. ("Buttons must have discernible text.")
• • Passing fix: Implemented aria-label in DatePickerMenuExample for IconButton so that the screen reader will correctly identify the button's role as the date picker button.

Testing

Testing will be conducted through the Cypress web a11y script. Any breaking changes will be evaluated through unit testing & visual tests.

Docs

TBD

[xman343]

Something I noticed while testing the component with NVDA is that the day-of-the-week columns are read out by the phonetic reading of their abbreviations ("Su, Mon, Tu" are read out as "Soo, Mon, Two"), which could be confusing. On the other hand, this example date picker has NVDA read out the letters of the abbreviation ("Su, Mo, Tu" become "S.U., M.O., T.U."), which at least more accurately reflects what is supposed to be communicated.

I think it would be a good idea to modify the component so that the days of the week are read out like the latter example.

[xman343]

Another note: since the color-contrast rule is being violated by the TimePicker component, I imagine issues pertaining to TimePicker would be best handled in its own PR.

[xman343]

Changeset coming shortly.

[xman343]

Changeset coming shortly.

Added.

[mayank99]

Something I noticed while testing the component with NVDA is that the day-of-the-week columns are read out by the phonetic reading of their abbreviations ("Su, Mon, Tu" are read out as "Soo, Mon, Two"), which could be confusing. On the other hand, this example date picker has NVDA read out the letters of the abbreviation ("Su, Mo, Tu" become "S.U., M.O., T.U."), which at least more accurately reflects what is supposed to be communicated.

I think it would be a good idea to modify the component so that the days of the week are read out like the latter example.

i just tested the APG example myself and this is what i found:

• in VoiceOver+Safari (Mac), navigating through the heading cells announces them phonetically, same as iTwinUI DatePicker. but navigating through the grid announces the full name of the day ("Monday").
  • see screen recording

    Screen.Recording.2023-08-15.at.3.02.42.PM.mov
• in NVDA+Firefox (Windows), sometimes it announces the abbreviations, while other times it announces them phonetically. (not obvious in screen recording)
  • see screen recording

    Screen.Recording.2023-08-15.at.3.09.48.PM.mov

in any case, we cannot control how a screen-reader is going to pronounce something; we can only change the text itself. i think it would be best if it always pronounced the full name of the day. we can achieve this using a combination of aria-hidden (on abbreviated names) and VisuallyHidden (on full names).

[mayank99]

LGTM. i'm ok with handling #1486 (comment) in a separate PR