adobe / adobe/spectrum-web-components

[Bug]: Tabs can still be focused after setting disabled attribute

Open
#5,356 2 comments 0 reactions 0 assignees View on GitHub
bug Component:Tabs SEV 3
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-tabs

### Expected behavior

Tabs should not be focusable when disabled.

### Actual behavior

Tabs are focusable after setting the disabled property on the sp-tabs DOM element.

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/LOFTH0ZjO3EfPsuQ7PlA/src/index.ts?p=stories
2. Add the "disabled" attribute on sp-tabs in the Elements panel of dev tools
3. Notice how the "focusable" attribute remains and you can navigate the tabs by tabbing and using the arrow keys

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the sp-tabs component and reproduce the issue using the linked webcomponents.dev example in Chrome. Inspect how setting the disabled attribute affects the focusable attribute and keyboard navigation; done means disabled tabs are no longer focusable or navigable by keyboard.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.