Comments (6)
This is challenging - we'll now have to get the computed style for every element we visit, which will force a style recalc and potentially layout each time.
from inert.
Well, we could unconditionally set tabindex=-1
to all of them w/o checking for the computed style, but yeah it would still be heavy 😞
from inert.
According to focusable elements compatibility table there are two CSS properties that might make an element keyboard focusable:
user-modify: read-write
in Blink, WebKit and MS Edgeoverflow: auto|scroll
in Gecko
If you also consider script/pointer focusable elements, you're in for a few more surprises.
Since CSS selectors can't target CSS properties, these elements cannot be found by way of document.querySelectorAll()
. You'd have to walk the entire DOM and examine every node's computed style. This is way more expensive than qSA. I've implemented this approach in ally.query.tabbable
in order to come as close to any given browser's behavior as possible.
Depending on the accuracy with which the inert polyfill should identify elements, I'd like to suggest using ally.query.focusable
or ally.query.tabbable
, instead of rolling your own. But honestly, I don't think that you should do either. Making developers add the tabindex attribute to elements that are focusable seems like a fair trade-off for WICG/inert.
Maybe we should talk about a separate WICG initiative to surface the internal tabindex focus flag to be used in qSA as :focusable
and :tabbable
?
from inert.
Ok, hacky idea for now: what if we just add another CSS rule to make things inside [inert]
overflow: hidden !important;
and user-modify: none !important
?
from inert.
That would cause a resize on elements that have the scrollbar (on windows), but yeah that would solve the issue..
from inert.
(Unless someone has a more-specific !important
rule for those things, but honestly who does that...)
from inert.
Related Issues (20)
- Injecting inline style violates strict style csp HOT 2
- Unknown Syntax error in IE HOT 4
- Is inert string or boolean? HOT 4
- module should not use src/index.js
- Transpile the module export HOT 1
- Specify exact browser support in MDN browser compat data
- How can I check if the polyfill is already loaded? HOT 3
- When inert library is imported more than once in a project, creates error HOT 2
- “So every modal dialog must be outside the inert container?” HOT 1
- Relation to content-visibility: hidden HOT 6
- License for NPM wicg/inert HOT 5
- should the _focusableElementsString include tabindex? HOT 3
- Video elements being focused HOT 1
- `Element is not defined` in deno
- Styles are too easily overridden
- Polyfill being applied in Chrome 102 HOT 3
- Tests should not run against browsers that have implemented inert
- Add new gh webhook?
- Status of incubation HOT 4
- W3C Software and Document License (2015/05/13) was expired HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inert.