From 531d969fa6244782842698899b242f72ec62d26c Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Wed, 27 Apr 2022 09:29:43 +0200
Subject: [PATCH] refactor: misc login page accessibility improvements (#914)

* refactor: add missing input field labels

* refactor: add missing className prop

* refactor: add missing image labels

* refactor: fix forgot password title size

* refactor fix StandaloneLayout page landmarks

* refactor: improve project page title

* refactor: add autoFocus to login fields
---
 .../src/component/common/Gradient/Gradient.tsx    |  1 +
 .../ProjectFeatureToggles.tsx                     |  2 +-
 frontend/src/component/user/DemoAuth/DemoAuth.jsx |  3 ++-
 .../user/ForgottenPassword/ForgottenPassword.tsx  |  5 ++---
 .../src/component/user/HostedAuth/HostedAuth.jsx  |  2 ++
 frontend/src/component/user/NewUser/NewUser.tsx   |  2 ++
 .../component/user/PasswordAuth/PasswordAuth.jsx  |  3 +++
 .../src/component/user/SimpleAuth/SimpleAuth.jsx  |  2 ++
 .../user/StandaloneBanner/StandaloneBanner.tsx    | 15 ++++++++++++---
 .../common/StandaloneLayout/StandaloneLayout.tsx  |  6 +++---
 10 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/common/Gradient/Gradient.tsx b/frontend/src/component/common/Gradient/Gradient.tsx
index a660d5fb42..4de131d677 100644
--- a/frontend/src/component/common/Gradient/Gradient.tsx
+++ b/frontend/src/component/common/Gradient/Gradient.tsx
@@ -4,6 +4,7 @@ interface IGradientProps {
     from: string;
     to: string;
     style?: object;
+    className?: string;
 }
 
 const Gradient: React.FC<IGradientProps> = ({
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index 400495065f..155d469324 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -49,7 +49,7 @@ export const ProjectFeatureToggles = ({
             headerContent={
                 <HeaderTitle
                     className={styles.title}
-                    title={`Project features (${filteredFeatures.length})`}
+                    title={`Project feature toggles (${filteredFeatures.length})`}
                     actions={
                         <div className={styles.actionsContainer}>
                             <SearchField
diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.jsx b/frontend/src/component/user/DemoAuth/DemoAuth.jsx
index bbc615d0dc..6dbf3724f0 100644
--- a/frontend/src/component/user/DemoAuth/DemoAuth.jsx
+++ b/frontend/src/component/user/DemoAuth/DemoAuth.jsx
@@ -36,7 +36,7 @@ const DemoAuth = ({ authDetails, redirect }) => {
 
     return (
         <form onSubmit={handleSubmit}>
-            <Logo className={styles.logo} />
+            <Logo className={styles.logo} aria-label="Unleash logo" />
             <div className={styles.container}>
                 <h2>Access the Unleash demo instance</h2>
                 <p>No further data or Credit Card required</p>
@@ -50,6 +50,7 @@ const DemoAuth = ({ authDetails, redirect }) => {
                         variant="outlined"
                         label="Email"
                         name="email"
+                        id="email"
                         data-testid={LOGIN_EMAIL_ID}
                         required
                         type="email"
diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
index cb53a28148..6b9b97119d 100644
--- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
+++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
@@ -49,8 +49,7 @@ const ForgottenPassword = () => {
                 )}
                 ref={ref}
             >
-                <Typography
-                    variant="h2"
+                <h2
                     className={classnames(
                         commonStyles.title,
                         commonStyles.textCenter
@@ -58,7 +57,7 @@ const ForgottenPassword = () => {
                     data-loading
                 >
                     Forgotten password
-                </Typography>
+                </h2>
                 <ConditionallyRender
                     condition={attempted}
                     show={
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
index 5cd9d3f07a..ba3fbf14ca 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx
@@ -102,6 +102,7 @@ const HostedAuth = ({ authDetails, redirect }) => {
                             <TextField
                                 label="Username or email"
                                 name="username"
+                                id="username"
                                 type="string"
                                 onChange={evt => setUsername(evt.target.value)}
                                 value={username}
@@ -115,6 +116,7 @@ const HostedAuth = ({ authDetails, redirect }) => {
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
+                                id="password"
                                 value={password}
                                 error={!!passwordError}
                                 helperText={passwordError}
diff --git a/frontend/src/component/user/NewUser/NewUser.tsx b/frontend/src/component/user/NewUser/NewUser.tsx
index acaf555dce..82770e4272 100644
--- a/frontend/src/component/user/NewUser/NewUser.tsx
+++ b/frontend/src/component/user/NewUser/NewUser.tsx
@@ -63,6 +63,8 @@ export const NewUser = () => {
                                 <TextField
                                     data-loading
                                     value={data?.email || ''}
+                                    id="username"
+                                    label="Username"
                                     variant="outlined"
                                     size="small"
                                     className={styles.emailField}
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
index fb9ef3f155..acab7a7c8e 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
@@ -102,6 +102,7 @@ const PasswordAuth = ({ authDetails, redirect }) => {
                             <TextField
                                 label="Username or email"
                                 name="username"
+                                id="username"
                                 type="string"
                                 onChange={evt => setUsername(evt.target.value)}
                                 value={username}
@@ -111,11 +112,13 @@ const PasswordAuth = ({ authDetails, redirect }) => {
                                 data-testid={LOGIN_EMAIL_ID}
                                 variant="outlined"
                                 size="small"
+                                autoFocus
                             />
                             <PasswordField
                                 label="Password"
                                 onChange={evt => setPassword(evt.target.value)}
                                 name="password"
+                                id="password"
                                 value={password}
                                 error={!!passwordError}
                                 helperText={passwordError}
diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
index 4ab2d6e681..f09aed537b 100644
--- a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
+++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
@@ -56,9 +56,11 @@ const SimpleAuth = ({ authDetails, redirect }) => {
                     variant="outlined"
                     label="Email"
                     name="email"
+                    id="email"
                     required
                     type="email"
                     data-testid={LOGIN_EMAIL_ID}
+                    autoFocus
                 />
                 <br />
 
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
index 1ec51c2c03..b7cd782067 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
@@ -20,7 +20,6 @@ const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
             from={theme.palette.primary.main}
             // @ts-expect-error
             to={theme.palette.login.gradient.bottom}
-            // @ts-expect-error
             className={styles.gradient}
         >
             <div className={styles.container}>
@@ -35,8 +34,18 @@ const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
             <div className={styles.logoContainer}>
                 <ConditionallyRender
                     condition={smallScreen}
-                    show={<LogoWithText className={styles.logo} />}
-                    elseShow={<Logo className={styles.logo} />}
+                    show={
+                        <LogoWithText
+                            className={styles.logo}
+                            aria-label="Unleash logo"
+                        />
+                    }
+                    elseShow={
+                        <Logo
+                            className={styles.logo}
+                            aria-label="Unleash logo"
+                        />
+                    }
                 />
             </div>
         </Gradient>
diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
index 39255b668a..c8156ae756 100644
--- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
+++ b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
@@ -21,10 +21,10 @@ const StandaloneLayout: FC<IStandaloneLayout> = ({
 
     return (
         <div className={styles.container}>
-            <div className={styles.leftContainer}>{banner}</div>
-            <div className={styles.rightContainer}>
+            <header className={styles.leftContainer}>{banner}</header>
+            <main className={styles.rightContainer}>
                 <div className={styles.innerRightContainer}>{children}</div>
-            </div>
+            </main>
         </div>
     );
 };