Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make focus indicators consistent #3592

Merged
merged 2 commits into from
Jul 24, 2024
Merged

Conversation

NickColley
Copy link
Contributor

@NickColley NickColley commented Jul 21, 2024

Focus indicators are important for keyboard users to navigate around the website, without them it is very difficult or impossible to know where they are on the page.

This change removes the styles that prevent focus indicators being shown and bring them inline with the rest of the website e.g. blog page.

Ideally we've have some sort of design system where we have considered focus styles that work at a component level but this is the minimum to make things consistent and remove a big barrier.

This resolves issues related to Focus Visible (Level AA), Focus Appearance (Level AAA), Non-text Contrast (Level AA).
Relevant failure example which mirrors the issue we see in our project:
Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

As part of #3591

Screenshots

Before

Donate button being focused, very slight colour change from light grey to darker grey

After

Focus indicators will be the default for the operating system and browser, here's how it looks on Ubuntu Firefox. This is consistent with the majority of the website.

Donate button being focused, default focus indicators shown, in this case Ubuntu Firefox shoes a clear orange focus

Note that for some browsers focus styles will only appear when using the keyboard when using the default focus styles, following this up with custom focus indicators in the future may be an opportunity to add them to people using pointer devices as well e.g. a mouse.

@NickColley NickColley marked this pull request as ready for review July 21, 2024 12:22
@RMcNeely RMcNeely self-assigned this Jul 22, 2024
@RMcNeely
Copy link
Contributor

Looks good to me but its already out of date (sorry!) If you can get this updated then I think it will be good. I did some greepping for other places that had a value set for outline but couldn't find any so I think we're good.

Focus indicators are important for keyboard users, to navigate around the website, without them it is very difficult or impossible to know where you are on the page.

This change removes the styles that prevent focus indicators being shown and bring them inline with the rest of the website e.g. blog page.
@NickColley
Copy link
Contributor Author

@RMcNeely no worries, rebased :)

@RMcNeely RMcNeely merged commit d41bdc7 into elementary:master Jul 24, 2024
5 checks passed
@NickColley NickColley deleted the patch-1 branch July 24, 2024 00:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants