[#292] Add support for inert attribute #924
Conversation
Fixes #292 Inert elements, as well as elements inside inert ancestors, will no longer be treated as tabbable/focusable. Considering this a minor update since inert elements in browsers supporting the inert attribute (which has wide enough support now) would already be non-interactive. So this is tabbable catching to reality rather than tabbable altering behavior.
🦋 Changeset detectedLatest commit: a89c74c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
…till does NOT support so tests will fail
Codecov ReportBase: 97.87% // Head: 97.94% // Increases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## master #924 +/- ##
==========================================
+ Coverage 97.87% 97.94% +0.07%
==========================================
Files 1 1
Lines 235 243 +8
Branches 113 119 +6
==========================================
+ Hits 230 238 +8
Misses 5 5
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
|
Unfortunately, FF still does not support So I have disabled the requirement for the FF tests to pass. |
|
Not sure if this works, but this post suggests Cypress supports conditional test configuration: https://filiphric.com/skip-test-conditionally-with-cypress#test-configuration |
| * False if `node` is falsy. | ||
| */ | ||
| const isInert = function (node, lookUp = true) { | ||
| return !!(node?.inert || (lookUp && node && isInert(node.parentNode))); // recursive |
There was a problem hiding this comment.
Why do you need to lookup with JavaScript instead of matching with CSS match:
With parent check:
is not inert: node.matches(':not([inert]), :not([inert] *)')
is inert: node.matches('[inert], :is([inert] *)')
There was a problem hiding this comment.
Good point, but unfortunately we can't call matches on what I think are the shadow roots. Lots of shadow-related tests fail because of matches is not a function errors when I use your suggestion. What I have right now works in all cases.
src/index.js
Outdated
| '[contenteditable]:not([contenteditable="false"])', | ||
| 'details>summary:first-of-type', | ||
| 'details', | ||
| 'input:not([inert] *)', |
There was a problem hiding this comment.
you can add :not([inert]) to all of these selectors to save the extra JavaScript check on the element itself
This can also be done with multiple selectors inside the :not(), with pretty good browser support, but probably less then what is currently supported: :not([inert], [inert] *)
There was a problem hiding this comment.
Thanks for pointing this out. We can eliminate more candidates right off the bat with the addition of :not([inert]), which I have done. I didn't use the multi-selector syntax since the exhaustive syntax has broader support (just in case...).
Yes! I had no idea. It was buried in cypress-io/cypress#5346 and https://github.com/cypress-io/cypress-documentation/pull/3209/files but here's the official doc entry: https://docs.cypress.io/guides/references/configuration#Single-test-configuration Thank you! |
Fixes #292
Inert elements, as well as elements inside inert ancestors, will no longer be treated as tabbable/focusable.
Considering this a minor update since inert elements in browsers supporting the inert attribute (which has wide enough support now) would already be non-interactive. So this is tabbable catching to reality rather than tabbable altering behavior.
PR Checklist
Please leave this checklist in your PR.
typeof document/window !== 'undefined'before using it in code that gets executed on load.yarn changesetlocally to add one, and follow the prompts).