adobe / adobe/spectrum-web-components

[Bug]: sp-tabs does not register slotted sp-tab elements correctly on slot change

Open
#5,464 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Tabs SEV 4
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, sp-tab

### Expected behavior

Slotted tabs should be able to be selected when they are rendered.

### Actual behavior

Slotted tabs are not able to be selected after being updated in sp-tabs.

When the slot content of sp-tabs changes, the [onSlotChange()](https://github.com/adobe/spectrum-web-components/blob/main/packages/tabs/src/Tabs.ts#L505) handler is run. However, the slotted tab elements do not yet have their role updated (in the [firstUpdated() hook](https://github.com/adobe/spectrum-web-components/blob/main/packages/tabs/src/Tab.ts#L81)), so they are not set in this.tabs.

A workaround for this is to set `role="tab"` directly on the `sp-tab` when using it in `sp-tabs`, but we shouldn't need to do this for `sp-tabs` selection to work properly.

### Screenshots

_No response_

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

_No response_

### How can we reproduce this issue?

1. Go to https://stackblitz.com/edit/vitejs-vite-vzgkekts?file=src%2Fmy-element.ts%3AL24-L24,src%2Fvite-env.d.ts
2. Click on the switch to change the slotted tabs content
3. Observe how the tabs never update their selected state properly
4. Add `role="tab"` on every `sp-tab` being rendered
5. Observe how the tabs selection is properly updated

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

_No response_

### Severity

SEV 4

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with packages/tabs/src/Tabs.ts at onSlotChange() and packages/tabs/src/Tab.ts at firstUpdated(). Reproduce the problem using the linked StackBlitz example by switching the slotted tabs, then verify that selection updates correctly without manually adding role="tab" to each sp-tab.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.