Keyboard focus is difficult to see for elements on homepage

[david-iterators]

Screengrab/videos (insert file names here) Keyboard, Home page, Difficult to see focus.mp4

Link https://d8-stg.boston.gov

Node # (if known) 21

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > macOS > Chrome 83

Trusted Tester Test Keyboard

Brief Description

Steps to reproduce 1) 00:00, Click in the URL field and start pressing the tab key until the focus enters the main page 2) 00:05, The keyboard is used to reach a link and the focus is visible with a blue outline 3) 00:09, Use the tab key to navigate to the Guide section of the page: a) BUG: It is difficult to see which element is in focus because the blue outline is difficult to see 4) 00:10, Continue pressing the tab key and the focus is visible in other sections

Desired Result The focus is visible for the current element when using the keyboard

Actual Result The focus difficult to see for some elements when using the keyboard Keyboard, Home page, Difficult to see focus.zip

[subaha-cob]

Tested on the Guide sections.

[subaha-cob]

Testing at: https://d8-uat.boston.gov/

[andrebtlima]

I would say that the focus outline is still a bit hard to see but because an image is displayed when the user uses the keyboard to highlight each guide card, I think this is resolved.

[andrebtlima]

@jill-iterators and @david-iterators, would you mind verifying this fix on our production environment (boston.gov)? As you can see I was a bit confused by this ticket when we were looking at the issue on UAT and I just want to make sure the keyboard focus is behaving as desired.

[subaha-cob]

@andrebtlima I will wait until we deploy the changes to Drupal to test this. They can retest tickets after that.