Comments (5)
I'm not surprised query.tabsequence()
returns less elements than query.focusable
. Have a look at What does "focusable" mean? for differentiation of "focusable" and "tabbable".
Radio buttons, buttons, and other input types (tel, email) are excluded.
That sounds rather strange. what's is.tabbable()
saying about these elements?
from ally.js.
Thank you. I will read further on what focusable means.
I have attached a screenshot of my console log testing. I've redacted some pieces of information.
The first Array(39) is the result of query/focusable
The second Array(3) is the result of query/tabbable
on the same context
The following logs are iterating over the focusable
array, printing the element and then printing the boolean result from is/tabbable
.
The only three fields that are tabbable are the three text input fields.
edit: Without including ally.js, I am able to tab through all of the elements in that list. It's only when using these methods from the library do I encounter this behaviour.
from ally.js.
All elements that have tabindex="-1"
are not keyboard focusable. If they receive focus via Tab you are probably running some script. Browsers don't do this.
Which browser is that? Are you using ShadowDOM?
from ally.js.
I am running in Chrome. And this is all running in React, the dialog that opens is a dynamic component so to my knowledge it is from the shadowDOM as it's not a static element on the site.
Thank you for clearing up the tab index. I seem to always get -1 and 0 mixed up. Let me see if that clears some of the behaviour up on its own.
edit: EVen after updating the close-icon button to a tabindex of 0 and even removed the tabindex, that element is still not included in the tabbable array. So maybe this relates more to React and the ShadowDOM?
from ally.js.
I haven't had any luck yet with the ShadpwDOM methods. But at this point, this issue has far exceeded the scope of an issue and is in full troubleshooting mode. I will go ahead and close this and continue tinkering.
Thank you for the help!
from ally.js.
Related Issues (20)
- ally.maintain.tabFocus breaks tab in Android + Chrome HOT 6
- Error setting up focusWithin HOT 1
- Wrong focus-source on Chrome on first Input element HOT 1
- Radio groups are not considered when maintaining tab focus
- ally.query.tabsequence possible string comparison of tabindex
- Improve visuallyhidden class further HOT 4
- Fix for Firefox accidentally triggering click after focus change on space HOT 8
- Error on Import when Running CreateReactApp Test HOT 3
- Webpack bundle
- How to trap tab focus in element but allow tabbing to browser UI? HOT 4
- Current project status HOT 1
- Feature Request(?): Ability to run the browser support tests explicitly HOT 4
- Shadow DOM elements not identified correctly as contained by a parent element for maintain.disabled
- iOS 10.3 - 11.0 ally.maintain.tabFocus OSK (OnScreenKeyboard) shows and disappear for some milliseconds HOT 1
- Dialog content not focused when opened in Mac / VoiceOver
- Platform.js vulnerability issue HOT 1
- ally.maintain.tabFocus throws error when pressing Tab inside a dialog without focusable elements
- Cannot read property '0' of null in detect-focus
- Is this library dead?
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 ally.js.