Skip to content

Commit

Permalink
fix: [Security:Cases] Sync alert status with case status toggle butto…
Browse files Browse the repository at this point in the history
…n under case settings on create case page is incorrectly announced (elastic#205604)

Closes: elastic#205544

## Description
When user tabs over sync alert status with case status toggle button
under case settings on create case page, screenreader announces On, On
switch without giving any context.

## Preconditions
Security solution -> on cases page -> create case

## Changes made: 
1. added context for **EuiSwitch** by passing `aria-labelledby`
attribute

## Screen


![image](https://github.com/user-attachments/assets/94fb0413-d0c6-4a1c-9071-a6458e2cd379)
  • Loading branch information
alexwizp authored and viduni94 committed Jan 23, 2025
1 parent 8d43d05 commit c6c936a
Showing 1 changed file with 4 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import React from 'react';
import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
import { EuiFormRow, EuiSwitch, EuiSwitchEvent, useGeneratedHtmlId } from '@elastic/eui';

import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';

Expand All @@ -21,6 +21,7 @@ interface Props {

export const ToggleField = ({ field, euiFieldProps = {}, idAria, ...rest }: Props) => {
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
const formId = useGeneratedHtmlId();

// Shim for sufficient overlap between EuiSwitchEvent and FieldHook[onChange] event
const onChange = (e: EuiSwitchEvent) => {
Expand All @@ -32,6 +33,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, idAria, ...rest }: Prop

return (
<EuiFormRow
id={formId}
helpText={field.helpText}
error={errorMessage}
isInvalid={isInvalid}
Expand All @@ -44,6 +46,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, idAria, ...rest }: Prop
checked={field.value as boolean}
onChange={onChange}
data-test-subj="input"
aria-labelledby={formId}
{...euiFieldProps}
/>
</EuiFormRow>
Expand Down

0 comments on commit c6c936a

Please sign in to comment.