fix: set DBTabItem selected state correctly #5399

milan-w · 2025-10-30T19:28:55Z

Set (aria-)selected state via listener on parent tablist to also react on de-selection of item. Closes #5288

Proposed changes

Each tab item holds an internal state _selected to keep track of the active tab. However before this change the state function did not correctly react to a de-selection because the event was only triggered on the newly active tab.
Now each item registers an event listener on the parent component and sets de/selected according to this event.

The playwright test for the tab components has also been refactored slightly to eliminate an unneccesary file write process.

Types of changes

Bugfix (non-breaking change that fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (improvements to existing components or architectural decisions)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Update (if none of the other choices apply)
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-tab-item-selected-state

changeset-bot · 2025-10-30T19:28:58Z

🦋 Changeset detected

Latest commit: c05f2a0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@db-ux/core-components	Patch
@db-ux/ngx-core-components	Patch
@db-ux/react-core-components	Patch
@db-ux/wc-core-components	Patch
@db-ux/v-core-components	Patch
@db-ux/core-foundations	Patch
@db-ux/core-stylelint	Patch
@db-ux/core-migration	Patch
@db-ux/agent-cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nmerget · 2025-10-31T07:21:15Z

packages/components/src/components/tab-item/tab-item.lite.tsx

 				props.onChange(event);
 			}

-			// We have different ts types in different frameworks, so we need to use any here


Maybe we can keep this - the aria snapshots changed so it might be good to keep those additonally

I re-added the stencil selector and reworked the event listeners, so the snapshots don't change anymore.

Set (aria-)selected state via listener on parent tablist to also react on de-selection of item.

use var instead of file to hold click event results for test duration

Now also sets aria-selected=true|false correctly which improves screen reader behaviour.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

set child active after event registered, remove event listerner on unmount

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

add more checks and guardrails to TabItem on change events

Copilot

Pull Request Overview

This PR fixes the internal state management of the DBTabItem component to correctly track and update the _selected state, which improves accessibility by ensuring aria-selected attributes are properly set for screen readers. The key changes include:

Replaced file-based test state management with an in-memory variable for testing the onIndexChange callback
Fixed tab index calculation in DBTabs by using children instead of childNodes to exclude text nodes
Added event listener logic to synchronize _selected state across tabs when selection changes

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
packages/components/src/components/tabs/tabs.spec.tsx	Replaced file system operations with module-scoped variable for testing tab index changes
packages/components/src/components/tabs/tabs.lite.tsx	Fixed index calculation by using `list.children` instead of `list.childNodes` and renamed variable from `indices` to `tabIndex`
packages/components/src/components/tab-item/tab-item.lite.tsx	Added `setSelectedOnChange` function, event listener management, and improved `_selected` state tracking to fix aria-selected behavior
.changeset/sharp-pumas-obey.md	Added changeset documenting the bug fix for DBTabItem internal state and accessibility improvements

Comments suppressed due to low confidence (1)

packages/components/src/components/tabs/tabs.spec.tsx:27

The comp component is defined at module scope with a closure over the module-scoped tabIndex variable. Since this component is reused across multiple tests (lines 31, 36, 48, 65, 70), all tests will mutate the same shared tabIndex variable. This creates test interdependencies and can lead to flaky tests depending on execution order.

Consider creating the component inside each test that needs it, or using a factory function that returns a fresh component instance with its own state.

const comp: any = (
	<DBTabs onIndexChange={(index: number) => (tabIndex = index)}>
		<DBTabList>
			<DBTabItem data-testid="test">Test 1</DBTabItem>
			<DBTabItem data-testid="test2">Test 2</DBTabItem>
			<DBTabItem>Test 3</DBTabItem>
		</DBTabList>

		<DBTabPanel>TestPanel 1</DBTabPanel>

		<DBTabPanel>TestPanel 2</DBTabPanel>

		<DBTabPanel>TestPanel 3</DBTabPanel>
	</DBTabs>
);

