[Bug]: Cannot tab navigate back past disabled dropdown

[cmcdougall]

Library

React Northstar / v0 (@fluentui/react-northstar)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 58.87 GB / 62.75 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Browsers:
    Chrome: 121.0.6167.139

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/p/sandbox/admiring-poitras-zhs96r?file=%2Fsrc%2Fexample.tsx%3A9%2C32&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsci50qy00063j6hpdqt5iwv%2522%252C%2522sizes%2522%253A%255B85.67398119122257%252C14.326018808777434%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsci50qx00023j6hzn19pvyd%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsci50qx00033j6h3atpnb9k%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsci50qx00053j6hnomep25b%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsci50qx00023j6hzn19pvyd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsci50qx00013j6he4r8v8gd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clsvdflez002v3j6hdu0w8o4p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A9%252C%2522startColumn%2522%253A32%252C%2522endLineNumber%2522%253A9%252C%2522endColumn%2522%253A32%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fexample.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clsci50qx00023j6hzn19pvyd%2522%252C%2522activeTabId%2522%253A%2522clsvdflez002v3j6hdu0w8o4p%2522%257D%252C%2522clsci50qx00053j6hnomep25b%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsci50qx00043j6hnxxdkco9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clsci50qx00053j6hnomep25b%2522%252C%2522activeTabId%2522%253A%2522clsci50qx00043j6hnxxdkco9%2522%257D%252C%2522clsci50qx00033j6h3atpnb9k%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clsci50qx00033j6h3atpnb9k%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug Description

Actual Behavior

I cannot reproduce this bug in Code sandbox, but the bug is on the React React Fluent UI website: Fluent Dropdown (disabled)

If you tab past a disabled Dropdown element, then use shift + tab to move back throughout the DOM, you cannot focus on the disabled dropdown, or continue navigating backwards throughout the DOM.

Expected Behavior

Should be able to continue focusing back past the disabled dropdown using keyboard navigation.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

Here's a repro: https://codesandbox.io/p/sandbox/sharp-river-4dwgfj?file=%2Fsrc%2Fexample.tsx. It just needs a control managed by tabster before the Combobox to show the bug.

My guess is that this appears to be a bug with tabster trying to send focus to an unfocusable element, since it's not checking for display: none/visibility: hidden styles. I'll create a repro directly in tabster & file a bug

[florian-msft]

Hi @dmytrokirpa is there an update on this? I believe this is an accessibility issue as one cannot navigate pages properly. The issue repros for me on the documentation example page: if you place focus on the dropdown under "Truncated Value" and Shift-Tab a couple of times, focus gets stuck and you can't navigate past the disabled dropdown.