Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

refactor: misc login page accessibility improvements (#914)

Browse Source 
* 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
This commit is contained in:
olav 2022-04-27 09:29:43 +02:00 committed by GitHub
parent f7266cde10
commit 531d969fa6
10 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/common/Gradient/Gradient.tsx
View File

@ -4,6 +4,7 @@ interface IGradientProps {
from: string;
to: string;
style?: object;
className?: string;
}
const Gradient: React.FC<IGradientProps> = ({

2
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

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

3
frontend/src/component/user/DemoAuth/DemoAuth.jsx
View File

@ -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"

5
frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
View File

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

2
frontend/src/component/user/HostedAuth/HostedAuth.jsx
View File

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

2
frontend/src/component/user/NewUser/NewUser.tsx
View File

@ -63,6 +63,8 @@ export const NewUser = () => {
<TextField
data-loading
value={data?.email || ''}
id="username"
label="Username"
variant="outlined"
size="small"
className={styles.emailField}

3
frontend/src/component/user/PasswordAuth/PasswordAuth.jsx
View File

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

2
frontend/src/component/user/SimpleAuth/SimpleAuth.jsx
View File

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

15
frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
View File

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

6
frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
View File

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