Merged in bugfix/SHIBUI-2201-a11y (pull request #547)

SHIBUI-2201 a11y Approved-by: Jonathan Johnson
TIER · Nov 1, 2021 · 1c1070a · 1c1070a
2 parents e9f6a8c + f55fc6a
commit 1c1070a
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 38 deletions.
diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
@@ -27,12 +27,12 @@ export function Header () {
     const loading = useCurrentUserLoading();
 
     return (
-        <Navbar expand="md" fixed="top" bg="">
+        <Navbar expand="md" fixed="top" bg="" aria-label="Main navigation">
             <Navbar.Brand href={brand.logo.link.url} title={brand.logo.link.description}>
                 <img src={brand.logo.small} width="30" height="30" className="d-inline-block align-top" alt={brand.logo.alt} />
                 <span className="d-lg-inline d-none"><Translate value={brand.logo.link.label}></Translate></span>
             </Navbar.Brand>
-            <Navbar.Text><Translate value={brand.header.title}></Translate></Navbar.Text>
+            <Navbar.Text as="h1"><Translate value={brand.header.title}></Translate></Navbar.Text>
             {loading ?
             <div className="d-flex justify-content-end flex-fill">
                 <FontAwesomeIcon icon={faSpinner} spin={true} pulse={true} size="lg" />

diff --git a/ui/src/app/form/component/IconButton.js b/ui/src/app/form/component/IconButton.js
@@ -11,11 +11,12 @@ const mappings = {
     "arrow-down": <FontAwesomeIcon icon={faArrowDown} />,
 };
 
-const IconButton = (props) => {
+const IconButton = ({children, ...props}) => {
     const { icon, ...otherProps } = props;
     return (
         <Button {...otherProps} variant={props.variant || 'light'}>
             {mappings[icon]}
+            <span className="sr-only">{children}</span>
         </Button>
     );
 };

diff --git a/ui/src/app/form/component/InfoIcon.js b/ui/src/app/form/component/InfoIcon.js
@@ -17,6 +17,7 @@ export function InfoIcon ({ value, placement='left', ...props }) {
         )}
         aria-label={translate('tooltip.instruction')}>
             <Button variant="text">
+                <span className="sr-only">Description</span>
                 <FontAwesomeIcon className="text-primary" icon={faInfoCircle} size="lg" {...props} />
             </Button>
         </OverlayTrigger>

diff --git a/ui/src/app/form/component/templates/ArrayFieldTemplate.js b/ui/src/app/form/component/templates/ArrayFieldTemplate.js
@@ -86,7 +86,7 @@ const ObjectArrayItem = ({type, ...props}) => {
                                             props.disabled || props.readonly || !props.hasMoveUp
                                         }
                                         onClick={props.onReorderClick(props.index, props.index - 1)}
-                                    />
+                                    ><span className="sr-only">Move Up</span></IconButton>
                                 </div>
                             )}
 
@@ -100,7 +100,7 @@ const ObjectArrayItem = ({type, ...props}) => {
                                             props.disabled || props.readonly || !props.hasMoveDown
                                         }
                                         onClick={props.onReorderClick(props.index, props.index + 1)}
-                                    />
+                                    ><span className="sr-only">Move Down</span></IconButton>
                                 </div>
                             )}
 
@@ -114,7 +114,7 @@ const ObjectArrayItem = ({type, ...props}) => {
                                         style={btnStyle}
                                         disabled={props.disabled || props.readonly}
                                         onClick={props.onDropIndexClick(props.index)}
-                                    />
+                                    ><span className="sr-only">Delete</span></IconButton>
                                 </div>
                             )}
                         </div>
@@ -156,7 +156,7 @@ const DefaultArrayItem = (props) => {
                                         props.disabled || props.readonly || !props.hasMoveUp
                                     }
                                     onClick={props.onReorderClick(props.index, props.index - 1)}
-                                />
+                                ><span className="sr-only">Move Up</span></IconButton>
                             </div>
                         )}
 
@@ -170,7 +170,7 @@ const DefaultArrayItem = (props) => {
                                         props.disabled || props.readonly || !props.hasMoveDown
                                     }
                                     onClick={props.onReorderClick(props.index, props.index + 1)}
-                                />
+                                ><span className="sr-only">Move Down</span></IconButton>
                             </div>
                         )}
 
@@ -184,7 +184,7 @@ const DefaultArrayItem = (props) => {
                                     style={btnStyle}
                                     disabled={props.disabled || props.readonly}
                                     onClick={props.onDropIndexClick(props.index)}
-                                />
+                                ><span className="sr-only">Delete</span></IconButton>
                             </div>
                         )}
                     </div>
