From 32e5360afc823d1762865e28c95e1c9218ea71cc Mon Sep 17 00:00:00 2001
From: elena-shostak <165678770+elena-shostak@users.noreply.github.com>
Date: Fri, 21 Jun 2024 09:45:38 +0200
Subject: [PATCH] a11y fixes for user profile input labels (#186471)

## Summary

a11y fixes for user profile input labels.
Screen readers announce "Change username, optional" or "Change email
address, optional" when inputs receive focus.


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

__Fixes: https://github.com/elastic/kibana/issues/151934__

### Release note
a11y fixes for user profile input labels.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../user_profile/user_profile.tsx             | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx b/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
index c9ae85dcda634..af3b22901d12e 100644
--- a/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
+++ b/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
@@ -29,6 +29,7 @@ import {
   useEuiTheme,
   useGeneratedHtmlId,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { Form, FormikProvider, useFormik, useFormikContext } from 'formik';
 import type { FunctionComponent } from 'react';
 import React, { useRef, useState } from 'react';
@@ -64,6 +65,12 @@ import { FormRow, OptionalText } from '../../components/form_row';
 import { ChangePasswordModal } from '../../management/users/edit_user/change_password_modal';
 import { isUserReserved } from '../../management/users/user_utils';
 
+const formRowCSS = css`
+  .euiFormRow__label {
+    flex: 1;
+  }
+`;
+
 export interface UserProfileProps {
   user: AuthenticatedUser;
   data?: UserProfileData;
@@ -128,30 +135,36 @@ const UserDetailsEditor: FunctionComponent<UserDetailsEditorProps> = ({ user })
       }
     >
       <FormRow
+        css={formRowCSS}
         label={
           <FormLabel for="user.full_name">
-            <FormattedMessage
-              id="xpack.security.accountManagement.userProfile.fullNameLabel"
-              defaultMessage="Full name"
-            />
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <FormattedMessage
+                id="xpack.security.accountManagement.userProfile.fullNameLabel"
+                defaultMessage="Full name"
+              />
+              <OptionalText />
+            </EuiFlexGroup>
           </FormLabel>
         }
-        labelAppend={<OptionalText />}
         fullWidth
       >
         <FormField name="user.full_name" data-test-subj={'userProfileFullName'} fullWidth />
       </FormRow>
 
       <FormRow
+        css={formRowCSS}
         label={
           <FormLabel for="user.email">
-            <FormattedMessage
-              id="xpack.security.accountManagement.userProfile.emailLabel"
-              defaultMessage="Email address"
-            />
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <FormattedMessage
+                id="xpack.security.accountManagement.userProfile.emailLabel"
+                defaultMessage="Email address"
+              />
+              <OptionalText />
+            </EuiFlexGroup>
           </FormLabel>
         }
-        labelAppend={<OptionalText />}
         fullWidth
       >
         <FormField type="email" name="user.email" data-test-subj={'userProfileEmail'} fullWidth />