Added labels and aria properties for username and password input in i…

…dp service
owncloud · Mar 12, 2021 · c586443 · c586443
1 parent f2dcc93
commit c586443
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 75 deletions.
diff --git a/changelog/unreleased/add-labels-and-aria-labelled-by-on-login.md b/changelog/unreleased/add-labels-and-aria-labelled-by-on-login.md
@@ -0,0 +1,4 @@
+Enhancement: Add labels and aria properties for accessibility to input elements on login page
+
+https://github.com/owncloud/ocis/pull/1794
+https://github.com/owncloud/web/issues/4319
diff --git a/idp/pkg/assets/embed.go b/idp/pkg/assets/embed.go
diff --git a/idp/ui/src/app.css b/idp/ui/src/app.css
@@ -53,6 +53,17 @@ strong {
  font-size: 1rem;
 }
 
+.oc-label {
+ color: #fff;
+ display: inline-block;
+ margin-bottom: 5px;
+}
+
+.oc-input.error {
+ outline: none;
+ border: 1px solid #f44336;
+}
+
 .oc-input:focus {
  outline: none;
  border: 1px solid #fff;
@@ -112,3 +123,7 @@ strong {
 .oc-light {
  color: #fff !important;
 }
+
+.oc-login-form div:not(:last-of-type) {
+ margin-bottom: 15px;
+}
diff --git a/idp/ui/src/components/TextInput.js b/idp/ui/src/components/TextInput.js
@@ -1,16 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from 'react-intl';
+import {useIntl} from 'react-intl';
 
 const TextInput = (props) => {
- const intl = useIntl();
+ const intl = useIntl();
+ const label = props.label;
+ const extraClassName = props.extraClassName;
 
- return <input className="oc-input" {...props} placeholder={props.placeholder ? intl.formatMessage(props.placeholder) : null} />;
+ delete props.label;
+ delete props.extraClassName;
+
+ return (
+ <div>
+ <label id={`${props.id}-label`}
+ className="oc-label"
+ htmlFor={props.id}>{intl.formatMessage(label)}</label>
+ <input className={`oc-input ${extraClassName ? extraClassName : ''}`} {...props}
+ aria-labelledby={`${props.id}-label`}
+ placeholder={props.placeholder ? intl.formatMessage(props.placeholder) : null}/>
+ </div>);
 };
 
 TextInput.propTypes = {
- placeholder: PropTypes.object,
+ placeholder: PropTypes.object,
+ label: PropTypes.object,
+ id: PropTypes.string,
+ extraClassName: props.string,
 }
 
 export default TextInput;
diff --git a/idp/ui/src/containers/Login/Login.js b/idp/ui/src/containers/Login/Login.js
@@ -62,9 +62,25 @@ class Login extends React.PureComponent {
  : (errors.username
  ? <ErrorMessage error={errors.username}></ErrorMessage>
  : <ErrorMessage error={errors.password}></ErrorMessage>);
+ const extraPropsUsername = {
+ "aria-invalid" : (errors.username || errors.http) ? 'true' : 'false'
+ };
+ const extraPropsPassword = {
+ "aria-invalid" : (errors.password || errors.http) ? 'true' : 'false',
+ };
+
+ if(errors.username || errors.http){
+ extraPropsUsername['extraClassName'] = 'error';
+ extraPropsUsername['aria-describedby'] = 'oc-login-error-message';
+ }
+
+ if(errors.password || errors.http){
+ extraPropsPassword['extraClassName'] = 'error';
+ extraPropsPassword['aria-describedby'] = 'oc-login-error-message';
+ }
 
- return (
- <form action="" onSubmit={(event) => this.logon(event)}>
+  return (
+ <form action="" className="oc-login-form" onSubmit={(event) => this.logon(event)}>
  <TextInput
  autoFocus
  autoCapitalize="off"
@@ -73,15 +89,21 @@ class Login extends React.PureComponent {
  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 variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
+ {hasError && <Typography id="oc-login-error-message" variant="subtitle2" color="error" className={classes.message}>{errorMessage}</Typography>}
  <div className={classes.wrapper}>
  <Button
  type="submit"

diff --git a/idp/ui/src/errors/index.js b/idp/ui/src/errors/index.js
@@ -11,11 +11,11 @@ export const ERROR_HTTP_UNEXPECTED_RESPONSE_STATE = 'konnect.error.http.unexpect
 const translations = defineMessages({
  [ERROR_LOGIN_VALIDATE_MISSINGUSERNAME]: {
  id: ERROR_LOGIN_VALIDATE_MISSINGUSERNAME,
- defaultMessage: 'Enter an username'
+ defaultMessage: 'Please enter a valid username'
  },
  [ERROR_LOGIN_VALIDATE_MISSINGPASSWORD]: {
  id: ERROR_LOGIN_VALIDATE_MISSINGPASSWORD,
- defaultMessage: 'Enter a password'
+ defaultMessage: 'Please enter a valid password'
  },
  [ERROR_LOGIN_FAILED]: {
  id: ERROR_LOGIN_FAILED,

diff --git a/web/pkg/assets/embed.go b/web/pkg/assets/embed.go
@@ -1,5 +1,5 @@
-// Code generated by fileb0x at "2021-03-08 16:13:22.234771 +0000 WET m=+0.110173709" from config file "embed.yml" DO NOT EDIT.
-// modification hash(6f73b44b9d86c8db7c5ee9784b8315c1.c9b7e50721daf642e7eab7fd220fff97)
+// Code generated by fileb0x at "2021-03-10 16:32:28.76666834 +0100 CET m=+0.117320721" from config file "embed.yml" DO NOT EDIT.
+// modification hash(2e1d51e5848ec6b0b38a67a7a2af81ca.c9b7e50721daf642e7eab7fd220fff97)
 
 package assets
 
@@ -125,11 +125,6 @@ func init() {
  panic(err)
  }
 
- err = FS.Mkdir(CTX, "css/", 0777)
- if err != nil && err != os.ErrExist {
- panic(err)
- }
-
  err = FS.Mkdir(CTX, "js/", 0777)
  if err != nil && err != os.ErrExist {
  panic(err)
@@ -160,6 +155,11 @@ func init() {
  panic(err)
  }
 
+ err = FS.Mkdir(CTX, "css/", 0777)
+ if err != nil && err != os.ErrExist {
+ panic(err)
+ }
+
  var f webdav.File
 
  var rb *bytes.Reader