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

[Lens] (Accessibility) Focus mistakenly stops on righthand form #83591

Closed
myasonik opened this issue Nov 17, 2020 · 5 comments · Fixed by #84519
Closed

[Lens] (Accessibility) Focus mistakenly stops on righthand form #83591

myasonik opened this issue Nov 17, 2020 · 5 comments · Fixed by #84519
Assignees
Labels
accessibility best practice bug Fixes for quality problems that affect the customer experience Feature:Lens loe:small Small Level of Effort Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@myasonik
Copy link
Contributor

Firefox automatically allows users to place focus on all scrollable containers. This behavior differs from all webkit/chromium but is generally seen as a good accessibility improvement for a few reasons (users can scroll containers without tab stops in them, users can scroll before being teleported to the first tab stop in it which can be very problematic in long containers).

For some reason, this is being triggered on the right-hand sidebar (div.lnsConfigPanel) even when it isn't scrollable which is confusing (and not helped by the fact that firefox adds no focus state indicator for this.

Generally, I'd say to not touch this but because we have a lot of tab stops in this scrollable container (so we don't have to worry about a user being teleported somewhere they can't see), we can safely remove this browser behavior by expressly telling Firefox we don't want it with a tabIndex={-1}.

TLDR

Add tabIndex={-1} to .lnsConfigPanel

@myasonik myasonik added bug Fixes for quality problems that affect the customer experience Project:Accessibility loe:small Small Level of Effort Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens accessibility best practice labels Nov 17, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@flash1293 flash1293 changed the title (Accessibility) Focus mistakenly stops on righthand form [Lens] (Accessibility) Focus mistakenly stops on righthand form Nov 18, 2020
@mbondyra mbondyra self-assigned this Nov 30, 2020
@mbondyra mbondyra reopened this Dec 3, 2020
@mbondyra
Copy link
Contributor

mbondyra commented Dec 3, 2020

Joe's comment about potential solution from here #84866:

image

@flash1293 flash1293 assigned flash1293 and unassigned mbondyra Jan 18, 2021
@flash1293
Copy link
Contributor

@myasonik I just re-tested this in Firefox on Mac and it seems like even though the container is still scrollable (I'm not sure why that's even the case...), tabbing doesn't seem to stop. Could you check latest master to confirm the current behavior is fine?

@myasonik
Copy link
Contributor Author

Don't seem to be able to reproduce it anymore! Closing the issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility best practice bug Fixes for quality problems that affect the customer experience Feature:Lens loe:small Small Level of Effort Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants