added aria-labels (#2861)

fixes: #2846

src/authentication/RequiredActions.tsx

@@ -8,6 +8,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { DraggableTable } from "./components/DraggableTable";
 import { useAlerts } from "../components/alert/Alerts";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
+import { toKey } from "../util";
 
 type DataType = RequiredActionProviderRepresentation &
   RequiredActionProviderSimpleRepresentation;
@@ -137,7 +138,7 @@ export const RequiredActions = () => {
           displayKey: "common:enabled",
           cellRenderer: (row) => (
             <Switch
-              id={`enable-${row.name}`}
+              id={`enable-${toKey(row.name)}`}
               label={t("common:on")}
               labelOff={t("common:off")}
               isChecked={row.enabled}
@@ -152,7 +153,7 @@ export const RequiredActions = () => {
           displayKey: "authentication:setAsDefaultAction",
           cellRenderer: (row) => (
             <Switch
-              id={`default-${row.name}`}
+              id={`default-${toKey(row.name)}`}
               label={t("common:on")}
               isDisabled={!row.enabled}
               labelOff={!row.enabled ? t("disabledOff") : t("common:off")}

src/authentication/components/AddFlowDropdown.tsx

@@ -53,7 +53,7 @@ export const AddFlowDropdown = ({
           data-testid={`${execution.displayName}-edit-dropdown`}
           isOpen={open}
           toggle={
-            <DropdownToggle onToggle={setOpen}>
+            <DropdownToggle onToggle={setOpen} aria-label={t("common:add")}>
               <PlusIcon />
             </DropdownToggle>
           }

src/authentication/components/FlowHeader.tsx

@@ -15,7 +15,10 @@ export const FlowHeader = () => {
   return (
     <DataListItem aria-labelledby="headerName" id="header">
       <DataListItemRow>
-        <DataListDragButton className="keycloak__authentication__header-drag-button" />
+        <DataListDragButton
+          className="keycloak__authentication__header-drag-button"
+          aria-label={t("common:disabled")}
+        />
         <DataListItemCells
           className="keycloak__authentication__header"
           dataListCells={[

src/authentication/components/FlowRow.tsx

@@ -60,11 +60,13 @@ export const FlowRow = ({
       >
         <DataListItemRow
           className="keycloak__authentication__flow-row"
-          aria-level={execution.level}
+          aria-level={execution.level! + 1}
+          role="heading"
+          aria-labelledby={execution.id}
         >
           <DataListControl>
             <DataListDragButton
-              aria-labelledby={execution.displayName}
+              aria-labelledby={execution.id}
               aria-describedby={t("common-help:dragHelp")}
             />
           </DataListControl>
@@ -81,6 +83,7 @@ export const FlowRow = ({
               <DataListCell key={`${execution.id}-name`}>
                 {!execution.authenticationFlow && (
                   <FlowTitle
+                    id={execution.id}
                     key={execution.id}
                     title={execution.displayName!}
                   />

src/authentication/components/FlowTitle.tsx

@@ -4,17 +4,18 @@ import { Card, CardBody } from "@patternfly/react-core";
 import "./flow-title.css";
 
 type FlowTitleProps = {
+  id?: string;
   title: string;
 };
 
-export const FlowTitle = ({ title }: FlowTitleProps) => {
+export const FlowTitle = ({ id, title }: FlowTitleProps) => {
   return (
     <Card
       data-testid={title}
       className="keycloak__authentication__title"
       isFlat
     >
-      <CardBody>{title}</CardBody>
+      <CardBody id={id}>{title}</CardBody>
     </Card>
   );
 };

src/authentication/policies/Policies.tsx

@@ -40,6 +40,7 @@ export const Policies = () => {
       activeKey={subTab}
       onSelect={(_, key) => setSubTab(key as number)}
       mountOnEnter
+      unmountOnExit
     >
       <Tab
         id="passwordPolicy"

src/authentication/policies/PolicyRow.tsx

@@ -106,6 +106,7 @@ export const PolicyRow = ({
             variant="link"
             className="keycloak__policies_authentication__minus-icon"
             onClick={() => onRemove(id)}
+            aria-label={t("common:remove")}
           >
             <MinusCircleIcon />
           </Button>

src/authentication/policies/WebauthnPolicy.tsx

@@ -126,6 +126,7 @@ const WebauthnSelect = ({
                 : SelectVariant.single
             }
             aria-label={t(name)}
+            typeAheadAriaLabel={t(name)}
             isOpen={open}
           >
             {options.map((option) => (

src/util.ts

@@ -40,6 +40,8 @@ const sortProvider = (
   }
 };
 
+export const toKey = (value: string) => value.replace(/\s/g, "-");
+
 export const exportClient = (client: ClientRepresentation): void => {
   const clientCopy = cloneDeep(client);
   delete clientCopy.id;