What are the A11yLabel for a Datepicker in Angular Material?

Question

What are the dateA11yLabel and the monthYearA11yLabel when configuring a custom format for a datepicker? What do they do? I did not find this information in the Angular Material documentation.

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats

Answer 1

dateInput: The format used for displaying selected dates in the input.

monthYearLabel: The format used for the 'change month/year' button at the top of the datepicker.

dateA11yLabel: What is read by a screen reader when using the arrow keys to move day-by-day through the datepicker calendar view.

For example, instead of it just reading "16" when focused on 8/16/21, it might be better to have it read "August 16, 2021" so the user has more context, especially when they transition from one month to another.

monthYearA11yLabel: What is read by a screen reader when choosing a month with a keyboard.

To test, hit Enter on the datepicker trigger button (calendar icon), Tab to the 'change year' button, hit Enter, arrow to a year, hit Enter, and arrow to change months. Instead of just reading "Aug" like it shows on screen, it might be better to have it read something like "August 2021"

---

For example, these are the values I'm using (using Luxon formats)

display: {
    dateInput: 'DD',  //e.g. "Aug 16, 2021" for en-US
    monthYearLabel: 'LLL yyyy',  //e.g. "Aug 2021" for en-US
    dateA11yLabel: 'DDD',  //e.g. "August 16, 2021" for en-US
    monthYearA11yLabel: 'LLLL yyyy',  //e.g. "August 2021" for en-US
  },

---

If you need a screen reader for testing, NVDA is a good free one, or you could try a built-in one like VoiceOver in Safari.

I don't have an official source for this, but I have some accessibility experience and just figured it out by messing around with it.