DatePicker A11y Pass

[TestAccessibilityGIT]

Tracking all of the issues brought up with the 08/17 accessibility pass on DatePicker control
Details on individual bugs can be found on SharePoint

• Bug 1 : [Accessibility][Programmatic access]: Buttons must have discernible text.
• Bug 2 : [Accessibility][Programmatic access]: 'Set a date' control cannot left blank as no way to delete the date once selected.
• Bug 3 : [Accessibility][Usable]: Narrator speaks 'Editable' on 'Date and month controls' on calendar.
• Bug 4 : [Functional]: User can enter invalid date format like 'dhsfghsd' in 'Start date' text field.
• Bug 5 : [Accessibility][Keyboard Navigation]: Focus order is not logical on activating clear button.

Bug 6 : [Accessibility][Screen reader]: Inappropriate behavior in Date picker when the scan mode is on. [Duplicated by #11140]
Bug 7 : [Accessibility][Screen reader]: In Scan mode user is not able to close the 'Select the first day of the week' control using 'Esc' key. [Duplicated by #6326]

• Bug 8 : [Accessibility][Programmatic access]: Information of the 'Selected date' is not provided to the screen reader user.
• Bug 9 : [Accessibility][Usable]: Consistency should be maintained in between the announcements while accessing calendar controls.
• Bug 10 : [Accessibility][Programmatic access]: State is announced as 'Selected' for 'today's day'(Ex: 14 selected) however it is not selected.
• Bug 11 : [Accessibility][Keyboard Navigation]: Focus order is not logical for the first time when user presses Up/Down arrow keys to move from 'Selected date'.
• Bug 12 : [Functional]: 'Month and year' info in day picker is not getting changed automatically until user selects the selected month in the year picker again.
• Bug 13 : [Accessibility][Visual requirements]: 'Date picker calendar' does not adopt 'High contrast settings'.
• Bug 14 : [Accessibility][Visual requirements]: 'First date of weeks' list items are not visible in 'High Contrast white and black themes'. [Resolved with Dropdown: HighlightText in HC #6132]
• Bug 15 : [Accessibility][Programmatic access]: There should be a way to identify required fields.
• Bug 16 : [Accessibility][Keyboard Navigation]: On 'Select a date' control 'date picker calendar' triggers by itself.
• Bug 17 : Screen reader does not convey the 'Date format' correctly.
• Bug 18 : Narrator doesn't confirm about the task completion when user triggers "Clear" Button.
• Bug 19 : Shortcut keys could be introduced to change months and years in calendar.

Component: DatePicker

@micahgodbolt

[natalieethell]

As mentioned in here, I believe that 13 has been resolved. Waiting to hear back from @AkshanshSrivastava03 to make sure before I check it off.

[natalieethell]

14 was fixed here: #6132.

[natalieethell]

Bug 7 is actually a dropdown bug that's already reported in the dropdown a11y pass as bug 19: #6326. I'll cross it out here.

[SLaks]

Further bug: Tabbing to Go to today, then pressing Enter loses focus (pressing Tab will focus the Chrome address bar)

[lorejoh12]

Bug 2 : [Accessibility][Programmatic access]: 'Set a date' control cannot left blank as no way to delete the date once selected.

This is currently by design- the text is only editable if the control has the prop 'allowTextInput' set. In the example shown in the recording, that prop isn't set, so the user can't type. (so the backspace/delete keys don't do anything). There's currently no "unselect" button or prop in the control, which has been proposed, but not a bug.

[lorejoh12]

Bug 4 : [Functional]: User can enter invalid date format like 'dhsfghsd' in 'Start date' text field.

Interesting bug but it's a bug with the example page, not the component itself- the control doesn't handle parsing inputs, there's a prop for that called parseDateFromString. The example from the video doesn't throw an error when parsing fails (which normally clears the content and says something like 'invalid date', it instead crashes the whole page. We should fix that, but not an accessibility bug.

[jgage176]

On one of the websites I work on the A11y test pass (inside MS) where I am using this control filed a bug that the dialog does announce whether it is expanded or collapsed. It talks about a dialog and application, but not the expanded/collapsed state. Upon experimentation, clicking on and off of the different examples it I can sometimes get it to say collapsed and have a couple times heard it say expanded, but for the most part it is not working. Repro's on https://fabricweb.z5.web.core.windows.net/oufr/7.58.0/#/examples/datepicker.

[lorejoh12]

Testing with a recent PR build: http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/11445/merge/date-time/dist/index.html#/examples/datepicker

Fixed in date-time package: 8, 9, 10, 19
by design: 12, 16 (there's a prop to change this),

11 is a FocusZone issue, I think this is actually fixed in the current build. Seems to work for me

still to fix: 4, 5, 6, 13, 15, 17, 18
note that 4, 5, 17, 18 are all just bugs on the demo page, not with the control itself
apart from those:
6: this is a dupe of #11140
13: new bug that we need to fix
15: this is an issue that's technically by design, but we should consider adding a prop that announces text boxes as required before interaction.