fix: add ENTER key support to db-switch

[Copilot]

Proposed changes

The db-switch component only responded to SPACE key for toggling, not ENTER. Per W3C ARIA switch patterns, both keys should toggle the switch for proper keyboard accessibility.

resolves #5443

Implementation

• Added handleKeyDown method to switch.lite.tsx that listens for ENTER key and programmatically clicks the input
• Prevents default behavior to avoid form submission side effects
• Updated DBSwitchDefaultState type to include the keyboard handler signature

Generated across all frameworks

The Mitosis build generates correct keyboard handlers for:

• Angular: (keydown)="handleKeyDown($event)"
• React: onKeyDown={(event) => handleKeyDown(event)}
• Vue: @keydown="async (event) => handleKeyDown(event)"
• Stencil: onKeyDown={(event) => this.handleKeyDown(event)}

Tests

Added Playwright tests verifying:

• ENTER key toggles switch on/off
• SPACE key continues to work (backward compatibility)

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)

Further comments

SPACE key behavior is preserved. Only the specific Angular generator was mentioned in the issue, but the fix applies to all framework outputs since it's implemented in the Mitosis source.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www-api.ibm.com
  • Triggering command: node /home/REDACTED/work/core-web/core-web/node_modules/@ibm/telemetry-js/dist/REDACTED-process.js --log=/tmp/ibmtelemetry-20251112T140901257Z-533603.log --config=telemetry.yml (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>db-switch not reacting to ENTER key</issue_title>
<issue_description>### Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

The db-switch component does not toggle between its states, if the "ENTER" key is pressed. This functionality is required for proper a11y usability.

https://design-system.deutschebahn.com/core-web/version/v4.2.0/components/data-input/switch/overview

Expected Behaviour

The db-switch component should toggle if it has been focused and the "ENTER" key is pressed.

Screenshots

No response

Browser version

Chrome

Add any other context about the problem here.

No response

Which DB business unit do you work for?

DB Systel GmbH (please name your customer below)

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

DB InfraGO AG

What project are you working on?

EBuLa Rückfallebene (IRE)</issue_description>

Comments on the Issue (you are @copilot in this section)

@mfranzke @nfellinger this pattern behaves similar to other components like e.g. the native checkbox element that only toggles it's state on space key instead of Enter. Due to expectation and research (I even also looked it up on https://www.w3.org/WAI/ARIA/apg/patterns/switch/) providing the functionality for this specific pattern, which isn't a regular form element, even though seems to be a good idea to me. We'll proceed with the implementation for that.

• Fixes db-switch not reacting to ENTER key #5443

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/copilot/fix-db-switch-enter-functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: 6d43c2f

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/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-components	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

[Copilot]

Pull Request Overview

This PR adds ENTER key support to the db-switch component to improve keyboard accessibility, addressing issue #5443. The W3C ARIA switch pattern specifies that both SPACE and ENTER keys should toggle switches, but the component previously only responded to SPACE.

• Added handleKeyDown method that programmatically clicks the input when ENTER is pressed (with disabled state check)
• Updated type definitions to include the keyboard handler signature
• Added comprehensive Playwright tests for both ENTER and SPACE key functionality

Reviewed Changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/components/src/components/switch/switch.lite.tsx	Implements handleKeyDown handler with ENTER key logic and attaches it to the input element
packages/components/src/components/switch/model.ts	Updates DBSwitchDefaultState type to include handleKeyDown method signature and imports GeneralKeyboardEvent
packages/components/src/components/switch/switch.spec.tsx	Adds tests for ENTER key toggle functionality and verifies SPACE key backward compatibility
.gitignore	Adds **/blob-report to ignore Playwright blob reports
.changeset/wise-walls-pretend.md	Documents the patch-level change for all framework outputs