Comments (3)
@ZhihaoJia Interesting ...
Can this be achieved by looking for tabbable nodes in a container that wraps both container1 and container2?
Those sound like some wacky examples, and the idea of bouncing focus across various modals sounds confusing to me. Maybe I'm not envisioning the right UI.
Keep in mind that tabbable is supposed to list the nodes that you would actually focus as you tab through the container. If you tab through your container and come across a node order different from what tabbable returns, there's a bug. But if you want to use tabbable to get some kind of alternate order, different from what tabbing actually does, that's out of scope. Does this apply to your use-cases?
from tabbable.
@davidtheclark Yep, it could totally be achieved using the method you mentioned! That is, looking for tabbable nodes in the closest common ancestor (with tabbable
) and filter for the ones inside either container1 or container2. This would cover my use cases, which I think would admittedly be pretty niche.
I didn't explain the use cases I was envisioning well though, so let me give that another try. The composite modal case I mentioned doesn't have as much to do with multiple modals as overlaying UI components originating from modals. This is getting into the weeds, but suppose we have a dropdown close to the bottom of a modal. The modal content is scrollable (vs say having a long modal that scrolls with the page). On opening the dropdown menu, suppose we want it to extend below the modal dialog. If the menu were a child of the modal, it might cause the scrollable content to increase (e.g. causes a scrollbar to appear). With overflow: hidden
on the modal, we would not see the full menu. With overflow: visible
, we wouldn't be able to make the modal contents scrollable. So instead we move the menu outside of the modal in the DOM. However, calling tabbable
on the modal would no longer include the tabbable nodes in the menu.
For the second use case, suppose we have a modal, except instead of the standard floating rectangle we have a panel that slides in from the side. Suppose we also have a nav bar along the top of the page and we don't want to cover the nav bar with the panel. In that case, we may want to get the tabbable nodes in both the nav bar and modal panel, while excluding tabbable nodes on the rest of the page.
Anyway, I think tabbable
would still work for both cases so it's not a big deal. It's really just for convenience. :)
from tabbable.
Thanks for clarifying @ZhihaoJia! Makes sense.
from tabbable.
Related Issues (20)
- element.matches not working in ie 11. HOT 5
- Scroll containers HOT 3
- isTabbableRadio doesn't properly escape query selectors HOT 4
- Use @testing-library/dom and Jest for tests HOT 3
- Add code coverage badge to the README HOT 5
- Restore actual browser testing with Cypress HOT 8
- support inert attribute HOT 13
- Exclude form elements in `:disabled` fieldset HOT 2
- Optimizing displayCheck: 'full' HOT 9
- Bug: isDisabledFromFieldset doesn't check the top-most disabled <fieldset> HOT 3
- Safari: Object passed in getCheckedRadio is not iterable, causing a for loop error HOT 2
- v5.3.0 breaks literally all of our usage of `tabbable` 😅 when called on a node not attached to the document HOT 40
- [MAJOR] isHidden should exclude detached nodes by default
- Firefox throws an error when checking disabled on non button element HOT 4
- IE support broken in v5.3.2+ HOT 1
- tabbable breaks when processing an element with a "scope" attribute HOT 6
- jest error Your focus-trap must have at least one container with at least one tabbable node in it at all times HOT 2
- Can't make it work testing with tabbable mocked HOT 7
- jsdom issue: 'slot):not([inert]' is not a valid selector HOT 7
- Remove nwsapi v2.2.2 override once bug is fixed
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 tabbable.