Updates to improve accessibility

[tbolt]

During 508 compliance review, there are a few issues that should be addressed before launch.

1. Skip link should visually appear on page upon receiving keyboard focus.
   Additional Notes: see https://www.a11yproject.com/posts/2013-05-11-skip-nav-links/ for more information on how this should behave. If you go to that link and press tab you should see "Skip to content." appear. You can also see the correct behavior by going to https://design.cms.gov/ . Since we are using the CMSDS we should explore why our app does not exhibit the same behavior.

2. “1” is not a meaningful heading. Instead of marking it as heading the “Edit” and “Remove” buttons should be associated with the unique identifiers.
   Additional Notes: See the screenshot for where this is occurring. When you initially create an APD the Key Personnel is blank thus it reads the heading as "1" without any additional context to the screen reader.
   

3. “Continue” and “Previous” buttons should be rendered by screen reader. (Suggestion- Screen reader can render “Continue button- press enter to navigate to Results of previous Activities”. Aria message can be provided here on the button).
   Additional Notes: When the Continue or Previous buttons are focused they do not read the button labels, instead they read the label below them. These buttons are seen in the above screenshot but persist throughout the app

4. Moved to new issue

5. Moved to new issue

6. Form field label for example “Program Introduction” should be associated with input text box so that screen reader can render the label upon receiving keyboard focus.

7. Form value (whatever the user is typing) should also be rendered by screen reader. The input text box should have role=value.

8. Error message should be associated with the form field so that screen reader can render it every time when that form field receives keyboard focus. Screen reader should also renders error description when a user press “Continue” button and try to proceed further without correcting the error for example-
   Error: Start Date
   Error: End Date

This task is done when...

• 1. Skip link should visually appear on page upon receiving keyboard focus.
• 2. “1” is not a meaningful heading. Instead of marking it as heading the “Edit” and “Remove” buttons should be associated with the unique identifiers.
• 3. “Continue” and “Previous” buttons should be rendered by screen reader. (Suggestion- Screen reader can render “Continue button- press enter to navigate to Results of previous Activities”. Aria message can be provided here on the button).
• 4. moved to new issue
• 5. moved to new issue
• 6. Form field label for example “Program Introduction” should be associated with input text box so that screen reader can render the label upon receiving keyboard focus.
• 7. Form value (whatever the user is typing) should also be rendered by screen reader. The input text box should have role=value.
• 8. Error message should be associated with the form field so that screen reader can render it every time when that form field receives keyboard focus. Screen reader should also renders error description when a user press “Continue” button and try to proceed further without correcting the error for example-
  Error: Start Date
  Error: End Date

*Add a LABEL (design, dev, compliance, BUG, etc) before submitting.

*If the issue is needed to complete prioritized work for the CURRENT SPRINT, add it to the "This Sprint" pipeline. Otherwise, all other issues will be automatically added to the unprioritized pipeline for PRODUCT to prioritize.