From 032fa5738314093129a31233b69c96e5d5fa8da8 Mon Sep 17 00:00:00 2001
From: Agnieszka Gancarczyk <agancarc@redhat.com>
Date: Fri, 9 Jul 2021 17:15:21 +0100
Subject: [PATCH] added accessibility fixes

---
 src/clients/ClientSettings.tsx                | 12 ++++----
 src/clients/add/CapabilityConfig.tsx          | 30 ++++++++++++-------
 src/clients/add/GeneralSettings.tsx           |  2 +-
 .../list-empty-state/ListEmptyState.tsx       |  2 +-
 .../multi-line-input/MultiLineInput.tsx       |  2 ++
 src/components/scroll-form/ScrollPanel.tsx    |  2 +-
 src/dashboard/Dashboard.tsx                   |  8 +++--
 7 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/clients/ClientSettings.tsx b/src/clients/ClientSettings.tsx
index 7da0cb38a2..d0f43e695d 100644
--- a/src/clients/ClientSettings.tsx
+++ b/src/clients/ClientSettings.tsx
@@ -78,12 +78,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
               <HelpItem
                 helpText="clients-help:validRedirectURIs"
                 forLabel={t("validRedirectUri")}
-                forID="kc-redirect"
+                forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
               />
             }
           >
             <MultiLineInput
               name="redirectUris"
+              aria-label={t("validRedirectUri")}
               addButtonLabel="clients:addRedirectUri"
             />
           </FormGroup>
@@ -94,7 +95,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
               <HelpItem
                 helpText="clients-help:homeURL"
                 forLabel={t("homeURL")}
-                forID="kc-home-url"
+                forID={t(`common:helpLabel`, { label: t("homeURL") })}
               />
             }
           >
@@ -112,12 +113,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
               <HelpItem
                 helpText="clients-help:webOrigins"
                 forLabel={t("webOrigins")}
-                forID="kc-web-origins"
+                forID={t(`common:helpLabel`, { label: t("webOrigins") })}
               />
             }
           >
             <MultiLineInput
               name="webOrigins"
+              aria-label={t("webOrigins")}
               addButtonLabel="clients:addWebOrigins"
             />
           </FormGroup>
