Focusable elements across the site have these various focus style scenarios
- default browser focus style only
- default plus Umami focus styles
- Umami successfully overriding default focus styles
| Mac OS - Safari | Windows - Edge | |
|---|---|---|
| Skip link |  |  |
| Menu - active |  |  |
| Menu - not active |   |  |
| Umami logo |  |  |
| Search field |  |  |
| Search submit button |  |  |
| Log in link |  |  |
| Banner top button |  |  |
| Article card - image |  |  |
| Article card - title |  |  |
| Article card - view more |  |  |
| Recipe card - small - image |  |  |
| Recipe card - small - title |  |  |
| Recipe card - small - view more |  |  |
| Recipe card - large - image |  |  |
| Recipe card - large - title |  |  |
| Recipe card - large - view more |  |  |
| Footer links |   |   |
| Breadcrumb |   |   |
| Tags |   |   |
Pages tested
<front>
/articles
/articles/give-it-a-go-and-grow-your-own-herbs
/recipes
/recipes/super-easy-vegetarian-pasta-bake
Most of the images are from the home page. Components that appear to be re-used are only included once – this includes the cards on the collection pages (/articles and /recipes).
Elements which have two focus states (default and Umami)
*names and screenshots*
Elements which do not have Umami theme focus states
*names and screenshots*
The default focus style on Firefox is a dashed line which is weak (stated in this issue as stated here https://www.drupal.org/project/drupal/issues/2942506 (the problem is when the thin dark outline directly abuts a dark image).
Chrome's is a thick blue line which doesn't always look great (off-centered, a side cut off the border, etc), and fails doesn't satisfy WCAG SC 1.4.11 Non-text contrast against the grey footer.
Proposed solution
- Carry on down the road of using focus styles from the theme?
- overriding the default selector and styles that browsers use to set their styling ie. :focus ?
Remaining tasks
- ???
- Important - if any components are being deferred to follow-up issues, we must record which ones they are, otherwise we'll have to do a full audit all over again :-(