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

fix(list): address accessibility console error #920

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

katie-bobbe-genesys
Copy link
Collaborator

@katie-bobbe-genesys katie-bobbe-genesys commented Feb 19, 2025

Fix a console error that appears after opening a component that contains a gux-list then hovering over the first element:

gux-context-menu.html:1 Blocked aria-hidden on an element because its descendant retained focus. 
The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: span
Ancestor with aria-hidden:  <span tabindex=​"-1" aria-hidden=​"true">​</span>​

I tried adding a test to catch this error but I could not get the accessibility test to fail.

Copy link

@jordanstith15
Copy link
Collaborator

LGTM. Just needs the snapshots updated

render(): JSX.Element {
return (
<Host role="list">
{this.renderFocusTarget()}
Copy link
Collaborator Author

@katie-bobbe-genesys katie-bobbe-genesys Feb 21, 2025

Choose a reason for hiding this comment

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

There is an issue with having this focus target element. Both of the following cause accessibility issues

  1. Having a focusable element with a role of aria-hidden is a violation
  2. If you remove the aria-hidden, having an element with an invalid role as a descendent of the list is a violation.

I have removed this focus target span and instead put a tab index of -1 on the Host.

@@ -18,27 +16,6 @@ export class GuxListItem {
@Prop()
disabled: boolean = false;

@Listen('mouseup')
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@daragh-king-genesys I am tagging you here because you seem to be the one who added this code. Can you remember if this code has any utility that I may be overlooking? I am removing it because it is causing unwanted focus behavior after my changes in the gux-list file.

@katie-bobbe-genesys katie-bobbe-genesys marked this pull request as ready for review February 24, 2025 18:45
@github-actions github-actions bot requested a review from 321gillian February 24, 2025 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants