added acessibility fixes

src/client-scopes/details/ScopeForm.tsx

@@ -70,7 +70,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
             id="name-help-icon"
             helpText="client-scopes-help:name"
             forLabel={t("common:name")}
-            forID="kc-name"
+            forID={t(`common:helpLabel`, { label: t("common:name") })}
           />
         }
         fieldId="kc-name"
@@ -96,7 +96,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           <HelpItem
             helpText="client-scopes-help:description"
             forLabel={t("common:description")}
-            forID="kc-description"
+            forID={t(`common:helpLabel`, { label: t("common:description") })}
           />
         }
         fieldId="kc-description"
@@ -125,7 +125,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           <HelpItem
             helpText="client-scopes-help:type"
             forLabel={t("type")}
-            forID="type"
+            forID={t(`common:helpLabel`, { label: t("type") })}
           />
         }
         fieldId="type"
@@ -158,7 +158,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
             <HelpItem
               helpText="client-scopes-help:protocol"
               forLabel="protocol"
-              forID="kc-protocol"
+              forID={t(`common:helpLabel`, { label: t("protocol") })}
             />
           }
           fieldId="kc-protocol"
@@ -200,7 +200,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           <HelpItem
             helpText="client-scopes-help:displayOnConsentScreen"
             forLabel={t("displayOnConsentScreen")}
-            forID="kc-display.on.consent.screen"
+            forID={t(`common:helpLabel`, { label: t("displayOnConsentScreen") })}
           />
         }
         fieldId="kc-display.on.consent.screen"
@@ -211,7 +211,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           defaultValue="true"
           render={({ onChange, value }) => (
             <Switch
-              id="kc-display.on.consent.screen"
+              id="kc-display.on.consent.screen-switch"
               label={t("common:on")}
               labelOff={t("common:off")}
               isChecked={value === "true"}
@@ -227,7 +227,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
             <HelpItem
               helpText="client-scopes-help:consentScreenText"
               forLabel={t("consentScreenText")}
-              forID="kc-consent-screen-text"
+              forID={t(`common:helpLabel`, { label: t("consentScreenText") })}
             />
           }
           fieldId="kc-consent-screen-text"
@@ -247,7 +247,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           <HelpItem
             helpText="client-scopes-help:includeInTokenScope"
             forLabel={t("includeInTokenScope")}
-            forID="includeInTokenScope"
+            forID={t(`common:helpLabel`, { label: t("includeInTokenScope") })}
           />
         }
         fieldId="includeInTokenScope"
@@ -258,7 +258,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           defaultValue="true"
           render={({ onChange, value }) => (
             <Switch
-              id="includeInTokenScope"
+              id="includeInTokenScope-switch"
               label={t("common:on")}
               labelOff={t("common:off")}
               isChecked={value === "true"}
@@ -273,7 +273,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           <HelpItem
             helpText="client-scopes-help:guiOrder"
             forLabel={t("guiOrder")}
-            forID="kc-gui-order"
+            forID={t(`common:helpLabel`, { label: t("guiOrder") })}
           />
         }
         fieldId="kc-gui-order"

src/clients/AdvancedTab.tsx

@@ -198,7 +198,7 @@ export const AdvancedTab = ({
                 <HelpItem
                   helpText="clients-help:notBefore"
                   forLabel={t("notBefore")}
-                  forID="kc-not-before"
+                  forID={t(`common:helpLabel`, { label: t("notBefore") })}
                 />
               }
             >
@@ -244,7 +244,7 @@ export const AdvancedTab = ({
                 <HelpItem
                   helpText="clients-help:nodeReRegistrationTimeout"
                   forLabel={t("nodeReRegistrationTimeout")}
-                  forID="nodeReRegistrationTimeout"
+                  forID={t(`common:helpLabel`, { label: t("nodeReRegistrationTimeout") })}
                 />
               }
             >

src/clients/advanced/AdvancedSettings.tsx

@@ -40,7 +40,7 @@ export const AdvancedSettings = ({
             <HelpItem
               helpText="clients-help:assertionLifespan"
               forLabel={t("assertionLifespan")}
-              forID="assertionLifespan"
+              forID={t(`common:helpLabel`, { label: t("assertionLifespan") })}
             />
           }
         >
@@ -67,7 +67,7 @@ export const AdvancedSettings = ({
               <HelpItem
                 helpText="clients-help:accessTokenLifespan"
                 forLabel={t("accessTokenLifespan")}
-                forID="accessTokenLifespan"
+                forID={t(`common:helpLabel`, { label: t("accessTokenLifespan") })}
               />
             }
           >
@@ -93,7 +93,7 @@ export const AdvancedSettings = ({
               <HelpItem
                 helpText="clients-help:oAuthMutual"
                 forLabel={t("oAuthMutual")}
-                forID="oAuthMutual"
+                forID={t(`common:helpLabel`, { label: t("oAuthMutual") })}
               />
             }
           >
@@ -103,7 +103,7 @@ export const AdvancedSettings = ({
               control={control}
               render={({ onChange, value }) => (
                 <Switch
-                  id="oAuthMutual"
+                  id="oAuthMutual-switch"
                   label={t("common:on")}
                   labelOff={t("common:off")}
                   isChecked={value === "true"}
@@ -120,7 +120,7 @@ export const AdvancedSettings = ({
               <HelpItem
                 helpText="clients-help:keyForCodeExchange"
                 forLabel={t("keyForCodeExchange")}
-                forID="keyForCodeExchange"
+                forID={t(`common:helpLabel`, { label: t("keyForCodeExchange") })}
               />
             }
           >

src/clients/advanced/AuthenticationOverrides.tsx

@@ -64,7 +64,7 @@ export const AuthenticationOverrides = ({
           <HelpItem
             helpText="clients-help:browserFlow"
             forLabel={t("browserFlow")}
-            forID="browserFlow"
+            forID={t(`common:helpLabel`, { label: t("browserFlow") })}
           />
         }
       >
@@ -97,7 +97,7 @@ export const AuthenticationOverrides = ({
             <HelpItem
               helpText="clients-help:directGrant"
               forLabel={t("directGrant")}
-              forID="directGrant"
+              forID={t(`common:helpLabel`, { label: t("directGrant") })}
             />
           }
         >

src/clients/advanced/OpenIdConnectCompatibilityModes.tsx

@@ -27,7 +27,7 @@ export const OpenIdConnectCompatibilityModes = ({
           <HelpItem
             helpText="clients-help:excludeSessionStateFromAuthenticationResponse"
             forLabel={t("excludeSessionStateFromAuthenticationResponse")}
-            forID="excludeSessionStateFromAuthenticationResponse"
+            forID={t(`common:helpLabel`, { label: t("excludeSessionStateFromAuthenticationResponse") })}
           />
         }
       >
@@ -37,7 +37,7 @@ export const OpenIdConnectCompatibilityModes = ({
           control={control}
           render={({ onChange, value }) => (
             <Switch
-              id="excludeSessionStateFromAuthenticationResponse"
+              id="excludeSessionStateFromAuthenticationResponse-switch"
               label={t("common:on")}
               labelOff={t("common:off")}
               isChecked={value === "true"}

src/clients/keys/Keys.tsx

@@ -143,7 +143,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
                 <HelpItem
                   helpText="clients-help:useJwksUrl"
                   forLabel={t("useJwksUrl")}
-                  forID="useJwksUrl"
+                  forID={t(`common:helpLabel`, { label: t("useJwksUrl") })}
                 />
               }
             >
@@ -154,7 +154,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
                 render={({ onChange, value }) => (
                   <Switch
                     data-testid="useJwksUrl"
-                    id="useJwksUrl"
+                    id="useJwksUrl-switch"
                     label={t("common:on")}
                     labelOff={t("common:off")}
                     isChecked={value === "true"}

src/components/scroll-form/FormPanel.tsx

@@ -27,7 +27,7 @@ export const FormPanel = ({
       <CardHeader className="kc-form-panel__header">
         <CardTitle tabIndex={0}>
           <Title
-            headingLevel="h4"
+            headingLevel="h1"
             size="xl"
             className="kc-form-panel__title"
             id={scrollId}

src/components/time-selector/TimeSelector.tsx

@@ -81,6 +81,7 @@ export const TimeSelector = ({
           {...rest}
           type="number"
           id={`kc-time-${new Date().getTime()}`}
+          aria-label="kc-time"
           min="0"
           value={timeValue}
           onChange={(value) => {

src/groups/GroupsModal.tsx

@@ -99,6 +99,7 @@ export const GroupsModal = ({
         >
           <TextInput
             data-testid="groupNameInput"
+            aria-label="group name input"
             ref={register({ required: true })}
             autoFocus
             type="text"

src/identity-providers/icons/FontAwesomeIcon.tsx

@@ -11,13 +11,13 @@ export const FontAwesomeIcon = ({ icon }: FontAwesomeIconProps) => {
   const styles = { style: { height: "2em", width: "2em" } };
   switch (icon) {
     case "bitbucket":
-      return <img src={bitbucketIcon} {...styles} />;
+      return <img src={bitbucketIcon} {...styles} aria-label="bitbucket icon"/>;
     case "microsoft":
-      return <img src={microsoftIcon} {...styles} />;
+      return <img src={microsoftIcon} {...styles} aria-label="microsoft icon"/>;
     case "instagram":
-      return <img src={instagramIcon} {...styles} />;
+      return <img src={instagramIcon} {...styles} aria-label="instagram icon"/>;
     case "paypal":
-      return <img src={paypalIcon} {...styles} />;
+      return <img src={paypalIcon} {...styles} aria-label="paypal icon"/>;
     default:
       return <></>;
   }

src/realm-roles/RealmRoleForm.tsx

@@ -59,6 +59,7 @@ export const RealmRoleForm = ({
       >
         <TextArea
           name="description"
+          aria-label="description"
           isDisabled={getValues().name?.includes("default-roles")}
           ref={register({
             maxLength: {

src/realm-settings/EmailTab.tsx

@@ -180,7 +180,7 @@ export const RealmSettingsEmailTab = ({
                 <HelpItem
                   helpText="realm-settings-help:fromDisplayName"
                   forLabel={t("authentication")}
-                  forID="kc-user-manged-access"
+                  forID={t(`common:helpLabel`, { label: t("authentication") })}
                 />
               }
             >
@@ -217,7 +217,7 @@ export const RealmSettingsEmailTab = ({
                 <HelpItem
                   helpText="realm-settings-help:replyToDisplayName"
                   forLabel={t("replyToDisplayName")}
-                  forID="kc-user-manged-access"
+                  forID={t(`common:helpLabel`, { label: t("replyToDisplayName") })}
                 />
               }
             >
@@ -236,7 +236,7 @@ export const RealmSettingsEmailTab = ({
                 <HelpItem
                   helpText="realm-settings-help:envelopeFrom"
                   forLabel={t("envelopeFrom")}
-                  forID="kc-envelope-from"
+                  forID={t(`common:helpLabel`, { label: t("envelopeFrom") })}
                 />
               }
             >
@@ -328,7 +328,7 @@ export const RealmSettingsEmailTab = ({
                 defaultValue={authenticationEnabled}
                 render={({ onChange, value }) => (
                   <Switch
-                    id="kc-authentication"
+                    id="kc-authentication-switch"
                     data-testid="email-authentication-switch"
                     label={t("common:enabled")}
                     labelOff={t("common:disabled")}
@@ -369,7 +369,7 @@ export const RealmSettingsEmailTab = ({
                     <HelpItem
                       helpText="realm-settings-help:password"
                       forLabel={t("password")}
-                      forID="kc-password"
+                      forID={t(`common:helpLabel`, { label: t("password") })}
                     />
                   }
                 >

src/realm-settings/GeneralTab.tsx

@@ -86,7 +86,7 @@ export const RealmSettingsGeneralTab = ({
               <HelpItem
                 helpText="realm-settings-help:frontendUrl"
                 forLabel={t("frontendUrl")}
-                forID="kc-frontend-url"
+                forID={t(`common:helpLabel`, { label: t("frontendUrl") })}
               />
             }
           >
@@ -104,7 +104,7 @@ export const RealmSettingsGeneralTab = ({
               <HelpItem
                 helpText="realm-settings-help:requireSsl"
                 forLabel={t("requireSsl")}
-                forID="kc-require-ssl"
+                forID={t(`common:helpLabel`, { label: t("requireSsl") })}
               />
             }
           >
@@ -145,7 +145,7 @@ export const RealmSettingsGeneralTab = ({
               <HelpItem
                 helpText="realm-settings-help:userManagedAccess"
                 forLabel={t("userManagedAccess")}
-                forID="kc-user-manged-access"
+                forID={t(`common:helpLabel`, { label: t("userManagedAccess") })}
               />
             }
             fieldId="kc-user-manged-access"
@@ -172,7 +172,7 @@ export const RealmSettingsGeneralTab = ({
               <HelpItem
                 helpText="realm-settings-help:endpoints"
                 forLabel={t("endpoints")}
-                forID="kc-endpoints"
+                forID={t(`common:helpLabel`, { label: t("endpoints") })}
               />
             }
             fieldId="kc-endpoints"

src/realm-settings/LoginTab.tsx

@@ -32,13 +32,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("userRegistrationHelpText")}
                   forLabel={t("userRegistration")}
-                  forID="kc-user-reg"
+                  forID={t(`common:helpLabel`, { label: t("userRegistration") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-user-reg"
+                id="kc-user-reg-switch"
                 data-testid="user-reg-switch"
                 name="registrationAllowed"
                 label={t("common:on")}
@@ -56,13 +56,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("forgotPasswordHelpText")}
                   forLabel={t("forgotPassword")}
-                  forID="kc-forgot-pw"
+                  forID={t(`common:helpLabel`, { label: t("forgotPassword") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-forgot-pw"
+                id="kc-forgot-pw-switch"
                 data-testid="forgot-pw-switch"
                 name="resetPasswordAllowed"
                 label={t("common:on")}
@@ -80,13 +80,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("rememberMeHelpText")}
                   forLabel={t("rememberMe")}
-                  forID="kc-remember-me"
+                  forID={t(`common:helpLabel`, { label: t("rememberMe") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-remember-me"
+                id="kc-remember-me-switch"
                 data-testid="remember-me-switch"
                 name="rememberMe"
                 label={t("common:on")}
@@ -108,13 +108,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("emailAsUsernameHelpText")}
                   forLabel={t("emailAsUsername")}
-                  forID="kc-email-as-username"
+                  forID={t(`common:helpLabel`, { label: t("emailAsUsername") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-email-as-username"
+                id="kc-email-as-username-switch"
                 data-testid="email-as-username-switch"
                 name="registrationEmailAsUsername"
                 label={t("common:on")}
@@ -132,13 +132,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("loginWithEmailHelpText")}
                   forLabel={t("loginWithEmail")}
-                  forID="kc-login-with-email"
+                  forID={t(`common:helpLabel`, { label: t("loginWithEmail") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-login-with-email"
+                id="kc-login-with-email-switch"
                 data-testid="login-with-email-switch"
                 name="loginWithEmailAllowed"
                 label={t("common:on")}
@@ -156,13 +156,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("duplicateEmailsHelpText")}
                   forLabel={t("duplicateEmails")}
-                  forID="kc-duplicate-emails"
+                  forID={t(`common:helpLabel`, { label: t("duplicateEmails") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-duplicate-emails"
+                id="kc-duplicate-emails-switch"
                 data-testid="duplicate-emails-switch"
                 label={t("common:on")}
                 labelOff={t("common:off")}
@@ -188,13 +188,13 @@ export const RealmSettingsLoginTab = ({
                 <HelpItem
                   helpText={t("verifyEmailHelpText")}
                   forLabel={t("verifyEmail")}
-                  forID="kc-verify-email"
+                  forID={t(`common:helpLabel`, { label: t("verifyEmail") })}
                 />
               }
               hasNoPaddingTop
             >
               <Switch
-                id="kc-verify-email"
+                id="kc-verify-email-switch"
                 data-testid="verify-email-switch"
                 name="verifyEmail"
                 label={t("common:on")}

src/realm-settings/event-config/EventConfigForm.tsx

@@ -57,7 +57,7 @@ export const EventConfigForm = ({
           <HelpItem
             helpText={`realm-settings-help:save-${type}-events`}
             forLabel={t("saveEvents")}
-            forID={eventKey}
+            forID={t(`common:helpLabel`, { label: t("saveEvents") })}
           />
         }
       >
@@ -68,7 +68,7 @@ export const EventConfigForm = ({
           render={({ onChange, value }) => (
             <Switch
               data-testid={eventKey}
-              id={eventKey}
+              id={`${eventKey}-switch`}
               label={t("common:on")}
               labelOff={t("common:off")}
               isChecked={value}
@@ -94,7 +94,7 @@ export const EventConfigForm = ({
                 <HelpItem
                   helpText="realm-settings-help:includeRepresentation"
                   forLabel={t("includeRepresentation")}
-                  forID="includeRepresentation"
+                  forID={t(`common:helpLabel`, { label: t("includeRepresentation") })}
                 />
               }
             >
@@ -123,7 +123,7 @@ export const EventConfigForm = ({
                 <HelpItem
                   helpText="realm-settings-help:expiration"
                   forLabel={t("expiration")}
-                  forID="expiration"
+                  forID={t(`common:helpLabel`, { label: t("expiration") })}
                 />
               }
             >

src/realm-settings/event-config/EventsTab.tsx

@@ -138,7 +138,7 @@ export const EventsTab = () => {
           data-testid="rs-events-tab"
         >
           <PageSection>
-            <Title headingLevel="h4" size="xl">
+            <Title headingLevel="h1" size="xl">
               {t("userEventsConfig")}
             </Title>
           </PageSection>

src/user/UserForm.tsx

@@ -214,7 +214,7 @@ export const UserForm = ({
           <HelpItem
             helpText="users-help:emailVerified"
             forLabel={t("emailVerified")}
-            forID="email-verified"
+            forID={t(`common:helpLabel`, { label: t("emailVerified") })}
           />
         }
       >
@@ -270,7 +270,7 @@ export const UserForm = ({
           <HelpItem
             helpText="users-help:disabled"
             forLabel={t("enabled")}
-            forID="enabled-label"
+            forID={t(`common:helpLabel`, { label: t("enabled") })}
           />
         }
       >
@@ -299,7 +299,7 @@ export const UserForm = ({
           <HelpItem
             helpText="users-help:requiredUserActions"
             forLabel={t("requiredUserActions")}
-            forID="required-user-actions-label"
+            forID={t(`common:helpLabel`, { label: t("requiredUserActions") })}
           />
         }
       >
@@ -346,7 +346,7 @@ export const UserForm = ({
             <HelpItem
               helpText="users-help:groups"
               forLabel={t("common:groups")}
-              forID="kc-join-groups-button"
+              forID={t(`common:helpLabel`, { label: t("common:groups") })}
             />
           }
         >