Accessibility issues with date picker

[roelvangils]

The datepicker is not built with accessibility in mind.

Erik reported these issues.

SC 1.1.1 Non-text Content

• Issue: The datepicker button of the datepicker is an icon font. See Fontawesome.
• Issue: The next/previous button of the datepicker is an icon font. See Fontawesome.

SC 1.3.5 Identify Input Purpose

• Issue: The goal of input elements can not be identified from code.

SC 1.4.3 Contrast (minimum)

• Issue: Text that is qualified as small (not more than 24px or bold and 19px) should have a contrast ratio of at least 4.5:1. This does not count for disabled elements. The calendar has dates from other months in view that can be picked but look disabled. Their contrast ratio is too low.
• Fix: change the look and/or behaviour of these buttons

SC 1.4.4 Resize Text

• Issue: Users should be able to use enlargement tools without the page breaking up. The "month selector" get overlapping text when zooming in.
  Fix: Either make the buttons bigger or the text smaller.

SC 1.4.10 Reflow

• Issue: The demo environment can add scrollbars when the datepicker is opened. This probably happens in usage as well.
• Fix: Use a modal pattern with a fixed scrollbar so it does not influence page size.

SC 1.4.12 Text Spacing

• Issue: The "month selector" gets overlapping text when CSS styles get adjusted for readability.
  Fix: Either make the buttons bigger or the text smaller.

SC 3.1.2 Language of Parts

• Issue: The datepicker uses a mix of English and Flemish while this is not apparent in the code.
  Fix: Add lang-attributes. Advisory: give users control over the language of the component, instructions and error messages

SC 3.3.1 Error Identification

• Issue: Input errors are automatically detected and described to the user in text. This also touches on SC 1.3.1. Inputs are visually invalid and a text shows, but no invalid state is set and the message is not connected to the input.
  Fix: Set invalid or aria-invalid on the input. Use aria-describedby to connect the error text to the input.

SC 3.3.3 Error Suggestion

• Issue: Automatically detected errors state things like "invalid date" or "this date can not be picked". The user does not know what makes the date invalid, nor how to fix it. Add an instruction on how to format a date, and connect it to the input with aria-describedby (it can take multiple IDs in order).

SC 4.1.2 Name, Role, Value

• Issue: The datepicker button should communicate name, role and value in code.
  Fix: Add all these properties. Advisory: use a <button> to save yourself some time and lots of code, and give that both a name and attributes like in the recommended modal pattern.

Recommendations

• The calendar has a role="dialog" but does not use the modal element. Is it meant to be modal? I would expect reuse, and all issues for the modal also apply here.
• The calendar does not follow the ARIA Authoring Practices example of a grid, while this does seem appropriate. Following this example makes keyboard navigation much more consistent for users. It also removes some annoyances like having to tab through all buttons when a user wants to select the last day of the month. Tabbing further than the current month closes the dialog, which is unusual behaviour.
• Add aria-selected and aria-current to the selected and current date. Give both a different visual appearance as well. They should be combinable.
• The hover state of the buttons in the datepicker "navigation" is nearly invisible.
• Grid lines disappear. This makes the datepicker look broken. Is this intended?
• Dates that are not pickable by a user are disabled. This means keyboard navigation skips them. Do users want to skip them in navigation?
• A placeholder is used to show the suggested formatting and functions as a sort of mask when the datepicker is empty, but only when it is focused? This placeholder is not understandable for screen reader users, and confusing for many others. Strongly suggest to remove the placeholder and add a general instruction instead.
• Navigating the calendar with screen reader does not result in understandable names for the buttons of the dates.
• The button to select months has an unusual triple-state button pattern. This state is not communicated. The name of the button changes with various hard to understand names. The next and previous button still work in all modes which gives strange situations.