Date picker > Accessibility Audit

Refer to the parent epic description for more information on this effort.

Purpose

Audit the accessibility of the GitLab UI Date Picker component in all variants and states in order to update the Pajamas component Status table, and provide more documentation on the component’s page in Pajamas.

Component description

The date picker allows a user to choose and/or input a date by using a calendar dropdown or by typing the date into a text field.

Initial Methods and Tools

Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.

• Evaluate all of the datepicker and daterange-picker variants and options in GitLab UI
• Visual review for contrast and states
• Semantic and functional review
• Screen reader: VoiceOver + Safari on macOS
• Screen reader: NVDA + Chrome on Windows
• axe DevTools (browser extension)

Audit Criteria

Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic.

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when the calendar panel is expanded.
• Color combinations have sufficient contrast.
• Review component specific accessibility guidelines for how attributes and component should behave.

Results

Safari + VoiceOver	Firefox + NVDA
Recording: Safari + VoiceOver date picker	Recording: Firefox + NVDA date picker

Problem	Solution	Related Issue/MR

GitLab UI uses the Pickaday date picker. In combing through open issues these are ones that specifically call out accessibility issues (I have not validated them, but the issues exist 🤷, and there are many others not linked that have accessibility considerations, but didn't specifically get returned in the search):

• https://github.com/Pikaday/Pikaday/issues/902
• https://github.com/Pikaday/Pikaday/issues/885
• https://github.com/Pikaday/Pikaday/issues/857
• https://github.com/Pikaday/Pikaday/issues/776
• https://github.com/Pikaday/Pikaday/issues/775
• https://github.com/Pikaday/Pikaday/issues/758
• https://github.com/Pikaday/Pikaday/issues/390
• https://github.com/Pikaday/Pikaday/issues/877
• https://github.com/Pikaday/Pikaday/issues/876
• https://github.com/Pikaday/Pikaday/issues/859
• https://github.com/Pikaday/Pikaday/issues/827

Resources

• https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html
• https://dequeuniversity.com/library/aria/date-picker
• https://fymmot.github.io/inclusive-dates/
• https://www.hassellinclusion.com/blog/collecting-dates-accessible/

Completing the audit

After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.

accessibility ~"Category:FE/UX Foundations" ~"component:date-picker"