usagov-1955-report-issue-error-handling: update code to make error bo…

[developer43]

…x the first focus with a form error

Jira Task

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

Description

Update script and html to address the changes below.

1. Update error box focus
2. Update proper focus error box link to input field
3. Add Error: in front of the inline message.
4. Remove the inline error messages from the tab order. 

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

Goto http://localhost/site-issue-report-form and submit the form without filling the fields so you get the error box.

1. Verify the focus is set to the Error message heading instead of the inline error message. 

2. Verify focus to the field where the error exists after clicking the link in the error box.

3. Verify Inline error message has word "Error:" in front of the message.

4. Verify the inline error messages do not get focus as you tab through for form. 

5. Repeat verification on Spanish page http://localhost/es/reporte-problemas-en-este-sitio-web

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.

[cwacht]

I see that we added "Error: " before each error message in english. Do we need to do something similar in Spanish?

[developer43]

@cwacht thanks for catching the missing text for Spanish. I added the text and it's ready to verify.