@@ -197,7 +199,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
               control={control}
               render={({ onChange, value }) => (
                 <Switch
-                  id="kc-consent"
+                  id="kc-consent-switch"
                   label={t("common:on")}
                   labelOff={t("common:off")}
                   isChecked={value}
@@ -217,7 +219,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
               control={control}
               render={({ onChange, value }) => (
                 <Switch
-                  id="kc-display-on-client"
+                  id="kc-display-on-client-switch"
                   label={t("common:on")}
                   labelOff={t("common:off")}
                   isChecked={value === "true"}
diff --git a/src/clients/add/CapabilityConfig.tsx b/src/clients/add/CapabilityConfig.tsx
index 63f95259dd..10816fd099 100644
--- a/src/clients/add/CapabilityConfig.tsx
+++ b/src/clients/add/CapabilityConfig.tsx
@@ -49,7 +49,7 @@ export const CapabilityConfig = ({
                 <HelpItem
                   helpText="clients-help:authentication"
                   forLabel={t("authentication")}
-                  forID="kc-authentication"
+                  forID={t(`common:helpLabel`, { label: t("authentication") })}
                 />
               }
             >
@@ -60,7 +60,7 @@ export const CapabilityConfig = ({
                 render={({ onChange, value }) => (
                   <Switch
                     data-testid="authentication"
-                    id="kc-authentication"
+                    id="kc-authentication-switch"
                     name="publicClient"
                     label={t("common:on")}
                     labelOff={t("common:off")}
@@ -84,7 +84,7 @@ export const CapabilityConfig = ({
                 <HelpItem
                   helpText="clients-help:authorization"
                   forLabel={t("authorization")}
-                  forID="kc-authorization"
+                  forID={t(`common:helpLabel`, { label: t("authorization") })}
                 />
               }
             >
@@ -95,7 +95,7 @@ export const CapabilityConfig = ({
                 render={({ onChange, value }) => (
                   <Switch
                     data-testid="authorization"
-                    id="kc-authorization"
+                    id="kc-authorization-switch"
                     name="authorizationServicesEnabled"
                     label={t("common:on")}
                     labelOff={t("common:off")}
@@ -135,7 +135,9 @@ export const CapabilityConfig = ({
                         <HelpItem
                           helpText="clients-help:standardFlow"
                           forLabel={t("standardFlow")}
-                          forID="kc-flow-standard"
+                          forID={t(`common:helpLabel`, {
+                            label: t("standardFlow"),
+                          })}
                         />
                       </InputGroup>
                     )}
@@ -159,7 +161,9 @@ export const CapabilityConfig = ({
                         <HelpItem
                           helpText="clients-help:directAccess"
                           forLabel={t("directAccess")}
-                          forID="kc-flow-direct"
+                          forID={t(`common:helpLabel`, {
+                            label: t("directAccess"),
+                          })}
                         />
                       </InputGroup>
                     )}
@@ -183,7 +187,9 @@ export const CapabilityConfig = ({
                         <HelpItem
                           helpText="clients-help:implicitFlow"
                           forLabel={t("implicitFlow")}
-                          forID="kc-flow-implicit"
+                          forID={t(`common:helpLabel`, {
+                            label: t("implicitFlow"),
+                          })}
                         />
                       </InputGroup>
                     )}
@@ -213,7 +219,9 @@ export const CapabilityConfig = ({
                         <HelpItem
                           helpText="clients-help:serviceAccount"
                           forLabel={t("serviceAccount")}
-                          forID="kc-flow-service-account"
+                          forID={t(`common:helpLabel`, {
+                            label: t("serviceAccount"),
+                          })}
                         />
                       </InputGroup>
                     )}
@@ -232,7 +240,9 @@ export const CapabilityConfig = ({
                 <HelpItem
                   helpText="clients-help:encryptAssertions"
                   forLabel={t("encryptAssertions")}
-                  forID="kc-encrypt"
+                  forID={t(`common:helpLabel`, {
+                    label: t("encryptAssertions"),
+                  })}
                 />
               }
               label={t("encryptAssertions")}
@@ -260,7 +270,7 @@ export const CapabilityConfig = ({
                 <HelpItem
                   helpText="clients-help:clientSignature"
                   forLabel={t("clientSignature")}
-                  forID="kc-client-signature"
+                  forID={t(`common:helpLabel`, { label: t("clientSignature") })}
                 />
               }
               label={t("clientSignature")}
diff --git a/src/clients/add/GeneralSettings.tsx b/src/clients/add/GeneralSettings.tsx
index d2fcca0c66..913fd92d33 100644
--- a/src/clients/add/GeneralSettings.tsx
+++ b/src/clients/add/GeneralSettings.tsx
@@ -30,7 +30,7 @@ export const GeneralSettings = () => {
           <HelpItem
             helpText="clients-help:clientType"
             forLabel={t("clientType")}
-            forID="kc-type"
+            forID={t(`common:helpLabel`, { label: t("clientType") })}
           />
         }
       >
diff --git a/src/components/list-empty-state/ListEmptyState.tsx b/src/components/list-empty-state/ListEmptyState.tsx
index 40d60a5704..d13337813f 100644
--- a/src/components/list-empty-state/ListEmptyState.tsx
+++ b/src/components/list-empty-state/ListEmptyState.tsx
@@ -47,7 +47,7 @@ export const ListEmptyState = ({
         ) : (
           hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
         )}
-        <Title headingLevel="h4" size="lg">
+        <Title headingLevel="h1" size="lg">
           {message}
         </Title>
         <EmptyStateBody>{instructions}</EmptyStateBody>
diff --git a/src/components/multi-line-input/MultiLineInput.tsx b/src/components/multi-line-input/MultiLineInput.tsx
index af45798957..bfb81d9ce8 100644
--- a/src/components/multi-line-input/MultiLineInput.tsx
+++ b/src/components/multi-line-input/MultiLineInput.tsx
@@ -64,6 +64,7 @@ export const MultiLineInput = ({
               variant={ButtonVariant.link}
               onClick={() => remove(index)}
               tabIndex={-1}
+              aria-label={t("common:remove")}
               isDisabled={index === fields.length - 1}
             >
               <MinusCircleIcon />
@@ -74,6 +75,7 @@ export const MultiLineInput = ({
               variant={ButtonVariant.link}
               onClick={() => append({})}
               tabIndex={-1}
+              aria-label={t("common:add")}
               isDisabled={
                 rest.isDisabled ||
                 !(currentValues && currentValues[index]?.value)
diff --git a/src/components/scroll-form/ScrollPanel.tsx b/src/components/scroll-form/ScrollPanel.tsx
index 5bf141b4e6..81e26f3a35 100644
--- a/src/components/scroll-form/ScrollPanel.tsx
+++ b/src/components/scroll-form/ScrollPanel.tsx
@@ -14,7 +14,7 @@ export const ScrollPanel = (props: ScrollPanelProps) => {
   return (
     <section {...rest} className="kc-form-panel__panel">
       <Title
-        headingLevel="h4"
+        headingLevel="h1"
         size="xl"
         className="kc-form-panel__title"
         id={scrollId}
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
index 5c5e722d10..f4d23d87f5 100644
--- a/src/dashboard/Dashboard.tsx
+++ b/src/dashboard/Dashboard.tsx
@@ -114,7 +114,9 @@ const Dashboard = () => {
                     <DescriptionListTerm>
                       {t("enabledFeatures")}{" "}
                       <HelpItem
-                        forID="enabledFeatures"
+                        forID={t(`common:helpLabel`, {
+                          label: t("enabledFeatures"),
+                        })}
                         forLabel={t("enabledFeatures")}
                         helpText="dashboard:infoEnabledFeatures"
                       />
@@ -143,7 +145,9 @@ const Dashboard = () => {
                     <DescriptionListTerm>
                       {t("disabledFeatures")}{" "}
                       <HelpItem
-                        forID="disabledFeatures"
+                        forID={t(`common:helpLabel`, {
+                          label: t("disabledFeatures"),
+                        })}
                         forLabel={t("disabledFeatures")}
                         helpText="dashboard:infoDisabledFeatures"
                       />