From 7a8fc53911ea91d9389e4b3754a5e8c85d8e6d08 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Mon, 28 Oct 2024 17:07:49 +0200
Subject: [PATCH] fix: [Stateful:Connectors:New connector page]Configuration
 form missing instructions and field names from announcement (#197963)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: #197586

## Description
Forms, requiring user input, should have clear instructions on how to
fill them. Specific fields can have their own help (guidance) text on
how to fill them with examples.
All fields which are present in the form can be programmatically
determined, especially for the users using assistive technology to
understand what fields are present, what input is expected.

## What was changed:
1. `aria-label` values ​​are explicitly set for
`ConnectorConfigurationField` child components. I suspect that due to
the dynamic nature of this component, the standard mechanism does not
work properly.

## Screen:

<img width="1163" alt="image"
src="https://github.com/user-attachments/assets/00e1bd87-30b3-4c8f-a3d7-0c7774028a66">

(cherry picked from commit 0220874130fd9bb900d2d262d6e415f5a9e1bd7c)
---
 .../configuration/connector_configuration_field.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx b/packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx
index a43163caa6091..08b91ffc1842c 100644
--- a/packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx
+++ b/packages/kbn-search-connectors/components/configuration/connector_configuration_field.tsx
@@ -52,7 +52,7 @@ export const ConfigInputField: React.FC<ConfigInputFieldProps> = ({
   isLoading,
   validateAndSetConfigValue,
 }) => {
-  const { isValid, required, placeholder, value } = configEntry;
+  const { isValid, required, placeholder, value, label } = configEntry;
   const [innerValue, setInnerValue] = useState(value);
   return (
     <EuiFieldText
@@ -65,6 +65,7 @@ export const ConfigInputField: React.FC<ConfigInputFieldProps> = ({
         validateAndSetConfigValue(event.target.value);
       }}
       placeholder={placeholder}
+      aria-label={label}
     />
   );
 };
@@ -74,7 +75,7 @@ export const ConfigInputTextArea: React.FC<ConfigInputFieldProps> = ({
   configEntry,
   validateAndSetConfigValue,
 }) => {
-  const { isValid, required, placeholder, value } = configEntry;
+  const { isValid, required, placeholder, value, label } = configEntry;
   const [innerValue, setInnerValue] = useState(value);
   return (
     <EuiTextArea
@@ -88,6 +89,7 @@ export const ConfigInputTextArea: React.FC<ConfigInputFieldProps> = ({
         validateAndSetConfigValue(event.target.value);
       }}
       placeholder={placeholder}
+      aria-label={label}
     />
   );
 };
@@ -129,7 +131,7 @@ export const ConfigInputPassword: React.FC<ConfigInputFieldProps> = ({
   configEntry,
   validateAndSetConfigValue,
 }) => {
-  const { required, value } = configEntry;
+  const { required, value, label } = configEntry;
   const [innerValue, setInnerValue] = useState(value);
   return (
     <EuiFieldPassword
@@ -141,6 +143,7 @@ export const ConfigInputPassword: React.FC<ConfigInputFieldProps> = ({
         setInnerValue(event.target.value);
         validateAndSetConfigValue(event.target.value);
       }}
+      aria-label={label}
     />
   );
 };
@@ -170,6 +173,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
           onChange={(event) => {
             validateAndSetConfigValue(event.target.value);
           }}
+          aria-label={label}
         />
       ) : (
         <EuiRadioGroup
@@ -180,6 +184,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
           onChange={(id) => {
             validateAndSetConfigValue(id);
           }}
+          aria-label={label}
         />
       );
 
@@ -227,6 +232,7 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
                     onChange={(event) => {
                       validateAndSetConfigValue(event.target.checked);
                     }}
+                    aria-label={label}
                   />
                 </EuiFlexItem>
                 {!hasPlatinumLicense && (