More a11y fixes (keycloak#26344)

* fixed a11y violations Signed-off-by: Agnieszka Gancarczyk <[email protected]> * fixed more a11y violations Signed-off-by: Agnieszka Gancarczyk <[email protected]> * a11y fixes Signed-off-by: Agnieszka Gancarczyk <[email protected]> * fixed a11y violations Signed-off-by: Agnieszka Gancarczyk <[email protected]> * fixed more a11y violations Signed-off-by: Agnieszka Gancarczyk <[email protected]> --------- Signed-off-by: Agnieszka Gancarczyk <[email protected]> Co-authored-by: Agnieszka Gancarczyk <[email protected]>
tnorimat · Jan 22, 2024 · 4a49759 · 4a49759
1 parent ffa069a
commit 4a49759
Show file tree

Hide file tree

Showing 22 changed files with 130 additions and 22 deletions.
diff --git a/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts
@@ -243,12 +243,15 @@ describe("Realm settings tabs tests", () => {
 
       addBundle();
 
-      cy.findByTestId("editUserLabelBtn-0").click();
-      cy.findByTestId("editUserLabelCancelBtn-0").click();
+      cy.findByTestId("editTranslationBtn-0").click();
+      cy.findByTestId("editTranslationCancelBtn-0").click();
 
-      cy.findByTestId("editUserLabelBtn-0").click();
-      cy.findByTestId("editUserLabelInput-0").click().clear().type("def");
-      cy.findByTestId("editUserLabelAcceptBtn-0").click();
+      cy.findByTestId("editTranslationBtn-0").click();
+      cy.findByTestId("editTranslationValueInput-0")
+        .click()
+        .clear()
+        .type("def");
+      cy.findByTestId("editTranslationAcceptBtn-0").click();
 
       cy.findByTestId("editable-rows-table")
         .contains("td", "def")

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
@@ -2998,4 +2998,47 @@ itemDeleteError=Could not delete item: {{error}}
 noItems=There are no items
 noItemsInstructions=You haven't created any items in this realm. Create a item to get started.
 itemSaveError=Error could not save item\! {{error}}
-itemSaveSuccessful=Sucessful saved
+itemSaveSuccessful=Sucessful saved
+realmSelector=Realm selector
+editTranslationValue=Edit translation value
+selectAccessTokenSignatureAlgorithm=Select access token signature algorithm
+selectIdTokenSignatureAlgorithm=Select Id token signature algorithm
+selectIdTokenEncryptionKeyManagementAlgorithm=Select Id token encryption key management algorithm
+selectIdTokenEncryptionContentEncryptionAlgorithm=Select Id token encryption content encryption algorithm
+selectUserInfoSignedResponseAlgorithm=Select user info signed response algorithm
+selectUserInfoResponseEncryptionKeyManagementAlgorithm=Select user info response encryption key management algorithm
+selectUserInfoResponseEncryptionContentEncryptionAlgorithm=Select user info response encryption content encryption algorithm
+selectRequestObjectSignatureAlgorithm=Select request object signature algorithm
+selectRequestObjectEncryption=Select request object encryption
+selectRequestObjectEncoding=Select request object encoding
+selectRequestObjectRequired=Select request object required
+selectAuthorizationSignedResponseAlgorithm=Select authorization signed response algorithm
+selectAuthorizationEncryptedResponseAlg=Select authorization encrypted response alg
+selectAuthorizationEncryptedResponseEnc=Select authorization encrypted response enc
+generatedCodeTextArea=Generated code textarea
+selectAuthScopes=Select authorization scopes
+selectResource= Select resource
+selectClients=Select clients
+selectLoginTheme=Select login theme
+selectAccountTheme=Select account theme
+selectAdminTheme=Select admin theme
+selectEmailTheme=Select email theme
+selectFilterType=Select filter type
+selectUnmanagedAttributePolicy=Select unmanaged attribute policy
+selectEventsListeners=Select events listeners
+selectCachePolicy=Select cache policy
+selectEvictionDay=Select eviction day
+selectEvictionHour=Select eviction hour
+selectEvictionMinute=Select eviction minute
+selectEditMode=Select edit mode
+emptySelection=Empty selection
+readOnlySelection=Read only selection
+writtableSelection=Writable selection
+unsyncedSelection=Unsynced selection
+selectMapperType=Select mapper type
+editBtn=Edit button
+acceptBtn=Accept editing button
+cancelBtn=Cancel editing button
+chooseBindingType=Choose binding type
+selectFlowType=Select flow type
+selectClientAssertionSigningAlg=Select client assertion signing algorithm
diff --git a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
@@ -84,6 +84,7 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
             controller={{ defaultValue: flowKeys[0] }}
             variant={SelectVariant.single}
             menuAppendTo="parent"
+            aria-label={t("chooseBindingType")}
           />
         </FormProvider>
       </Form>

diff --git a/js/apps/admin-ui/src/authentication/form/CreateFlow.tsx b/js/apps/admin-ui/src/authentication/form/CreateFlow.tsx
@@ -68,6 +68,7 @@ export default function CreateFlow() {
               name="providerId"
               label={t("flowType")}
               labelIcon={t("topLevelFlowTypeHelp")}
+              aria-label={t("selectFlowType")}
               controller={{ defaultValue: "" }}
               options={TYPES.map((type) => ({
                 key: type,

diff --git a/js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx b/js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx
@@ -187,6 +187,7 @@ export const FineGrainOpenIdConnect = ({
                 setAccessTokenOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectAccessTokenSignatureAlgorithm")}
             >
               {keyOptions}
             </Select>
@@ -220,6 +221,7 @@ export const FineGrainOpenIdConnect = ({
                 setIdTokenOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectIdTokenSignatureAlgorithm")}
             >
               {keyOptions}
             </Select>
@@ -253,6 +255,7 @@ export const FineGrainOpenIdConnect = ({
                 setIdTokenKeyManagementOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectIdTokenEncryptionKeyManagementAlgorithm")}
             >
               {cekManagementOptions}
             </Select>
@@ -286,6 +289,9 @@ export const FineGrainOpenIdConnect = ({
                 setIdTokenContentOpen(false);
               }}
               selections={field.value}
+              aria-label={t(
+                "selectIdTokenEncryptionContentEncryptionAlgorithm",
+              )}
             >
               {contentOptions}
             </Select>
@@ -319,6 +325,7 @@ export const FineGrainOpenIdConnect = ({
                 setUserInfoSignedResponseOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectUserInfoSignedResponseAlgorithm")}
             >
               {signatureOptions}
             </Select>
@@ -352,6 +359,9 @@ export const FineGrainOpenIdConnect = ({
                 setUserInfoResponseEncryptionKeyManagementOpen(false);
               }}
               selections={field.value}
+              aria-label={t(
+                "selectUserInfoResponseEncryptionKeyManagementAlgorithm",
+              )}
             >
               {cekManagementOptions}
             </Select>
@@ -387,6 +397,9 @@ export const FineGrainOpenIdConnect = ({
                 setUserInfoResponseEncryptionContentEncryptionOpen(false);
               }}
               selections={field.value}
+              aria-label={t(
+                "selectUserInfoResponseEncryptionContentEncryptionAlgorithm",
+              )}
             >
               {contentOptions}
             </Select>
@@ -420,6 +433,7 @@ export const FineGrainOpenIdConnect = ({
                 setRequestObjectSignatureOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectRequestObjectSignatureAlgorithm")}
             >
               {requestObjectOptions}
             </Select>
@@ -453,6 +467,7 @@ export const FineGrainOpenIdConnect = ({
                 setRequestObjectEncryptionOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectRequestObjectEncryption")}
             >
               {requestObjectEncryptionOptions}
             </Select>
@@ -486,6 +501,7 @@ export const FineGrainOpenIdConnect = ({
                 setRequestObjectEncodingOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectRequestObjectEncoding")}
             >
               {requestObjectEncodingOptions}
             </Select>
@@ -519,6 +535,7 @@ export const FineGrainOpenIdConnect = ({
                 setRequestObjectRequiredOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectRequestObjectRequired")}
             >
               {requestObjectRequiredOptions}
             </Select>
@@ -569,6 +586,7 @@ export const FineGrainOpenIdConnect = ({
                 setAuthorizationSignedOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectAuthorizationSignedResponseAlg")}
             >
               {authorizationSignedResponseOptions}
             </Select>
@@ -602,6 +620,7 @@ export const FineGrainOpenIdConnect = ({
                 setAuthorizationEncryptedOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectAuthorizationEncryptedResponseAlg")}
             >
               {cekManagementOptions}
             </Select>
@@ -635,6 +654,7 @@ export const FineGrainOpenIdConnect = ({
                 setAuthorizationEncryptedResponseOpen(false);
               }}
               selections={field.value}
+              aria-label={t("selectAuthorizationEncryptedResponseEnc")}
             >
               {contentOptions}
             </Select>

diff --git a/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx b/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx
@@ -381,8 +381,9 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                           }}
                           selections={field.value}
                           variant={SelectVariant.typeaheadMulti}
-                          typeAheadAriaLabel={t("authScopes")}
+                          typeAheadAriaLabel={t("selectAuthScopes")}
                           isOpen={scopesDropdownOpen}
+                          aria-label={t("selectAuthScopes")}
                         >
                           {scopes.map((scope) => (
                             <SelectOption

diff --git a/js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx b/js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
@@ -42,7 +42,7 @@ export const NewPolicyDialog = ({
 
   return (
     <Modal
-      aria-labelledby={t("addPredefinedMappers")}
+      aria-label={t("createPolicy")}
       variant={ModalVariant.medium}
       header={
         <TextContent>

diff --git a/js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx b/js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
@@ -261,7 +261,7 @@ export const ResourcesPolicySelect = ({
               setSearch("");
             }}
             isOpen={open}
-            aria-labelledby={t(name)}
+            aria-label={t(name)}
             isDisabled={!!preSelected}
             validated={errors[name] ? "error" : "default"}
             typeAheadAriaLabel={t(name)}

diff --git a/js/apps/admin-ui/src/clients/authorization/policy/Client.tsx b/js/apps/admin-ui/src/clients/authorization/policy/Client.tsx
@@ -88,6 +88,7 @@ export const Client = () => {
             onToggle={(open) => setOpen(open)}
             isOpen={open}
             selections={field.value}
+            aria-label={t("selectClients")}
             onFilter={(_, value) => {
               setSearch(value);
               return convert(clients);

diff --git a/js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx b/js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx
@@ -107,6 +107,7 @@ export const OIDCAuthentication = ({ create = true }: { create?: boolean }) => {
               }}
               selections={field.value || t("algorithmNotSpecified")}
               variant={SelectVariant.single}
+              aria-label={t("selectClientAssertionSigningAlg")}
               isOpen={openClientAuthSigAlg}
             >
               {[

diff --git a/js/apps/admin-ui/src/realm-settings/EmailTab.tsx b/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
@@ -321,6 +321,7 @@ export const RealmSettingsEmailTab = ({
               {currentUser.email ? (
                 <Alert
                   variant="info"
+                  component="h2"
                   isInline
                   title={t("testConnectionHint.withEmail", {
                     email: currentUser.email,

diff --git a/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx b/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
@@ -269,6 +269,7 @@ export const RealmSettingsGeneralTab = ({
             selections={userProfileConfig?.unmanagedAttributePolicy}
             variant={SelectVariant.single}
             isOpen={isUnmanagedAttributeOpen}
+            aria-label={t("selectUnmanagedAttributePolicy")}
           >
             {unmanagedAttributePolicies.map((policy) => (
               <SelectOption key={policy} value={policy}>

diff --git a/js/apps/admin-ui/src/realm-settings/PartialExport.tsx b/js/apps/admin-ui/src/realm-settings/PartialExport.tsx
@@ -135,6 +135,7 @@ export const PartialExportDialog = ({
         <Alert
           data-testid="warning-message"
           variant="warning"
+          component="p"
           title={t("exportWarningTitle")}
           isInline
         >

diff --git a/js/apps/admin-ui/src/realm-settings/PartialImport.tsx b/js/apps/admin-ui/src/realm-settings/PartialImport.tsx
@@ -338,6 +338,8 @@ export const PartialImportDialog = (props: PartialImportProps) => {
                   <Select
                     toggleId="realm-selector"
                     isOpen={isRealmSelectOpen}
+                    typeAheadAriaLabel={t("realmSelector")}
+                    aria-label={"realmSelector"}
                     onToggle={() => setIsRealmSelectOpen(!isRealmSelectOpen)}
                     onSelect={(_, value) => handleRealmSelect(value)}
                     placeholderText={targetRealm.realm || targetRealm.id}
@@ -466,7 +468,12 @@ export const PartialImportDialog = (props: PartialImportProps) => {
           </Button>,
         ]}
       >
-        <Alert variant="success" isInline title={importCompleteMessage()} />
+        <Alert
+          variant="success"
+          component="p"
+          isInline
+          title={importCompleteMessage()}
+        />
         <KeycloakDataTable
           loader={loader}
           isPaginated

diff --git a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
@@ -76,6 +76,7 @@ export const RealmSettingsThemesTab = ({
                 isOpen={loginThemeOpen}
                 placeholderText={t("selectATheme")}
                 data-testid="select-login-theme"
+                aria-label={t("selectLoginTheme")}
               >
                 {themeTypes.login.map((theme, idx) => (
                   <SelectOption
@@ -114,7 +115,7 @@ export const RealmSettingsThemesTab = ({
                 }}
                 selections={field.value}
                 variant={SelectVariant.single}
-                aria-label={t("accountTheme")}
+                aria-label={t("selectAccountTheme")}
                 isOpen={accountThemeOpen}
                 placeholderText={t("selectATheme")}
                 data-testid="select-account-theme"
@@ -161,6 +162,7 @@ export const RealmSettingsThemesTab = ({
                 isOpen={adminUIThemeOpen}
                 placeholderText={t("selectATheme")}
                 data-testid="select-admin-theme"
+                aria-label="selectAdminTheme"
               >
                 {themeTypes.admin
                   .filter((theme) => theme.name !== "base")
@@ -204,6 +206,7 @@ export const RealmSettingsThemesTab = ({
                 isOpen={emailThemeOpen}
                 placeholderText={t("selectATheme")}
                 data-testid="select-email-theme"
+                aria-label={t("selectEmailTheme")}
               >
                 {themeTypes.email.map((theme, idx) => (
                   <SelectOption

diff --git a/js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx b/js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx
@@ -75,7 +75,7 @@ export const EventListenersForm = ({
                 field.onChange([]);
               }}
               isOpen={selectEventListenerOpen}
-              aria-labelledby={"eventsListeners"}
+              aria-label={"selectEventsListeners"}
             >
               {Object.keys(eventListeners!).map((event) => (
                 <SelectOption key={event} value={event} />

diff --git a/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx b/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
@@ -67,6 +67,7 @@ const SelectFilter = ({ onFilter }: SelectFilterProps) => {
         toggleFilter();
       }}
       selections={filterType}
+      aria-label={t("selectFilterType")}
     >
       {FILTER_OPTIONS.map((option) => (
         <SelectOption

diff --git a/js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx b/js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx
@@ -491,10 +491,10 @@ export const RealmOverrides = ({
                         {editStates[rowIndex] ? (
                           <>
                             <KeycloakTextInput
-                              aria-label={t("editUserLabel")}
+                              aria-label={t("editTranslationValue")}
                               type="text"
                               className="pf-u-w-initial"
-                              data-testid={`editUserLabelInput-${rowIndex}`}
+                              data-testid={`editTranslationValueInput-${rowIndex}`}
                               value={formValue}
                               onChange={(
                                 event: ChangeEvent<HTMLInputElement>,
@@ -506,15 +506,17 @@ export const RealmOverrides = ({
                             <Button
                               variant="link"
                               className="pf-m-plain"
-                              data-testid={`editUserLabelAcceptBtn-${rowIndex}`}
+                              data-testid={`editTranslationAcceptBtn-${rowIndex}`}
                               type="submit"
+                              aria-label={t("acceptBtn")}
                               icon={<CheckIcon />}
                             />
                             <Button
                               variant="link"
                               className="pf-m-plain"
-                              data-testid={`editUserLabelCancelBtn-${rowIndex}`}
+                              data-testid={`editTranslationCancelBtn-${rowIndex}`}
                               icon={<TimesIcon />}
+                              aria-label={t("cancelBtn")}
                               onClick={() => {
                                 setEditStates((prevEditStates) => ({
                                   ...prevEditStates,
@@ -540,10 +542,10 @@ export const RealmOverrides = ({
                                 }));
                               }}
                               key={`edit-button-${rowIndex}`}
-                              aria-label={t("editUserLabel")}
+                              aria-label={t("editBtn")}
                               variant="link"
                               className="pf-m-plain"
-                              data-testid={`editUserLabelBtn-${rowIndex}`}
+                              data-testid={`editTranslationBtn-${rowIndex}`}
                             >
                               <PencilAltIcon />
                             </Button>