Skip to content

Question around focusable elements #394

@canaandavis

Description

@canaandavis

I recently ran into an issue where, inside of a modal, I was including an iframe. I was wanting to exclude the iframe from the tab index, so I added tabindex="-1" to the element. Though, when the modal was shown the iframe was still being focused.

I started to try and understand how elements are being selected for focus and came across the getFocusableNodes function which uses FOCUSABLE_ELEMENTS.

The FOCUSABLE_ELEMENTS constant does seem to insinuate that it is intending to exclude elements with a negative tab index however, I was still seeing my element being focused.

I started fiddling with this a little more and what I was seeing is that, in order for this query selector to work, we would actually need to append :not([tabindex^="-"]) to each query selector inside of FOCUSABLE_ELEMENTS.

I’ve created a JS Bin to illustrate the issue.

It’s quite possible that there is something I’m misunderstanding here. So if that is the case I apologize. Though, if this is an actual issue that needs to be addressed, I’d be more than happy to create a PR and walk through the process with that.

Thank you for the awesome library, and please let me know if there is any additional information you need from me!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions