usagov-2097-alert-message-missing-svg-names: added svg and aria code …

[developer43]

…for screen readers

Jira Task

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

Description

Added svg tag and aria label code to announce the background svg image

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

Change Requirements

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

Validation Steps

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 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, region".
6. Continue to hold down the "control" and "option" keys together while using the right arrow key and you should hear "info, image”
7. Continue to hold down the "control" and "option" keys together while using the right arrow key and you should hear "Heading level 2, important”
8. Continue to hold down the "control" and "option" keys together while using the right arrow key and you should hear the body text in the alert box

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.