Unreadable focus state on header menu items

nhsx / nhsx-website

NHSX Website - built with Wagtail

https://transform.england.nhs.uk

MIT License

37 stars 12 forks source link

Unreadable focus state on header menu items #61

Closed mikemonteith closed 3 years ago

mikemonteith commented 4 years ago

Description

The :focus state on header menu items produces unreadable grey text on a dark blue background.

How to replicate

Use the tab key to select a menu item.
Menu item is unreadable.

chrimesdev commented 3 years ago

The :hover :active state is also unreadable, as seen on the Blogs navigation item blow:

dragondave commented 3 years ago

Hmmm. I'm struggling to reproduce this. I'm clicking on the space between the NHSX logo and the search bar, pressing the TAB key a few times to highlight 'Blog' in yellow then moving the mouse over it but not clicking, and it remains in yellow for me. I've tested Firefox 87 and Chrome 89/90 and not seen the issue.

Is that what you're doing, or is there something else I'm missing? Can you currently reproduce it? It's possible it's been fixed in the meantime.

chrimesdev commented 3 years ago

Hi @dragondave seems OK on my end now, looks like it was fixed in https://github.com/nhsx/nhsx-website/pull/164

dragondave commented 3 years ago

Thank you!