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

[A11Y] Adds missing focus rings back to control elements #3016

Merged
merged 4 commits into from
Sep 13, 2021

Conversation

davwheat
Copy link
Member

Fixes #2656

Changes proposed in this pull request:

This adds back browser default focus outlines to tabbable elements.

Our CSS used to manually remove these outlines for questionable (or no) reasons. These are a critical accessibility feature and must be present.

Reviewers should focus on:

Is there anywhere this does not behave as expected?

Screenshot

image image

Confirmed

  • Frontend changes: tested on a local Flarum installation.

@davwheat davwheat added the type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.) label Aug 11, 2021
@davwheat davwheat added this to the 1.1 milestone Aug 11, 2021
@davwheat davwheat requested review from SychO9 and askvortsov1 August 11, 2021 21:38
@davwheat davwheat self-assigned this Aug 11, 2021
Copy link
Member

@SychO9 SychO9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we keep it off for FormControls since we already apply styles that match the design on focus ?

flarum lan_admin

I guess there's nothing we can do to only show the outline for these inputs when tabbing 🤔 ?

flarum lan_ (8)

@davwheat
Copy link
Member Author

davwheat commented Aug 15, 2021

Yeah, there's the :focus-visible and :-moz-focusring pseudoclasses. These only show when the browser determines it should show its own focus outline.

Ohh I see what you mean... I'll try some things but I don't think we can...

@askvortsov1 askvortsov1 requested a review from SychO9 September 10, 2021 17:45
Copy link
Member

@SychO9 SychO9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beautiful!

@davwheat davwheat merged commit c10a30b into master Sep 13, 2021
@davwheat davwheat deleted the dw/add-missing-focus-rings branch September 13, 2021 22:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[A11Y] Side nav items have no keyboard focus styles
3 participants