From c6c936ab7a47948e50843f1b5a7f589eacab0c15 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 8 Jan 2025 19:57:41 +0300
Subject: [PATCH] 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)
---
 .../static/forms/components/fields/toggle_field.tsx          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/platform/plugins/shared/es_ui_shared/static/forms/components/fields/toggle_field.tsx b/src/platform/plugins/shared/es_ui_shared/static/forms/components/fields/toggle_field.tsx
index e8e89cdb1c261..abd7fb8f797f0 100644
--- a/src/platform/plugins/shared/es_ui_shared/static/forms/components/fields/toggle_field.tsx
+++ b/src/platform/plugins/shared/es_ui_shared/static/forms/components/fields/toggle_field.tsx
@@ -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>