fix: add ENTER key support to db-switch

.changeset/wise-walls-pretend.md

@@ -0,0 +1,8 @@
+---
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/wc-core-components": patch
+"@db-ux/v-core-components": patch
+---
+
+refactor(DBSwitch): Also toggle on pressing Enter key, not just Space

.gitignore

@@ -76,3 +76,4 @@ showcases/patternhub/public/iframe-resizer/*
 /packages/agent-cli/test/.amazonq/rules/db-ux.md
 /core-web.iml
 /build-storybooks/
+**/blob-report

packages/components/src/components/switch/model.ts

@@ -8,6 +8,7 @@ import {
 	FormProps,
 	FormState,
 	FromValidState,
+	GeneralKeyboardEvent,
 	GlobalProps,
 	GlobalState,
 	IconLeadingProps,
@@ -41,7 +42,9 @@ export type DBSwitchProps = GlobalProps &
 	IconLeadingProps &
 	DBSwitchDefaultProps;
 
-export type DBSwitchDefaultState = {};
+export type DBSwitchDefaultState = {
+	handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => void;
+};
 
 export type DBSwitchState = DBSwitchDefaultState &
 	GlobalState &

packages/components/src/components/switch/switch.lite.tsx

@@ -17,7 +17,11 @@ import {
 	DEFAULT_VALID_MESSAGE,
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
-import { ChangeEvent, InteractionEvent } from '../../shared/model';
+import {
+	ChangeEvent,
+	GeneralKeyboardEvent,
+	InteractionEvent
+} from '../../shared/model';
 import {
 	cls,
 	delay,
@@ -138,6 +142,16 @@ export default function DBSwitch(props: DBSwitchProps) {
 			if (props.onFocus) {
 				props.onFocus(event);
 			}
+		},
+		handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => {
+			// Support ENTER key for toggling the switch (a11y requirement)
+			if (event.key === 'Enter') {
+				event.preventDefault();
+				// Toggle the switch by clicking it programmatically
+				if (!props.disabled) {
+					(_ref as HTMLInputElement)?.click();
+				}
+			}
 		}
 	});
 
@@ -225,6 +239,9 @@ export default function DBSwitch(props: DBSwitchProps) {
 					onFocus={(event: InteractionEvent<HTMLInputElement>) =>
 						state.handleFocus(event)
 					}
+					onKeyDown={(
+						event: GeneralKeyboardEvent<HTMLInputElement>
+					) => state.handleKeyDown(event)}
 				/>
 				<Show when={props.label} else={props.children}>
 					{props.label}

packages/components/src/components/switch/switch.spec.tsx

@@ -33,4 +33,44 @@ test.describe('DBSwitch', () => {
 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
+
+	test('should toggle on ENTER key press', async ({ mount, page }) => {
+		const component = await mount(<DBSwitch>Test Switch</DBSwitch>);
+		const input = component.locator('input[type="checkbox"][role="switch"]');
+
+		// Initially unchecked
+		await expect(input).not.toBeChecked();
+
+		// Focus the input
+		await input.focus();
+
+		// Press ENTER key
+		await page.keyboard.press('Enter');
+
+		// Should be checked after ENTER key press
+		await expect(input).toBeChecked();
+
+		// Press ENTER key again
+		await page.keyboard.press('Enter');
+
+		// Should be unchecked after second ENTER key press
+		await expect(input).not.toBeChecked();
+	});
+
+	test('should toggle on SPACE key press', async ({ mount, page }) => {
+		const component = await mount(<DBSwitch>Test Switch</DBSwitch>);
+		const input = component.locator('input[type="checkbox"]');
+
+		// Initially unchecked
+		await expect(input).not.toBeChecked();
+
+		// Focus the input
+		await input.focus();
+
+		// Press SPACE key (default checkbox behavior)
+		await page.keyboard.press('Space');
+
+		// Should be checked after SPACE key press
+		await expect(input).toBeChecked();
+	});
 });