diff --git a/__snapshots__/switch/showcase/chromium-highContrast/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/chromium-highContrast/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png index adf0acbe60c4..6ab7a3b3234c 100644 Binary files a/__snapshots__/switch/showcase/chromium-highContrast/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png and b/__snapshots__/switch/showcase/chromium-highContrast/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml b/__snapshots__/switch/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml index 6adeb525a287..069f6404530b 100644 --- a/__snapshots__/switch/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/switch/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml @@ -17,6 +17,9 @@ - switch "True" [checked] - text: "True" - status + - switch "True (Disabled)" [checked] [disabled] + - text: True (Disabled) + - status - link "Disabled" - switch "(Default) False" - text: (Default) False diff --git a/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png index 8626fc1b30d7..949049f9eeac 100644 Binary files a/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png and b/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/chromium/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml b/__snapshots__/switch/showcase/chromium/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml index 6adeb525a287..069f6404530b 100644 --- a/__snapshots__/switch/showcase/chromium/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/switch/showcase/chromium/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml @@ -17,6 +17,9 @@ - switch "True" [checked] - text: "True" - status + - switch "True (Disabled)" [checked] [disabled] + - text: True (Disabled) + - status - link "Disabled" - switch "(Default) False" - text: (Default) False diff --git a/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png index c4f29e70c222..ff36955edcda 100644 Binary files a/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png and b/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/firefox/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml b/__snapshots__/switch/showcase/firefox/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml index 6adeb525a287..069f6404530b 100644 --- a/__snapshots__/switch/showcase/firefox/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/switch/showcase/firefox/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml @@ -17,6 +17,9 @@ - switch "True" [checked] - text: "True" - status + - switch "True (Disabled)" [checked] [disabled] + - text: True (Disabled) + - status - link "Disabled" - switch "(Default) False" - text: (Default) False diff --git a/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png index da9475e2108b..dc63b9ceb73c 100644 Binary files a/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png and b/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/mobile-chrome/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml b/__snapshots__/switch/showcase/mobile-chrome/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml index 6adeb525a287..069f6404530b 100644 --- a/__snapshots__/switch/showcase/mobile-chrome/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/switch/showcase/mobile-chrome/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml @@ -17,6 +17,9 @@ - switch "True" [checked] - text: "True" - status + - switch "True (Disabled)" [checked] [disabled] + - text: True (Disabled) + - status - link "Disabled" - switch "(Default) False" - text: (Default) False diff --git a/__snapshots__/switch/showcase/mobile-safari/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml b/__snapshots__/switch/showcase/mobile-safari/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml index 6adeb525a287..069f6404530b 100644 --- a/__snapshots__/switch/showcase/mobile-safari/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/switch/showcase/mobile-safari/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml @@ -17,6 +17,9 @@ - switch "True" [checked] - text: "True" - status + - switch "True (Disabled)" [checked] [disabled] + - text: True (Disabled) + - status - link "Disabled" - switch "(Default) False" - text: (Default) False diff --git a/__snapshots__/switch/showcase/webkit/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml b/__snapshots__/switch/showcase/webkit/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml index 6adeb525a287..069f6404530b 100644 --- a/__snapshots__/switch/showcase/webkit/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/switch/showcase/webkit/should-have-same-aria-snapshot/DBSwitch-should-have-same-aria-snapshot.yaml @@ -17,6 +17,9 @@ - switch "True" [checked] - text: "True" - status + - switch "True (Disabled)" [checked] [disabled] + - text: True (Disabled) + - status - link "Disabled" - switch "(Default) False" - text: (Default) False diff --git a/packages/components/src/components/switch/model.ts b/packages/components/src/components/switch/model.ts index cab4e4b4d71b..f83b18d146d3 100644 --- a/packages/components/src/components/switch/model.ts +++ b/packages/components/src/components/switch/model.ts @@ -40,7 +40,12 @@ export type DBSwitchProps = GlobalProps & IconProps & IconTrailingProps & IconLeadingProps & - DBSwitchDefaultProps; + DBSwitchDefaultProps & { + /** Accessible name for the inner input. Mirrors to `aria-label`. */ + ariaLabel?: string; + /** Id(s) for element(s) labelling the input. Mirrors to `aria-labelledby`. */ + ariaLabelledBy?: string; + }; export type DBSwitchDefaultState = { handleKeyDown: (event: GeneralKeyboardEvent) => void; @@ -51,4 +56,6 @@ export type DBSwitchState = DBSwitchDefaultState & ChangeEventState & FocusEventState & FormState & - FromValidState; + FromValidState & { + _labelId?: string; + }; diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx index 291b777cd0e7..95985659ead6 100644 --- a/packages/components/src/components/switch/switch.lite.tsx +++ b/packages/components/src/components/switch/switch.lite.tsx @@ -56,6 +56,7 @@ export default function DBSwitch(props: DBSwitchProps) { // jscpd:ignore-start const state = useStore({ _id: undefined, + _labelId: undefined as string | undefined, _messageId: undefined as string | undefined, _validMessageId: undefined as string | undefined, _invalidMessageId: undefined as string | undefined, @@ -156,10 +157,12 @@ export default function DBSwitch(props: DBSwitchProps) { }); onMount(() => { - state._id = props.id ?? `switch-${uuid()}`; - state._messageId = `${state._id}${DEFAULT_MESSAGE_ID_SUFFIX}`; - state._validMessageId = `${state._id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`; - state._invalidMessageId = `${state._id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`; + const id = props.id ?? `switch-${uuid()}`; + state._id = id; + state._labelId = `${id}-label`; + state._messageId = `${id}${DEFAULT_MESSAGE_ID_SUFFIX}`; + state._validMessageId = `${id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`; + state._invalidMessageId = `${id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`; state.handleValidation(); }); @@ -213,7 +216,7 @@ export default function DBSwitch(props: DBSwitchProps) { data-hide-asterisk={getHideProp(props.showRequiredAsterisk)} data-custom-validity={props.validation} class={cls('db-switch', props.className)}> -