From 71bbbacd594885553ae10fc964ad1be9e0f63cf2 Mon Sep 17 00:00:00 2001
From: Sid <siddharthmantri1@gmail.com>
Date: Mon, 23 Oct 2023 11:51:43 +0200
Subject: [PATCH] Add screen reader attributes for API key flyout code editors
 (#169265)

## Summary

Closes #169127


## Fixes

- Added aria-labels for Access control, Role Descriptors and Metadata
code editors
---
 .../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)}