Adding Screen Reader instructions to Date Picker guidance

[brunerae]

Preview link

Date picker accessibility guidance

Description

Per comments in uswds/uswds#4271, screen reader instructions are skippable. We are now including them in the Accessibility section of guidance. Closes #1636

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[bonnieAcameron]

Looks great! I removed the brackets since after discussing with Ashley it seemed like we don't want them to display within the text.

[mejiaj]

Added a suggestion to improve clarity since this is additional information, not an added feature.

[bonnieAcameron]

Hi @mejiaj! I want to introduce a bit more parallel structure to the list of instructions. So it would look like:

• Days: left and right arrow keys
  • Weeks: up and down arrow keys
  • Months: use page up and page down
  • Years: use shift + page up and shift + page down
  • Beginning/End of week: use home and end keys

[amyleadem]

Looks good!
I wonder if we should add instructions for those using Mac keyboards (at least smaller ones without page up, page down, home, etc keys), because it does require some translation to get this to work on my laptop.

Translation for Mac:
Months: fn + up arrow, fn + down arrow
Years: shift + fn + up arrow, shift + fn + down arrow
Beginning/End of week: fn + left arrow, fn + right arrow

Requested changes addressed