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

[Discover] Add focus to h1 element when client side routing is executed #133277

Closed
kertal opened this issue Jun 1, 2022 · 5 comments · Fixed by #133846
Closed

[Discover] Add focus to h1 element when client side routing is executed #133277

kertal opened this issue Jun 1, 2022 · 5 comments · Fixed by #133846
Assignees
Labels
8.4 candidate Feature:Discover Discover Application Project:Accessibility Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.

Comments

@kertal
Copy link
Member

kertal commented Jun 1, 2022

When we change the route in Discover, the h1 element of the target route should get focus because of a11y.

This seems correlated with https://github.com/elastic/kibana/issues/42379. I'm in favor of setting focus on the H1 of a page view when we swap URLs using client-side routing, so screen readers announce the change properly. I'll do some more research, but I think these are related items.

Originally posted by @1Copenut in #61870 (comment)

@botelastic botelastic bot added the needs-team Issues missing a team label label Jun 1, 2022
@kertal kertal added 8.4 candidate Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. labels Jun 1, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Jun 1, 2022
@kertal kertal added Project:Accessibility needs-team Issues missing a team label labels Jun 1, 2022
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Jun 1, 2022
@1Copenut
Copy link
Contributor

1Copenut commented Jun 1, 2022

I've discussed this strategy, setting focus on <h1> on route change with @zuhairmahd. We agreed it is a good approach for Kibana services. With multiple teams and applications running, it will take some time, but that's alright. We will point other teams to Discover's work for implementing focus on route change, until all applications have adopted the unified UX pattern.

@kertal kertal added the Feature:Discover Discover Application label Jun 2, 2022
@davismcphee davismcphee self-assigned this Jun 3, 2022
@kertal
Copy link
Member Author

kertal commented Jun 7, 2022

@1Copenut is more than this to take care of to resolve #42379 ? thx

@1Copenut
Copy link
Contributor

1Copenut commented Jun 7, 2022

@kertal I think so yes. The EUI team discussed this today in our meeting and we have a plan for getting #42379 finished.

  1. @constancecchen is updating the EuiSkipLink component
  2. EUI team is exploring a new approach to announce page load on SPA route changes using a live region
  3. When this approach is finalized, we will follow up with the Discover team as early adopters and create a meta issue for all product teams to implement the change as it fits their roadmaps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
8.4 candidate Feature:Discover Discover Application Project:Accessibility Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants