Tab navigation not working on disabled elements with tabIndex=0

[dmytrokirpa]

Background:

There is an issue in the Fluent UI repository concerning tab navigation beyond disabled elements and a PR with attempt to fix it. And it appears to be related to Tabster's handling of tab navigation for disabled elements with tabindex="0".

Steps to reproduce:

1. Visit https://codesandbox.io/p/sandbox/epic-easley-v2n9kf?file=%2Fsrc%2FApp.tsx%3A16%2C42
2. Use the tab key to navigate between buttons

Expected result:

Tab navigation should bypass all disabled elements.

Actual result:

Tab navigation halts after encountering disabled elements with tabindex="0".

Screen.Recording.2024-08-14.at.12.40.44.mov

Note: While removing tabindex="0" from disabled elements is a workaround, the question remains whether Tabster should inherently support such cases.

[ling1726]

Here's a correct repro https://codesandbox.io/p/sandbox/festive-jang-jl2lw3?file=%2Fsrc%2Findex.tsx%3A14%2C7&workspaceId=2dab710c-acfe-4ff8-bb95-b6e56da35f64

[rgallagherab]

We've run into the same issue in our products.

[rgallagherab]

I did open a pull request last week with a fix for this: #451

FOCUSABLE_SELECTOR attempts to make disabled inputs and form controls unfocusable with :not([disabled]), but then matches *[tabindex] as focusable (which should never be allowed on disabled button, input, select, or textarea).

[rgallagherab]

Just commenting again to bring some attention back to the PR I opened to resolve this, since I've not seen any activity, feedback, etc. there. For any Tabster users who have unknowingly created this scenario the library is currently creating blocker-level WCAG violations (2.1.2) in their products.

We've already added a patch with this fix in our codebase, but I'd love to see this resolved for everyone.