fix: [Security:Cases] Sync alert status with case status toggle button under case settings on create case page is incorrectly announced (#205604)

Closes: #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)
This commit is contained in:
Alexey Antonov 2025-01-08 19:57:41 +03:00 committed by GitHub
parent c8cd3191da
commit efe44b2f2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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';
@ -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) => {
@ -32,6 +33,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, idAria, ...rest }: Prop
return (
<EuiFormRow
id={formId}
helpText={field.helpText}
error={errorMessage}
isInvalid={isInvalid}
@ -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>