Add labels and ids to various elements (#4527)

apps/admin-ui/src/clients/authorization/KeyBasedAttributeInput.tsx

@@ -108,7 +108,7 @@ const ValueInput = ({
           control={control}
           render={({ field }) => (
             <Select
-              id={`${attribute.id}-value`}
+              toggleId={`${attribute.id}-value`}
               className="kc-attribute-value-selectable"
               name={`${name}[${rowIndex}].value`}
               chipGroupProps={{
@@ -116,7 +116,6 @@ const ValueInput = ({
                 expandedText: t("common:hide"),
                 collapsedText: t("common:showRemaining"),
               }}
-              toggleId={`group-${name}`}
               onToggle={(open) => toggleValueSelect(rowIndex, open)}
               isOpen={isValueOpenArray[rowIndex]}
               variant={SelectVariant.typeahead}
@@ -139,6 +138,7 @@ const ValueInput = ({
           className="value-input"
           defaultValue={attribute.value}
           data-testid="attribute-value-input"
+          aria-label={t("common:value")}
           {...register(`${name}.${rowIndex}.value`)}
         />
       )}
@@ -181,12 +181,8 @@ export const KeyBasedAttributeInput = ({
     >
       <Thead>
         <Tr>
-          <Th id="key" width={40}>
-            {t("key")}
-          </Th>
-          <Th id="value" width={40}>
-            {t("value")}
-          </Th>
+          <Th width={40}>{t("key")}</Th>
+          <Th width={40}>{t("value")}</Th>
         </Tr>
       </Thead>
       <Tbody>
@@ -199,10 +195,9 @@ export const KeyBasedAttributeInput = ({
                 control={control}
                 render={({ field }) => (
                   <Select
-                    id={`${name}[${rowIndex}].key`}
+                    toggleId={`${name}[${rowIndex}].key`}
                     className="kc-attribute-key-selectable"
                     name={`${name}[${rowIndex}].key`}
-                    toggleId={`group-${name}`}
                     onToggle={(open) => toggleKeySelect(rowIndex, open)}
                     isOpen={isKeyOpenArray[rowIndex]}
                     variant={SelectVariant.typeahead}
@@ -235,12 +230,13 @@ export const KeyBasedAttributeInput = ({
               selectableValues={selectableValues}
               resources={resources}
             />
-            <Td key="minus-button" id={`kc-minus-button-${rowIndex}`}>
+            <Td>
               <Button
-                id={`minus-button-${rowIndex}`}
+                id={`${name}-minus-button-${rowIndex}`}
                 variant="link"
                 className="kc-attributes__minus-icon"
                 onClick={() => remove(rowIndex)}
+                aria-label={t("common:remove")}
               >
                 <MinusCircleIcon />
               </Button>
@@ -251,7 +247,7 @@ export const KeyBasedAttributeInput = ({
           <Td>
             <Button
               aria-label={t("addAttribute")}
-              id="plus-icon"
+              id={`${name}-plus-icon`}
               variant="link"
               className="kc-attributes__plus-icon"
               onClick={() => {

apps/admin-ui/src/clients/authorization/ScopePicker.tsx

@@ -97,7 +97,7 @@ export const ScopePicker = ({ clientId }: { clientId: string }) => {
               setSearch("");
               field.onChange([]);
             }}
-            aria-label={t("authorizationScopes")}
+            typeAheadAriaLabel={t("authorizationScopes")}
           >
             {renderScopes(scopes)}
           </Select>

apps/admin-ui/src/clients/keys/Certificate.tsx

@@ -14,15 +14,19 @@ type CertificateDisplayProps = {
   keyInfo?: CertificateRepresentation;
 };
 
-const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => (
-  <KeycloakTextArea
-    readOnly
-    rows={5}
-    id={id}
-    data-testid="certificate"
-    value={keyInfo?.certificate}
-  />
-);
+const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => {
+  const { t } = useTranslation("clients");
+  return (
+    <KeycloakTextArea
+      readOnly
+      rows={5}
+      id={id}
+      data-testid="certificate"
+      value={keyInfo?.certificate}
+      aria-label={t("certificate")}
+    />
+  );
+};
 
 export const Certificate = ({ keyInfo, plain = false }: CertificateProps) => {
   const { t } = useTranslation("clients");

apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx

@@ -36,7 +36,7 @@ export const GeneratedCodeTab = ({
       <KeycloakTextArea id={`text-area-${label}`} rows={20} value={text} />
     </CodeBlock>
   ) : (
-    <EmptyState variant="large">
+    <EmptyState variant="large" id={label}>
       <Title headingLevel="h4" size="lg">
         {t(`${label}No`)}
       </Title>

apps/admin-ui/src/components/client/ClientSelect.tsx

@@ -99,7 +99,7 @@ export const ClientSelect = ({
               field.onChange(value.toString());
               setOpen(false);
             }}
-            aria-label={t(label!)}
+            typeAheadAriaLabel={t(label!)}
           >
             {convert(clients)}
           </Select>

apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx

@@ -32,6 +32,7 @@ export const MultiLineInput = ({
   isDisabled = false,
   defaultValue,
   stringify = false,
+  id,
   ...rest
 }: MultiLineInputProps) => {
   const { t } = useTranslation();
@@ -77,7 +78,7 @@ export const MultiLineInput = ({
   }, [register]);
 
   return (
-    <>
+    <div id={id}>
       {fields.map((value, index) => (
         <Fragment key={index}>
           <InputGroup>
@@ -114,6 +115,6 @@ export const MultiLineInput = ({
           )}
         </Fragment>
       ))}
-    </>
+    </div>
   );
 };