fast icon indicating copy to clipboard operation
fast copied to clipboard

fix: disabled tabs are focusable with home and enter keys

Open radium-v opened this issue 2 years ago • 1 comments

🐛 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

  1. Go to https://explore.fast.design/components/fast-tabs
  2. 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>
    
  3. Click the second tab labeled "Tab two" in the preview.
  4. Press the left and right arrow keys to try to navigate between items.
  5. 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 and End 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 and End 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

radium-v avatar Aug 10 '22 23:08 radium-v

Happy to take a look at this one

m4thieulavoie avatar Aug 19 '22 00:08 m4thieulavoie

closed with #6298

chrisdholt avatar Oct 03 '22 22:10 chrisdholt