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

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> = ({

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

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"

frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx

@@ -49,8 +49,7 @@ const ForgottenPassword = () => {
                 )}
                 ref={ref}
             >
-                <Typography
+                <h2
-                    variant="h2"
                     className={classnames(
                         commonStyles.title,
                         commonStyles.textCenter
@@ -58,7 +57,7 @@ const ForgottenPassword = () => {
                     data-loading
                 >
                     Forgotten password
-                </Typography>
+                </h2>
                 <ConditionallyRender
                     condition={attempted}
                     show={

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}

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}

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}

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

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} />}
+                    show={
-                    elseShow={<Logo className={styles.logo} />}
+                        <LogoWithText
+                            className={styles.logo}
+                            aria-label="Unleash logo"
+                        />
+                    }
+                    elseShow={
+                        <Logo
+                            className={styles.logo}
+                            aria-label="Unleash logo"
+                        />
+                    }
                 />
             </div>
         </Gradient>

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>
+            <header className={styles.leftContainer}>{banner}</header>
-            <div className={styles.rightContainer}>
+            <main className={styles.rightContainer}>
                 <div className={styles.innerRightContainer}>{children}</div>
-            </div>
+            </main>
         </div>
     );
 };