Copilot · 2025-11-10T12:21:25Z

packages/components/src/components/tab-item/tab-item.lite.tsx

+			// deselect this tab when another tab in tablist is selected
+			_ref.closest('[role=tablist]')?.addEventListener(
+				'change',
+				setSelectedOnChange
+			);


The event listener is added in onUpdate every time state.initialized becomes true and _ref exists. However, there's no removal of the previous listener before adding a new one. Since state.initialized is set to true in onMount and then set to false after the update, subsequent updates could potentially add multiple listeners to the same element, causing the handler to fire multiple times.

Consider tracking whether the listener has been added (e.g., with a flag) or ensuring the listener is only added once, or removing it before re-adding.

Copilot · 2025-11-10T12:21:25Z

packages/components/src/components/tab-item/tab-item.lite.tsx

+					default: () => {
+						state._selected = true;
+					}
+				});


The condition if (_ref.checked && !state._selected) only updates state._selected to true when the tab becomes checked. However, there's no corresponding logic to set state._selected to false when the tab becomes unchecked.

The new setSelectedOnChange function (lines 32-41) is supposed to handle deselection, but as noted in another comment, it has a logic issue. Consider adding an else clause here to explicitly set state._selected to false when _ref.checked is false, ensuring the state is always synchronized with the checked status.

Suggested change

});

});

} else if (!_ref.checked && state._selected) {

useTarget({

stencil: () => {

state._selected = getBooleanAsString(false);

},

default: () => {

state._selected = false;

}

});

Copilot · 2025-11-10T12:21:25Z

packages/components/src/components/tab-item/tab-item.lite.tsx

 	}, [props.name]);

