diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx index 5fa367b14f9..41e1ee44ef5 100644 --- a/packages/components/src/components/checkbox/checkbox.lite.tsx +++ b/packages/components/src/components/checkbox/checkbox.lite.tsx @@ -34,7 +34,7 @@ export default function DBCheckbox(props: DBCheckboxProps) { _invalidMessageId: this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX, _descByIds: '', _voiceOverFallback: '', - handleChange: (event: ChangeEvent) => { + handleChange: (event: ChangeEvent) => { if (props.onChange) { props.onChange(event); } @@ -68,7 +68,7 @@ export default function DBCheckbox(props: DBCheckboxProps) { state._descByIds = ''; } }, - handleBlur: (event: InteractionEvent) => { + handleBlur: (event: InteractionEvent) => { if (props.onBlur) { props.onBlur(event); } @@ -77,7 +77,7 @@ export default function DBCheckbox(props: DBCheckboxProps) { props.blur(event); } }, - handleFocus: (event: InteractionEvent) => { + handleFocus: (event: InteractionEvent) => { if (props.onFocus) { props.onFocus(event); } @@ -149,13 +149,11 @@ export default function DBCheckbox(props: DBCheckboxProps) { disabled={props.disabled} value={props.value} required={props.required} - onChange={(event: ChangeEvent) => - state.handleChange(event) - } - onBlur={(event: InteractionEvent) => + onChange={(event: ChangeEvent) => state.handleChange(event)} + onBlur={(event: InteractionEvent) => state.handleBlur(event) } - onFocus={(event: InteractionEvent) => + onFocus={(event: InteractionEvent) => state.handleFocus(event) } aria-describedby={state._descByIds} @@ -191,11 +189,9 @@ export default function DBCheckbox(props: DBCheckboxProps) { DEFAULT_INVALID_MESSAGE} - + {/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html + * Currently VoiceOver isn't supporting changes from aria-describedby. + * This is an internal Fallback */} {state._voiceOverFallback} diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx index 2323ec9cccf..9b4c524bf56 100644 --- a/packages/components/src/components/input/input.lite.tsx +++ b/packages/components/src/components/input/input.lite.tsx @@ -47,7 +47,7 @@ export default function DBInput(props: DBInputProps) { label: DEFAULT_LABEL, placeholder: ' ' }, - handleInput: (event: InputEvent) => { + handleInput: (event: InputEvent) => { if (props.onInput) { props.onInput(event); } @@ -56,7 +56,7 @@ export default function DBInput(props: DBInputProps) { props.input(event); } }, - handleChange: (event: ChangeEvent) => { + handleChange: (event: ChangeEvent) => { if (props.onChange) { props.onChange(event); } @@ -95,7 +95,7 @@ export default function DBInput(props: DBInputProps) { state._descByIds = ''; } }, - handleBlur: (event: InteractionEvent) => { + handleBlur: (event: InteractionEvent) => { if (props.onBlur) { props.onBlur(event); } @@ -104,7 +104,7 @@ export default function DBInput(props: DBInputProps) { props.blur(event); } }, - handleFocus: (event: InteractionEvent) => { + handleFocus: (event: InteractionEvent) => { if (props.onFocus) { props.onFocus(event); } @@ -184,18 +184,10 @@ export default function DBInput(props: DBInputProps) { form={props.form} pattern={props.pattern} autocomplete={props.autocomplete} - onInput={(event: ChangeEvent) => - state.handleInput(event) - } - onChange={(event: ChangeEvent) => - state.handleChange(event) - } - onBlur={(event: InteractionEvent) => - state.handleBlur(event) - } - onFocus={(event: InteractionEvent) => - state.handleFocus(event) - } + onInput={(event: ChangeEvent) => state.handleInput(event)} + onChange={(event: ChangeEvent) => state.handleChange(event)} + onBlur={(event: InteractionEvent) => state.handleBlur(event)} + onFocus={(event: InteractionEvent) => state.handleFocus(event)} list={props.dataList && state._dataListId} aria-describedby={state._descByIds} /> @@ -242,11 +234,9 @@ export default function DBInput(props: DBInputProps) { DEFAULT_INVALID_MESSAGE} - + {/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html + * Currently VoiceOver isn't supporting changes from aria-describedby. + * This is an internal Fallback */} {state._voiceOverFallback} diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx index 1c7e3cf5fb5..1a474677598 100644 --- a/packages/components/src/components/select/select.lite.tsx +++ b/packages/components/src/components/select/select.lite.tsx @@ -48,12 +48,12 @@ export default function DBSelect(props: DBSelectProps) { _value: '', initialized: false, _voiceOverFallback: '', - handleClick: (event: ClickEvent) => { + handleClick: (event: ClickEvent) => { if (props.onClick) { props.onClick(event); } }, - handleInput: (event: InputEvent) => { + handleInput: (event: InputEvent) => { if (props.onInput) { props.onInput(event); } @@ -62,7 +62,7 @@ export default function DBSelect(props: DBSelectProps) { props.input(event); } }, - handleChange: (event: ChangeEvent) => { + handleChange: (event: ChangeEvent) => { if (props.onChange) { props.onChange(event); } @@ -97,7 +97,7 @@ export default function DBSelect(props: DBSelectProps) { state._descByIds = state._placeholderId; } }, - handleBlur: (event: InteractionEvent) => { + handleBlur: (event: InteractionEvent) => { if (props.onBlur) { props.onBlur(event); } @@ -106,7 +106,7 @@ export default function DBSelect(props: DBSelectProps) { props.blur(event); } }, - handleFocus: (event: InteractionEvent) => { + handleFocus: (event: InteractionEvent) => { if (props.onFocus) { props.onFocus(event); } @@ -167,21 +167,11 @@ export default function DBSelect(props: DBSelectProps) { name={props.name} value={props.value ?? state._value} autocomplete={props.autocomplete} - onInput={(event: ChangeEvent) => - state.handleInput(event) - } - onClick={(event: ClickEvent) => - state.handleClick(event) - } - onChange={(event: ChangeEvent) => - state.handleChange(event) - } - onBlur={(event: InteractionEvent) => - state.handleBlur(event) - } - onFocus={(event: InteractionEvent) => - state.handleFocus(event) - } + onInput={(event: ChangeEvent) => state.handleInput(event)} + onClick={(event: ClickEvent) => state.handleClick(event)} + onChange={(event: ChangeEvent) => state.handleChange(event)} + onBlur={(event: InteractionEvent) => state.handleBlur(event)} + onFocus={(event: InteractionEvent) => state.handleFocus(event)} aria-describedby={state._descByIds}> {/* Empty option for floating label */} @@ -255,11 +245,9 @@ export default function DBSelect(props: DBSelectProps) { DEFAULT_INVALID_MESSAGE} - + {/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html + * Currently VoiceOver isn't supporting changes from aria-describedby. + * This is an internal Fallback */} {state._voiceOverFallback} diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx index dc65cb2da3f..bcad6011cb4 100644 --- a/packages/components/src/components/textarea/textarea.lite.tsx +++ b/packages/components/src/components/textarea/textarea.lite.tsx @@ -41,7 +41,7 @@ export default function DBTextarea(props: DBTextareaProps) { rows: '4' }, _voiceOverFallback: '', - handleInput: (event: InputEvent) => { + handleInput: (event: InputEvent) => { if (props.onInput) { props.onInput(event); } @@ -50,7 +50,7 @@ export default function DBTextarea(props: DBTextareaProps) { props.input(event); } }, - handleChange: (event: ChangeEvent) => { + handleChange: (event: ChangeEvent) => { if (props.onChange) { props.onChange(event); } @@ -86,7 +86,7 @@ export default function DBTextarea(props: DBTextareaProps) { state._descByIds = ''; } }, - handleBlur: (event: InteractionEvent) => { + handleBlur: (event: InteractionEvent) => { if (props.onBlur) { props.onBlur(event); } @@ -95,7 +95,7 @@ export default function DBTextarea(props: DBTextareaProps) { props.blur(event); } }, - handleFocus: (event: InteractionEvent) => { + handleFocus: (event: InteractionEvent) => { if (props.onFocus) { props.onFocus(event); } @@ -154,18 +154,10 @@ export default function DBTextarea(props: DBTextareaProps) { wrap={props.wrap} spellcheck={props.spellCheck} autocomplete={props.autocomplete} - onInput={(event: ChangeEvent) => - state.handleInput(event) - } - onChange={(event: ChangeEvent) => - state.handleChange(event) - } - onBlur={(event: InteractionEvent) => - state.handleBlur(event) - } - onFocus={(event: InteractionEvent) => - state.handleFocus(event) - } + onInput={(event: ChangeEvent) => state.handleInput(event)} + onChange={(event: ChangeEvent) => state.handleChange(event)} + onBlur={(event: InteractionEvent) => state.handleBlur(event)} + onFocus={(event: InteractionEvent) => state.handleFocus(event)} value={props.value ?? state._value} aria-describedby={state._descByIds} placeholder={ @@ -200,11 +192,9 @@ export default function DBTextarea(props: DBTextareaProps) { DEFAULT_INVALID_MESSAGE} - + {/* * https://www.davidmacd.com/blog/test-aria-describedby-errormessage-aria-live.html + * Currently VoiceOver isn't supporting changes from aria-describedby. + * This is an internal Fallback */} {state._voiceOverFallback}