Consider a11y enhancements for date components

[bkjohnson]

Description

For <va-date monthYearOnly /> and <va-memorable-date> we had some related items under the "Consider" portion of the a11y feedback.

Tickets

• MonthYear web component: Accessibility review va.gov-team#39727
• Date web component with text inputs - Accessibility review #844

Items to consider

• Consider adding context to the error message to let users know which exact fields are producing an error
• (<va-memorable-date>) The attribute aria-describedby="dateHint" is included on all elements, but is not read by the screen reader for each group that includes the label + input field. I would recommend either of the following:
  • Removing the aria-describedby attributes, and instead, including text for screen readers within the , specific to each input field;
  • Including the aria-describedby attributes on each input element with helpful text specific to each input field
• Think about the UX when there are multiple error messages appearing on the page
• Consider adding responsive styles

@davidakennedy @TiffanyPender please let me know if I've missed anything.

[TiffanyPender]

@bkjohnson This looks like it captures all of the items to consider for these components. 👍

[davidakennedy]

Following up on this to tie some issues together. @jaredcunha filed a very similar issue in #1337 that calls out many of the same things.

From Jared's issue:

Hint text does not seem to have a programatic link to the hint text

We reference this above, but it looks like it's not consistent on the date component. The attribute aria-describedby="dateHint" is on memorable date but not on Month Year. We should sync up approaches there.

The select boxes have an aria-label of "Please enter two digits for the month/day". With the current select box, this has a couple related issues for screen reader useres:

1. Month uses month name, not numbers, so typing numbers does not work here.
2. The text instructs user to enter two digits for day, but some days are a single digit.
3. If the user does not select a month first, the listbox is empty. The user might benefit from some instructions to select a month first before selecting a day if they've skipped the month field.
4. This seems to have mixed results depending on how you navigate the page. Tab navigation, VoiceOver announces "Month, menu pop up collapsed, Please enter two digits for the month". In keyboard navigation controls, reads "Group, please enter two digits for the month" before digging further into the component to get to the dropdown.

I think if we approach removing the aria-label attributes for the fields that most of the issues go away. Numbers 3 and 4 should be tested as we determine an approach to make sure those are improved. It's worth tacking them on here since they're all related.

[jaredcunha]

@davidakennedy I think you've summarized my issue well here.

Perhaps, while at it, whatever any kind of hint text becomes, can we also address the use of "Please" by not using it?