Keyboard focus ring is lost when focus moves up to error block

[bacitracin]

Issue Description

This issue was identified in the accessibility audit of the review & confirmation pages of the 526 form.

Expected severity: a11y-defect-1
Page: review-and-submit
Environment: keyboard navigation
Estimated Level of Effort to fix: Low
Design system component involved: Yes
Relevant WCAG success criteria: 2.4.7 Focus Visible Level AA

To Reproduce:

• Open Review Veteran Details accordion.
• Click on "Edit" button for Veteran contact information.
• Remove street address value.
• TAB to "Save" button.
• Press ENTER.

Expected Behavior

• Focus moves up to the "Please enter a street address" error and yellow focus ring should appear around focused error. Styling for the ring: outline: 2px solid #f9c642;

Actual Behavior

• Focus moves up to the "Please enter a street address" error but you can't see it. You can find your keyboard focus again if you press TAB.

Tasks

• Add focus styling to the error element that receives focus. TBD if we will need to actually touch the design system component.
• Please update the "Fix Status" column in the 526 Accessibility Audit issues tracking doc when ticket is started and completed.

Acceptance Criteria

• Focus moves up to the "Please enter a street address" error and yellow focus ring should appear around focused error.
• Accessibility Audit issue tracking doc is updated with ticket status