Added labels for username and password input in idp service

changelog/unreleased/add-labels-and-aria-labelled-by-on-login.md

@@ -0,0 +1,4 @@
+Enhancement: Improve accessibility to input elements on login page
+
+https://github.com/owncloud/ocis/pull/1794
+https://github.com/owncloud/web/issues/4319

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;
+}

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;

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"

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,

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