search

WICG / inert

Polyfill for the inert attribute and property.
Other
924 stars 81 forks source link

Details tag becomes focusable even after applying inert #133

Closed pranav300 closed 4 years ago

pranav300 commented 5 years ago

After applying inert to the root element while opening an overlay. The details tag which is a child element of root is still focusable. This causes an axe-core violation. Is there a way to make details tag not focusable? ezgif com-video-to-gif

robdodson commented 5 years ago

Hi @pranav300, it's a little hard for me to read what's going on in that video. Are you able to share a live URL example that I can take a look at?

pranav300 commented 5 years ago

You can look into this link terra-ui.com.

Steps to Reproduce

  1. On the link above click the button of the first example.
  2. then run axe-core on the page
  3. the details tag which is the child of root element will be focusable but the inert has been applied on the root element.
bjankord commented 5 years ago

@robdodson I've created a reduced test case of what we're seeing: https://codepen.io/bjankord/pen/YzKYqam

The details element nested within a div with the inert attribute is still interactive.

Edit: I made a fork where tabindex="-1" is set on the summary element by default but it seems the inert polyfill is removing it: https://codepen.io/bjankord/pen/pozpbmB

robdodson commented 5 years ago

ok I think you've hit a bug in the polyfill.

If you get rid of the inert polyfill and put tabindex=-1 on the summary element, it seems to behave as expected.

However, if you're using the inert polyfill and you do something like <summary inert tabindex="-1"> it will remove the tabindex="-1".

@alice do you think the inert tree walker could add tabindex=-1 to summary elements when it's walking the tree?