diff --git a/.changeset/wise-walls-pretend.md b/.changeset/wise-walls-pretend.md new file mode 100644 index 00000000000..bde0de34bc8 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index e7d0292811a..686d4384eee 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/components/src/components/switch/model.ts b/packages/components/src/components/switch/model.ts index 582d626fa35..cab4e4b4d71 100644 --- a/packages/components/src/components/switch/model.ts +++ b/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) => void; +}; export type DBSwitchState = DBSwitchDefaultState & GlobalState & diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx index a15fb76fd6a..291b777cd0e 100644 --- a/packages/components/src/components/switch/switch.lite.tsx +++ b/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) => { + // 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) => state.handleFocus(event) } + onKeyDown={( + event: GeneralKeyboardEvent + ) => state.handleKeyDown(event)} /> {props.label} diff --git a/packages/components/src/components/switch/switch.spec.tsx b/packages/components/src/components/switch/switch.spec.tsx index 06480e03df7..64e812f6f12 100644 --- a/packages/components/src/components/switch/switch.spec.tsx +++ b/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(Test Switch); + 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(Test Switch); + 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(); + }); });