mirror/opencloud
1
0
Fork 0
mirror of https://github.com/opencloud-eu/opencloud.git synced 2026-03-03 03:18:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added h1 for screenreaders

Browse Source
This commit is contained in:
JanAckermann
2021-04-29 16:23:39 +02:00
parent 4239fb537f
commit 8c00e02093
4 changed files with 135 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
changelog/unreleased/enhancement-a11y-account-page-introduce-form-with-h-tag.md Normal file
View File

@@ -0,0 +1,3 @@
Enhancement: Introduce login form with h1 tag for screen readers only
https://github.com/owncloud/ocis/pull/1991

142
idp/pkg/assets/embed.go
View File

File diff suppressed because one or more lines are too long

18
idp/ui/src/app.css
View File

@@ -127,3 +127,21 @@ strong {
.oc-login-form div:not(:last-of-type) {
margin-bottom: 15px;
}
/*
* Special SR classes
* Used to hide an element visually, but keeping it accessible for accessibility tools.
*/
.oc-invisible-sr {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
/* Need to make sure we override any existing styles. */
position: absolute !important;
top: 0;
white-space: nowrap;
width: 1px !important;
}

81
idp/ui/src/containers/Login/Login.js
View File

@@ -80,44 +80,49 @@ class Login extends React.PureComponent {
}
return (
<form action="" className="oc-login-form" onSubmit={(event) => this.logon(event)}>
<TextInput
autoFocus
autoCapitalize="off"
spellCheck="false"
value={username}
onChange={this.handleChange('username')}
autoComplete="kopano-account username"
placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Username" })}
label={({ id: "konnect.login.usernameField.label", defaultMessage: "Username" })}
id="oc-login-username"
{...extraPropsUsername}
/>
<TextInput
type="password"
margin="normal"
onChange={this.handleChange('password')}
autoComplete="kopano-account current-password"
placeholder={({ id: "konnect.login.usernameField.label", defaultMessage: "Password" })}
label={({ id: "konnect.login.usernameField.label", defaultMessage: "Password" })}
id="oc-login-password"
{...extraPropsPassword}
/>
{hasError && <Typography id="oc-login-error-message" variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
<div className={classes.wrapper}>
<Button
type="submit"
color="primary"
variant="contained"
className="oc-button-primary oc-mt-l"
disabled={!!loading}
onClick={(event) => this.logon(event)}
>
<FormattedMessage id="konnect.login.nextButton.label" defaultMessage="Log in"></FormattedMessage>
</Button>
{loading && <CircularProgress size={24} className={classes.buttonProgress} />}
</div>
</form>
<div>
{/* eslint-disable-next-line react-intl-format/missing-formatted-message */}
<h1 className="oc-invisible-sr"> Login </h1>
<form action="" className="oc-login-form" onSubmit={(event) => this.logon(event)}>
<TextInput
autoFocus
autoCapitalize="off"
spellCheck="false"
value={username}
onChange={this.handleChange('username')}
autoComplete="kopano-account username"
placeholder={({id: "konnect.login.usernameField.label", defaultMessage: "Username"})}
label={({id: "konnect.login.usernameField.label", defaultMessage: "Username"})}
id="oc-login-username"
{...extraPropsUsername}
/>
<TextInput
type="password"
margin="normal"
onChange={this.handleChange('password')}
autoComplete="kopano-account current-password"
placeholder={({id: "konnect.login.usernameField.label", defaultMessage: "Password"})}
label={({id: "konnect.login.usernameField.label", defaultMessage: "Password"})}
id="oc-login-password"
{...extraPropsPassword}
/>
{hasError && <Typography id="oc-login-error-message" variant="subtitle2" color="error"
className={classes.message}>{errorMessage}</Typography>}
<div className={classes.wrapper}>
<Button
type="submit"
color="primary"
variant="contained"
className="oc-button-primary oc-mt-l"
disabled={!!loading}
onClick={(event) => this.logon(event)}
>
<FormattedMessage id="konnect.login.nextButton.label" defaultMessage="Log in"></FormattedMessage>
</Button>
{loading && <CircularProgress size={24} className={classes.buttonProgress}/>}
</div>
</form>
</div>
);
}