fast
fast copied to clipboard
fix: disabled tabs are focusable with home and enter keys
🐛 Bug Report
When navigating between tabs in the <fast-tabs>
component with the keyboard, the Home
and End
keys direct focus to the first and last items regardless of their disabled
state.
💻 Repro or Code Sample
- Go to https://explore.fast.design/components/fast-tabs
- Paste this into the Code box:
<fast-tabs> <fast-tab slot="tab" disabled>Tab one</fast-tab> <fast-tab slot="tab">Tab two</fast-tab> <fast-tab slot="tab" disabled>Tab three</fast-tab> <fast-tab-panel slot="tabpanel">Tab panel 1</fast-tab-panel> <fast-tab-panel slot="tabpanel">Tab panel 2</fast-tab-panel> <fast-tab-panel slot="tabpanel">Tab panel 3</fast-tab-panel> </fast-tabs>
- Click the second tab labeled "Tab two" in the preview.
- Press the left and right arrow keys to try to navigate between items.
- Press the Home and End keys to navigate to the beginning and end of the tab list.
🤔 Expected Behavior
This could probably go one of two ways:
- Pressing the
Home
andEnd
keys should only select the first and last focusable/enabled tabs. - Keyboard navigation should allow all tabs to always be focused, regardless of their disabled state.
😯 Current Behavior
Pressing the Home
or End
key moves focus to the first or last disabled tab, which cannot be navigated to under other circumstances (arrow keys, clicking, tabbing).
💁 Possible Solution
As described above in the Expected Behavior section, I could see this go one of two ways, depending on how the ARIA role is expected to handle keyboard navigation:
- Pressing the
Home
andEnd
keys should only select the first and last focusable/enabled tabs. - Keyboard navigation should allow all tabs to always be focused, regardless of their disabled state.
🔦 Context
This test was discovered while converting tests for the FASTTabs
component from Karma to Playwright.
🌍 Your Environment
- OS & Device: Windows 11 PC
- Browser: Edge
- Version 104.0.1293.47
Happy to take a look at this one
closed with #6298