More a11y fixes (#26344)

* fixed a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed more a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* a11y fixes

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed more a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

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("editTranslationBtn-0").click();
-      cy.findByTestId("editUserLabelCancelBtn-0").click();
+      cy.findByTestId("editTranslationCancelBtn-0").click();
 
-      cy.findByTestId("editUserLabelBtn-0").click();
+      cy.findByTestId("editTranslationBtn-0").click();
-      cy.findByTestId("editUserLabelInput-0").click().clear().type("def");
+      cy.findByTestId("editTranslationValueInput-0")
-      cy.findByTestId("editUserLabelAcceptBtn-0").click();
+        .click()
+        .clear()
+        .type("def");
+      cy.findByTestId("editTranslationAcceptBtn-0").click();
 
       cy.findByTestId("editable-rows-table")
         .contains("td", "def")

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -2999,3 +2999,46 @@ 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
+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

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>

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,

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>

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

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>

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)}

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);

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}
             >
               {[

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,

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}>

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
         >

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

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

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} />

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

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>

js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx

@@ -83,16 +83,30 @@ export const LdapSettingsSearching = ({
                 }}
                 selections={field.value}
                 variant={SelectVariant.single}
+                aria-label={t("selectEditMode")}
                 validated={
                   (form.formState.errors.config as any)?.editMode?.[0]
                     ? "error"
                     : "default"
                 }
               >
-                <SelectOption value="" isPlaceholder />
+                <SelectOption
-                <SelectOption value="READ_ONLY" />
+                  aria-label={t("emptySelection")}
-                <SelectOption value="WRITABLE" />
+                  value=""
-                <SelectOption value="UNSYNCED" />
+                  isPlaceholder
+                />
+                <SelectOption
+                  aria-label={t("readOnlySelection")}
+                  value="READ_ONLY"
+                />
+                <SelectOption
+                  aria-label={t("writtableSelection")}
+                  value="WRITABLE"
+                />
+                <SelectOption
+                  aria-label={t("unsyncedSelection")}
+                  value="UNSYNCED"
+                />
               </Select>
             )}
           />

js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -307,6 +307,7 @@ export default function LdapMapperDetails() {
                     }}
                     selections={field.value}
                     variant={SelectVariant.typeahead}
+                    aria-label={t("selectMapperType")}
                   >
                     {components.map((c) => (
                       <SelectOption key={c.id} value={c.id} />

js/apps/admin-ui/src/user-federation/shared/SettingsCache.tsx

@@ -102,6 +102,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
               selections={field.value}
               variant={SelectVariant.single}
               data-testid="kerberos-cache-policy"
+              aria-label={t("selectCachePolicy")}
             >
               <SelectOption key={0} value={["DEFAULT"]} isPlaceholder />
               <SelectOption key={1} value={["EVICT_DAILY"]} />
@@ -141,6 +142,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
                 }}
                 selections={field.value}
                 variant={SelectVariant.single}
+                aria-label={t("selectEvictionDay")}
               >
                 <SelectOption key={0} value="1" isPlaceholder>
                   {t("Sunday")}
@@ -197,6 +199,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
                   }}
                   selections={field.value}
                   variant={SelectVariant.single}
+                  aria-label={t("selectEvictionHour")}
                 >
                   {hourOptions}
                 </Select>
@@ -229,6 +232,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
                   }}
                   selections={field.value}
                   variant={SelectVariant.single}
+                  aria-label={t("selectEvictionMinute")}
                 >
                   {minuteOptions}
                 </Select>

js/apps/admin-ui/src/user/user-credentials/InlineLabelEdit.tsx

@@ -68,6 +68,7 @@ export const InlineLabelEdit = ({
                   data-testid="editUserLabelAcceptBtn"
                   variant="link"
                   className="kc-editUserLabelAcceptBtn"
+                  aria-label={t("acceptBtn")}
                   type="submit"
                   icon={<CheckIcon />}
                 />
@@ -75,6 +76,7 @@ export const InlineLabelEdit = ({
                   data-testid="editUserLabelCancelBtn"
                   variant="link"
                   className="kc-editUserLabel-cancelBtn"
+                  aria-label={t("cancelBtn")}
                   onClick={toggle}
                   icon={<TimesIcon />}
                 />