Fixed a11y violations and typos in translations for messages in the d…

…ialog message for disabling clients. (keycloak#26395) * fixed critical violations Signed-off-by: Agnieszka Gancarczyk <[email protected]> * fixed more a11y violations Signed-off-by: Agnieszka Gancarczyk <[email protected]> * renamed translation Signed-off-by: Agnieszka Gancarczyk <[email protected]> * added area-label Signed-off-by: Agnieszka Gancarczyk <[email protected]> * added area-label Signed-off-by: Agnieszka Gancarczyk <[email protected]> * renamed spinners translation Signed-off-by: Agnieszka Gancarczyk <[email protected]> --------- Signed-off-by: Agnieszka Gancarczyk <[email protected]> Co-authored-by: Agnieszka Gancarczyk <[email protected]>
tnorimat · Jan 23, 2024 · 73e5c82 · 73e5c82
1 parent d9f8a1b
commit 73e5c82
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 13 deletions.
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
@@ -893,8 +893,8 @@ eventTypes.FEDERATED_IDENTITY_LINK_ERROR.name=Federated identity link error
 eventTypes.EXECUTE_ACTIONS.name=Execute actions
 encryptAssertions=Encrypt assertions
 disableConfirmTitle=Disable realm?
-disableConfirmTitleClient=Disable client?
-dirableConfirmClient=Are you sure you want to disable this client?
+disableConfirmTitleClientTitle=Disable client?
+disableConfirmClient=Are you sure you want to disable this client?
 custom=Custom Attribute...
 keyTab=Key tab
 addSamlProvider=Add SAML provider
@@ -3043,4 +3043,8 @@ chooseBindingType=Choose binding type
 selectFlowType=Select flow type
 selectClientAssertionSigningAlg=Select client assertion signing algorithm
 resourceDetailsTypeHelp=The type of this resource. It can be used to group different resource instances with the same type.
-searchForClientPolicy=Search for client policy
+searchForClientPolicy=Search for client policy
+selectVendor=Select vendor
+spinnerLoading=Loading
+enableClientSignatureRequiredModal=Enable client signature required
+selectBindType=Select bind type
diff --git a/js/apps/admin-ui/src/authentication/components/DraggableTable.tsx b/js/apps/admin-ui/src/authentication/components/DraggableTable.tsx
@@ -67,7 +67,7 @@ export function DraggableTable<T>({
     const draggedItemId = evt.currentTarget.id;
 
     evt.currentTarget.classList.add(styles.modifiers.ghostRow);
-    evt.currentTarget.setAttribute("aria-pressed", "true");
+    evt.currentTarget.setAttribute("aria-grabbed", "true");
     setState({ ...state, draggedItemId, dragging: true });
   };
 
@@ -101,7 +101,7 @@ export function DraggableTable<T>({
   const onDragCancel = () => {
     Array.from(bodyRef.current?.children || []).forEach((el) => {
       el.classList.remove(styles.modifiers.ghostRow);
-      el.setAttribute("aria-pressed", "false");
+      el.setAttribute("aria-grabbed", "false");
     });
     setState({
       ...state,
@@ -172,7 +172,7 @@ export function DraggableTable<T>({
   const onDragEnd = (evt: ReactDragEvent) => {
     const tr = evt.target as HTMLTableRowElement;
     tr.classList.remove(styles.modifiers.ghostRow);
-    tr.setAttribute("aria-pressed", "false");
+    tr.setAttribute("aria-grabbed", "false");
     setState({
       ...state,
       draggedItemId: "",

diff --git a/js/apps/admin-ui/src/clients/keys/SamlKeysDialog.tsx b/js/apps/admin-ui/src/clients/keys/SamlKeysDialog.tsx
@@ -114,7 +114,7 @@ export const SamlKeysDialog = ({
   return (
     <Modal
       variant={ModalVariant.medium}
-      aria-labelledby={t("enableClientSignatureRequired")}
+      aria-label={t("enableClientSignatureRequiredModal")}
       header={
         <TextContent>
           <Title headingLevel="h1">{t("enableClientSignatureRequired")}</Title>

diff --git a/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx b/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
@@ -33,7 +33,12 @@ export const GeneratedCodeTab = ({
         </CodeBlockAction>
       }
     >
-      <KeycloakTextArea id={`text-area-${label}`} rows={20} value={text} />
+      <KeycloakTextArea
+        id={`text-area-${label}`}
+        rows={20}
+        value={text}
+        aria-label={label}
+      />
     </CodeBlock>
   ) : (
     <EmptyState variant="large" id={label}>

diff --git a/js/apps/admin-ui/src/components/keycloak-spinner/KeycloakSpinner.tsx b/js/apps/admin-ui/src/components/keycloak-spinner/KeycloakSpinner.tsx
@@ -1,7 +1,12 @@
 import { Bullseye, Spinner } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
 
-export const KeycloakSpinner = () => (
-  <Bullseye>
-    <Spinner />
-  </Bullseye>
-);
+export const KeycloakSpinner = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Bullseye>
+      <Spinner aria-label={t("spinnerLoading")} />
+    </Bullseye>
+  );
+};
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx
@@ -282,6 +282,7 @@ export const LdapSettingsConnection = ({
                 selections={field.value}
                 variant={SelectVariant.single}
                 data-testid="ldap-bind-type"
+                aria-label={t("selectBindType")}
               >
                 <SelectOption value="simple" />
                 <SelectOption value="none" />

diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx
@@ -179,6 +179,7 @@ export const LdapSettingsGeneral = ({
                 }}
                 selections={field.value}
                 variant={SelectVariant.single}
+                aria-label={t("selectVendor")}
               >
                 <SelectOption key={0} value="ad" isPlaceholder>
                   Active Directory