+	onUnMount(() => {
+		if (state.initialized && _ref) {


The onUnMount hook checks state.initialized, but this is incorrect. At the time of unmounting, state.initialized is likely false because it's set to false in the onUpdate hook after initialization completes (line 92). This means the event listener cleanup in onUnMount will likely never execute, causing a memory leak.

The condition should either check if _ref exists, or remove the state.initialized check entirely since _ref should be sufficient to determine if the event listener was attached.

Suggested change

if (state.initialized && _ref) {

if (_ref) {

Copilot · 2025-11-10T12:21:26Z

packages/components/src/components/tab-item/tab-item.lite.tsx

+				state._selected = getBooleanAsString(event.target === _ref);
+			},
+			default: () => {
+				state._selected = event.target === _ref;


The setSelectedOnChange function compares event.target === _ref, but _ref is a ref object, not the DOM element itself. To get the actual DOM element, you need to access _ref directly (since in Mitosis, refs work differently per framework). The correct comparison should check if the event's target matches the actual input element.

Additionally, this logic appears to deselect tabs when another is selected, but the condition event.target === _ref will only be true for the newly selected tab, not the previously selected one. The function should check if event.target !== _ref to properly deselect this tab when another tab is selected.

Suggested change

state._selected = event.target === _ref;

state._selected = event.target === _ref.current;

Copilot · 2025-11-10T12:21:26Z

packages/components/src/components/tabs/tabs.spec.tsx

 import { DBTabPanel } from '../tab-panel';

-const filePath = './test-results/onIndexChange.txt';
+let tabIndex: number;


The tabIndex variable is declared at module scope, which means its value persists across test runs. This can cause test pollution where one test's execution affects another test's state.

Before line 43 checks expect(tabIndex).toBe(undefined), if another test has already run and set tabIndex, this assertion will fail. Additionally, the variable is never reset between tests.

Consider either:

Declaring tabIndex inside the test function and passing it via closure

Using test.beforeEach() to reset the variable

Making the variable test-specific using a different approach (e.g., a Map keyed by test context)

.changeset/sharp-pumas-obey.md

Co-authored-by: Copilot <[email protected]>

github-project-automation bot added this to UX Engineering Team Backlog Oct 30, 2025

github-project-automation bot moved this to 🏗 In progress in UX Engineering Team Backlog Oct 30, 2025

milan-w requested review from mfranzke and nmerget October 30, 2025 19:29

github-actions bot assigned milan-w Oct 30, 2025

github-actions bot added 🏘components 📕documentation Improvements or additions to documentation labels Oct 30, 2025

github-actions bot mentioned this pull request Oct 30, 2025

Automated PR: auto update snapshots #5400

Merged

d-koppenhagen previously approved these changes Oct 31, 2025

View reviewed changes

nmerget reviewed Oct 31, 2025

View reviewed changes

milan-w dismissed d-koppenhagen’s stale review via 91b5a58 November 3, 2025 11:57

github-actions bot mentioned this pull request Nov 3, 2025

Automated PR: auto update snapshots #5409

Merged

milan-w and others added 7 commits November 4, 2025 15:55

fix: set DBTabItem selected state correctly

73851f7

Set (aria-)selected state via listener on parent tablist to also react on de-selection of item.

chore: update DBTab test

ee4f087

use var instead of file to hold click event results for test duration

Fix DBTabItem selected state and aria-selected attribute

fb22490

Now also sets aria-selected=true|false correctly which improves screen reader behaviour.

auto update snapshots (#5400)

83dda9d

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix: pass correct tab item index from DBTab parent to child

91f9c90

set child active after event registered, remove event listerner on unmount

auto update snapshots (#5409)

01772af

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

refactor: ensure active/selected state and aria-selected are in snyc

d1535e1

add more checks and guardrails to TabItem on change events

milan-w force-pushed the fix-tab-item-selected-state branch from ee7cfbe to d1535e1 Compare November 6, 2025 17:11

fix: re-add stencil special boolean treatment in DBTabItem

d3c5b8d

milan-w requested a review from nmerget November 7, 2025 18:20

mfranzke previously approved these changes Nov 10, 2025

View reviewed changes

github-project-automation bot moved this from 🏗 In progress to ⏰ready for release in UX Engineering Team Backlog Nov 10, 2025

Merge branch 'main' into fix-tab-item-selected-state

acf8201

mfranzke enabled auto-merge (squash) November 10, 2025 12:17

mfranzke requested a review from Copilot November 10, 2025 12:17

Copilot AI reviewed Nov 10, 2025

View reviewed changes

mfranzke dismissed their stale review via c05f2a0 November 10, 2025 12:44

Update .changeset/sharp-pumas-obey.md

c05f2a0

Co-authored-by: Copilot <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: set DBTabItem selected state correctly #5399

fix: set DBTabItem selected state correctly #5399

Uh oh!

milan-w commented Oct 30, 2025 •

edited by github-actions bot

Loading

Uh oh!

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

nmerget Oct 31, 2025

Uh oh!

milan-w Nov 10, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 10, 2025

Uh oh!

Copilot AI Nov 10, 2025

Uh oh!

Copilot AI Nov 10, 2025

Uh oh!

Copilot AI Nov 10, 2025

Uh oh!

Copilot AI Nov 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

-				});
+				});
+			} else if (!_ref.checked && state._selected) {
+				useTarget({
+					stencil: () => {
+						state._selected = getBooleanAsString(false);
+					},
+					default: () => {
+						state._selected = false;
+					}
+				});

	state._selected = event.target === _ref;
	state._selected = event.target === _ref.current;

fix: set DBTabItem selected state correctly #5399

Are you sure you want to change the base?

fix: set DBTabItem selected state correctly #5399

Uh oh!

Conversation

milan-w commented Oct 30, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Types of changes

Uh oh!

changeset-bot bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

nmerget Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

milan-w Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

milan-w commented Oct 30, 2025 •

edited by github-actions bot

Loading

changeset-bot bot commented Oct 30, 2025 •

edited

Loading