Critical accessibility fixes for Users page (#2865)

public/resources/en/users.json

@@ -163,5 +163,6 @@
   "credentialResetConfirm": "Send Email",
   "credentialResetConfirmText": "Are you sure you want to send email to user",
   "credentialResetEmailSuccess": "Email sent to user.",
-  "credentialResetEmailError": "Failed: {{error}}"
+  "credentialResetEmailError": "Failed: {{error}}",
+  "editUserLabel": "Edit User Label Button"
 }

src/clients/authorization/ResourcesPolicySelect.tsx

@@ -143,6 +143,7 @@ export const ResourcesPolicySelect = ({
           aria-labelledby={t(name)}
           isDisabled={!!preSelected}
           validated={errors[name] ? "error" : "default"}
+          typeAheadAriaLabel={t(name)}
         >
           {toSelectOptions()}
         </Select>

src/clients/authorization/ScopeSelect.tsx

@@ -95,6 +95,7 @@ export const ScopeSelect = ({
           aria-labelledby={t("scopes")}
           validated={errors.scopes ? "error" : "default"}
           isDisabled={!!preSelected}
+          typeAheadAriaLabel={t("scopes")}
         >
           {toSelectOptions(scopes)}
         </Select>

src/components/group/GroupPickerDialog.tsx

@@ -239,6 +239,7 @@ export const GroupPickerDialog = ({
                   <DataListCheck
                     className="kc-join-group-modal-check"
                     data-testid={`${group.name}-check`}
+                    aria-label={group.name}
                     checked={group.checked}
                     isDisabled={isRowDisabled(group)}
                     onChange={(checked) => {

src/user/UserForm.tsx

@@ -167,6 +167,7 @@ export const UserForm = ({
           <FormGroup label={t("common:id")} fieldId="kc-id" isRequired>
             <KeycloakTextInput
               id={user.id}
+              aria-label={t("userID")}
               value={user.id}
               type="text"
               isReadOnly
@@ -179,6 +180,7 @@ export const UserForm = ({
               )}
               type="text"
               id="kc-created-at"
+              aria-label={t("createdAt")}
               name="createdTimestamp"
               isReadOnly
             />
@@ -197,6 +199,7 @@ export const UserForm = ({
             ref={register()}
             type="text"
             id="kc-username"
+            aria-label={t("username")}
             name="username"
             isReadOnly={!!user?.id && !realm?.editUsernameAllowed}
           />
@@ -258,6 +261,7 @@ export const UserForm = ({
           data-testid="firstName-input"
           type="text"
           id="kc-firstname"
+          aria-label={t("firstName")}
           name="firstName"
         />
       </FormGroup>

src/user/user-credentials/CredentialsResetActionMultiSelect.tsx

@@ -53,7 +53,7 @@ export const CredentialsResetActionMultiSelect = () => {
               event.stopPropagation();
               onChange([]);
             }}
-            aria-label={t("resetActions")}
+            typeAheadAriaLabel={t("resetActions")}
           >
             {Object.values(RequiredActionAlias).map((action, index) => (
               <SelectOption

src/user/user-credentials/InlineLabelEdit.tsx

@@ -88,6 +88,7 @@ export const InlineLabelEdit = ({
             <>
               {credential.userLabel}
               <Button
+                aria-label={t("editUserLabel")}
                 variant="link"
                 className="kc-editUserLabel-btn"
                 onClick={toggle}