Usagov 1919 consistent alert messages update

[developer43]

Jira Task

https://cm-jira.usa.gov/browse/USAGOV-1919

Description

Make alert components accessible with a screen reader

Type of Changes

• New Feature
• Bugfix
• Frontend (Twig, Sass, JS)
  • Add screenshot showing what it should look like
• Drupal Config (requires "drush cim")
• New Modules (requires rebuild)
• Documentation
• Infrastructure
  • CMS
  • WAF
  • WWW
  • Egress
  • Tools
  • Cron
• Other

Testing Instructions

1. Clear you cache (bin/drush cr)
2. Goto http://localhost/avoid-foreclosure
3. Start Voice Over on Mac (command F5) and tab through the left navigation
4. Before you get the the alert component you need to use the arrow key to get to the component, hold down the "control" and "option" keys together while using the right arrow key.
5. You should hear the screen reader announce "info important, region".
6. Continue to hold down the "control" and "option" keys together while using the right arrow key and you should hear the word "info" and then the heading and body text of the alert component.

Change Requirements

• Requires New Documentation (Link: {})
• Requires New Config
• Requires New Content

Validation Steps

• Test instruction 1
• Test instruction 2
• Test instruction 3

Security Review

• Adds/updates software (including a library or Drupal module)
• Communication with external service
• Changes permissions or workflow
• Requires SSPP updates

Reviewer Reminders

• Reviewed code changes
• Reviewed functionality
• Security review complete or not required

Post PR Approval Instructions

Follow these steps as soon as you merge the new changes.

1. Go to the USAGov Circle CI project.
2. Find the commit of this pull request.
3. Build and deploy the changes.
4. Update the Jira ticket by changing the ticket status to Review in Test and add a comment. State whether the change is already visible on cms-dev.usa.gov and beta-dev.usa.gov, or if the deployment is still in process.

[omerida]

Confirmed the voice reader announces the info region like you described in the validation steps. Only change is to reuse an existing CSS class.

[omerida]

There is an existing .visuallyhidden class that is the same as this (save a line or two). Let's re-use the existing class instead of adding a new one.

We could rename it. That involves touching a bunch of files. Looks like 4 in the theme folder, and benefitSearch.js in the modules\custom folders.

[developer43]

Hi @omerida I removed the duplicate class and used the existing .visuallyhidden class. This is ready to verify, thanks

[omerida]

@developer43 I merged this PR but I'm not sure if we're supposed to deploy to dev atm.