From 76be93b51d2a4cb42608038b96dcc325481d7731 Mon Sep 17 00:00:00 2001
From: Sid Mantri <sid.mantri@elastic.co>
Date: Wed, 18 Oct 2023 18:06:10 +0200
Subject: [PATCH] add aria-labels for code editors in API Key Flyout

---
 .../api_keys/api_keys_grid/api_key_flyout.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
index b3792941fc6d..b6287b423589 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
@@ -437,6 +437,12 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                   <FormField
                     as={CodeEditorField}
                     name="access"
+                    aria-label={i18n.translate(
+                      'xpack.security.management.apiKeys.apiKeyFlyout.accessCodeEditor',
+                      {
+                        defaultMessage: 'Code editor for access permissions',
+                      }
+                    )}
                     value={formik.values.access}
                     options={{ readOnly: readOnly || (apiKey && !canEdit) }}
                     onChange={(value: string) => formik.setFieldValue('access', value)}
@@ -500,6 +506,12 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                         <FormField
                           as={CodeEditorField}
                           name="role_descriptors"
+                          aria-label={i18n.translate(
+                            'xpack.security.management.apiKeys.apiKeyFlyout.roleDescriptorsCodeEditor',
+                            {
+                              defaultMessage: 'Code editor for role descriptors of this API key',
+                            }
+                          )}
                           value={formik.values.role_descriptors}
                           options={{ readOnly: readOnly || (apiKey && !canEdit) }}
                           onChange={(value: string) =>
@@ -631,6 +643,13 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                       <FormField
                         as={CodeEditorField}
                         name="metadata"
+                        aria-label={i18n.translate(
+                          'xpack.security.management.apiKeys.apiKeyFlyout.metadataCodeEditor',
+                          {
+                            defaultMessage:
+                              'Code editor for arbitrary metadata associated with the API key',
+                          }
+                        )}
                         options={{ readOnly: readOnly || (apiKey && !canEdit) }}
                         value={formik.values.metadata}
                         onChange={(value: string) => formik.setFieldValue('metadata', value)}