@@ -210,7 +210,7 @@ const DefaultFixedArrayFieldTemplate = (props) => {
                         className="array-item-add"
                         onClick={props.onAddClick}
                         disabled={props.disabled || props.readonly}
-                    />
+                    ><span className="sr-only">Add</span></AddButton>
                 )}
             </div>
 
@@ -254,7 +254,7 @@ const DefaultNormalArrayFieldTemplate = (props) => {
                             className="array-item-add mx-2"
                             onClick={props.onAddClick}
                             disabled={props.disabled || props.readonly}
-                        />
+                        ><span className="sr-only">Add</span></AddButton>
                     )}
                     {(props.uiSchema["ui:description"] || props.schema.description) && (
                         <ArrayFieldDescription

diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -12,7 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAsterisk, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { useTranslator } from "../../../i18n/hooks";
 
-const ToggleButton = ({ isOpen, onClick, disabled }) => (
+const ToggleButton = ({ isOpen, onClick, disabled, children }) => (
     <Button
         type="button"
         variant="outline-secondary"
@@ -23,6 +23,7 @@ const ToggleButton = ({ isOpen, onClick, disabled }) => (
             // Prevent input from losing focus.
             e.preventDefault();
         }}>
+            {children}
         <FontAwesomeIcon icon={isOpen ? faCaretUp : faCaretDown} />
     </Button>
 );
@@ -91,15 +92,16 @@ const OptionWidget = ({
 
     return (
         <Form.Group className="mb-0">
-            <Form.Label className={`${(touched && rawErrors?.length > 0) ? "text-danger" : ""}`}>
+            <Form.Label className={`${(touched && rawErrors?.length > 0) ? "text-danger" : ""}`} htmlFor={`option-selector-${id}`}>
                 <span>
                     <Translate value={label || schema.title} />
-                    {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="text-danger ml-2" size="sm" /> : null}
+                    {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="text-danger ml-2" size="sm" /> : <span className="sr-only">Item {id + 1}</span>}
                 </span>
                 {schema.description && <InfoIcon value={schema.description} />}
             </Form.Label>
             <Typeahead
-                id={`option-selector-${id}`}
+                id={`option-selector-items-${id}`}
+                inputProps={{ id: `option-selector-${id}` }}
                 ref={typeahead}
                 defaultInputValue={ inputValue }
                 onChange={ _onChange }
@@ -120,7 +122,9 @@ const OptionWidget = ({
                 newSelectionPrefix={''}
                 >
                 {({ isMenuShown, toggleMenu }) => (
-                    <ToggleButton isOpen={isMenuShown} onClick={e => toggleMenu()} disabled={disabled || readonly} />
+                    <ToggleButton isOpen={isMenuShown} onClick={e => toggleMenu()} disabled={disabled || readonly}>
+                        <span className="sr-only">Options</span>
+                    </ToggleButton>
                 )}
             </Typeahead>
             {rawErrors?.length > 0 && touched && (

diff --git a/ui/src/app/form/component/widgets/SelectWidget.js b/ui/src/app/form/component/widgets/SelectWidget.js
@@ -86,7 +86,7 @@ const SelectWidget = ({
 
     return (
         <Form.Group>
-            <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`}>
+            <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`} htmlFor={id}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ? <FontAwesomeIcon icon={faAsterisk} className="ml-2 text-danger" size="sm" /> : null}

diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
@@ -41,7 +41,7 @@ const TextWidget = ({
     // const classNames = [rawErrors?.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (
         <Form.Group className="mb-0">
-            <Form.Label className={`${rawErrors?.length > 0 && touched ? "text-danger" : ""}`}>
+            <Form.Label className={`${rawErrors?.length > 0 && touched ? "text-danger" : ""}`} htmlFor={id}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ?

diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js
@@ -59,6 +59,10 @@ export function CopySource({ copy, onNext }) {
         setValue('properties', selected);
     }, [selected, setValue]);
 
+    React.useEffect(() => {
+        console.log(errors, formState);
+    }, [errors, formState]);
+
     return (
         <>
             <div className="row">
@@ -100,12 +104,10 @@ export function CopySource({ copy, onNext }) {
                                     <FontAwesomeIcon icon={faAsterisk} className="text-danger" />
                                 </label>
                                 <EntityTypeahead name="target" control={control} />
-                                {errors?.target?.type === 'required' &&
                                 <small id="target-help"
-                                    className={`form-text text-danger ${'sr-only'}`}>
+                                        className={`form-text text-danger ${errors?.target?.type === 'required' ? '' : 'sr-only'}`}>
                                     <Translate value="message.target-required">Entity ID to copy is Required</Translate>
                                 </small>
-                                }
                             </div>
                             <div className="form-group">
                                 <label htmlFor="serviceProviderName">
@@ -115,10 +117,10 @@ export function CopySource({ copy, onNext }) {
                                 <input id="serviceProviderName" type="text" className="form-control"
                                     {...register('serviceProviderName', {required: true})}
                                     aria-describedby="serviceProviderName-help" />
-                                {errors?.serviceProviderName?.type === 'required' && <small className="form-text text-danger"
+                                <small className={`form-text text-danger ${errors?.serviceProviderName?.type === 'required' ? '' : 'sr-only'}`}
                                     id="serviceProviderName-help">
                                     <Translate value="message.service-resolver-name-required">Service Resolver Name is required</Translate>
-                                </small>}
+                                </small>
                             </div>
                             <div className="form-group">
                                 <label htmlFor="entityId">
@@ -130,17 +132,15 @@ export function CopySource({ copy, onNext }) {
                                     placeholder=""
                                     aria-describedby="entityId-help" 
                                     {...register('entityId', { required: true })} />
-                                {errors?.entityId &&
-                                    <small className="form-text text-danger"
-                                        id="entityId-help">
-                                        {errors.entityId.type === 'required' &&
-                                            <Translate value="message.entity-id-required">Entity ID is required</Translate>
-                                        }
-                                        {errors.entityId.type === 'unique' &&
-                                            <Translate value="message.entity-id-must-be-unique">Entity ID must be unique</Translate>
-                                        }
-                                    </small>
-                                }
+                                <small className={`form-text text-danger ${errors?.entityId ? '' : 'sr-only'}`}
+                                    id="entityId-help">
+                                    {errors?.entityId?.type === 'required' &&
+                                        <Translate value="message.entity-id-required">Entity ID is required</Translate>
+                                    }
+                                    {errors?.entityId?.type === 'unique' &&
+                                        <Translate value="message.entity-id-must-be-unique">Entity ID must be unique</Translate>
+                                    }
+                                </small>
                             </div>
                         </fieldset>
                     </form>
@@ -156,14 +156,15 @@ export function CopySource({ copy, onNext }) {
                         <tbody>
                             {sections.map((item, i) =>
                                 <tr key={i}>
-                                    <td><label className="mb-0" htmlFor={`property-checkbox-${i}`}><Translate value={`label.${kebabCase(item.i18nKey)}`} /></label></td>
+                                    <td><span className="mb-0" id={`property-checkbox-${i}`}><Translate value={`label.${kebabCase(item.i18nKey)}`} /></span></td>
                                     <td>
                                         <Check
                                             custom
                                             type={'checkbox'}
-                                            id={`property-checkbox-${i}`}
+                                            id={`property-checkbox-${i}-check`}
                                             onChange={({ target: { checked } }) => onSelect(item, checked)}
                                             checked={selected.indexOf(item.property) > -1}
+                                            aria-labelledby={`property-checkbox-${i}`}
                                         />
                                     </td>
                                 </tr>

diff --git a/ui/src/app/metadata/domain/source/component/SourceList.js b/ui/src/app/metadata/domain/source/component/SourceList.js
@@ -35,7 +35,11 @@ export default function SourceList({ entities, onDelete, onEnable, onChangeGroup
                                 <th className=""><Translate value="label.creation-date">Created Date</Translate></th>
                                 <th className="text-center"><Translate value="label.enabled">Enabled</Translate></th>
                                 {isAdmin && onChangeGroup && <th className=""><Translate value="label.group">Group</Translate></th> }
-                                {onDelete && isAdmin && <th className="w-auto"></th>}
+                                {onDelete && isAdmin &&
+                                <th className="w-auto">
+                                    <span className="sr-only"><Translate value="action.actions">Actions</Translate></span>
+                                </th>
+                                }
                             </tr>
                         </thead>
                         <tbody>

diff --git a/ui/src/app/metadata/view/MetadataUpload.js b/ui/src/app/metadata/view/MetadataUpload.js
@@ -142,7 +142,7 @@ export function MetadataUpload() {
                             &mdash;
                         </div>
                         <div className="form-group">
-                            <label><Translate value="label.service-resolver-metadata-url" for="url">Service Resolver Metadata URL</Translate></label>
+                            <label htmlFor="url"><Translate value="label.service-resolver-metadata-url">Service Resolver Metadata URL</Translate></label>
                             <input id="url" disabled={ watchFile && watchFile.length > 0 } type="text" className="form-control"{...register('url')} />
                         </div>
                         <div className="alert alert-danger" role="alert">

diff --git a/ui/src/theme/project/typography.scss b/ui/src/theme/project/typography.scss
@@ -18,4 +18,11 @@
     line-height: 1.5;
     border-radius: 0.2rem;
     display: block;
+}
+
+.navbar-light .navbar-text {
+    font-size: 1rem;
+    font-weight: normal;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.75);
 }