fix(a11y): tweak html for better accessibility (patternfly#917)

* fix(a11y): tweaks html for better accessibility use caps case in example data remove unnecessary attributes align describedby pointer to correct id fix attribute typos add missing isRequired directive use aria-describedby over errormessage as it provides more consistent AX across platform/readers better treatment for global component search (provide label and improve example text) update alt text to match pf core * [issue-908] clean up styles around navigation, a11y tweaks persist scrollbars associate nav items with their relevant pf package move inline styles into stylesheet * [issue-908] the usual lock file dance * [issue-908] styling tweaks for package tag remove unnecessary badge component
redallen · Nov 30, 2018 · c1af473 · c1af473
1 parent faf3310
commit c1af473
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 60 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/examples/SimpleAboutModal.js b/packages/patternfly-4/react-core/src/components/AboutModal/examples/SimpleAboutModal.js
@@ -29,7 +29,7 @@ class SimpleAboutModal extends React.Component {
           productName="Product Name"
           trademark="Trademark and copyright information here"
           brandImageSrc={brandImg}
-          brandImageAlt="Brand Image"
+          brandImageAlt="Patternfly Logo"
           logoImageSrc={logoImg}
           logoImageAlt="AboutModal Logo"
           heroImageSrc={heroImg}

diff --git a/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js b/packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js
@@ -4,7 +4,7 @@ import brandImg from './pf_logo.svg';
 
 class SimpleBrand extends React.Component {
   render() {
-    return <Brand src={brandImg} alt="Brand Image" />;
+    return <Brand src={brandImg} alt="Patternfly Logo" />;
   }
 }
 

diff --git a/packages/patternfly-4/react-core/src/components/Form/examples/HorizontalForm.js b/packages/patternfly-4/react-core/src/components/Form/examples/HorizontalForm.js
@@ -55,7 +55,7 @@ class HorizontalForm extends React.Component {
     return (
       <Form isHorizontal>
         <FormGroup
-          label="required Name"
+          label="Required Name"
           isRequired
           fieldId="horizontal-form-name"
           helperText="Please provide your full name"
@@ -65,12 +65,12 @@ class HorizontalForm extends React.Component {
             isRequired
             type="text"
             id="horizontal-form-name"
-            describedby="horizontal-form-name-helper"
+            aria-describedby="horizontal-form-name-helper"
             name="horizontal-form-name"
             onChange={this.handleTextInputChange1}
           />
         </FormGroup>
-        <FormGroup label="Email" fieldId="horizontal-form-email">
+        <FormGroup label="Email" isRequired fieldId="horizontal-form-email">
           <TextInput
             value={value2}
             onChange={this.handleTextInputChange2}

diff --git a/packages/patternfly-4/react-core/src/components/Form/examples/InvalidForm.js b/packages/patternfly-4/react-core/src/components/Form/examples/InvalidForm.js
@@ -13,7 +13,7 @@ class InvalidForm extends React.Component {
           fieldId="email-label"
           isValid={false}
         >
-          <TextInput isValid={false} value="email||email.com" id="email-label" aria-errormesssage="email-helper" />
+          <TextInput isValid={false} value="email||email.com" id="email-label" aria-describedby="email-label-helper" />
         </FormGroup>
         <FormGroup
           label="Age"
@@ -23,7 +23,7 @@ class InvalidForm extends React.Component {
           fieldId="age"
           isValid={false}
         >
-          <TextInput isValid={false} value="Five" aria-label="Object" id="age" aria-errormesssage="age-helper" />
+          <TextInput isValid={false} value="Five" id="age" aria-describedby="age-helper" />
         </FormGroup>
       </Form>
     );

diff --git a/packages/patternfly-4/react-core/src/components/Form/examples/SimpleForm.js b/packages/patternfly-4/react-core/src/components/Form/examples/SimpleForm.js
@@ -36,7 +36,7 @@ class SimpleForm extends React.Component {
     return (
       <Form>
         <FormGroup
-          label="required Name"
+          label="Required Name"
           isRequired
           fieldId="simple-form-name"
           helperText="Please provide your full name"
@@ -46,12 +46,12 @@ class SimpleForm extends React.Component {
             type="text"
             id="simple-form-name"
             name="simple-form-name"
-            aria-describedby="simple-form-name-helper-1"
+            aria-describedby="simple-form-name-helper"
             value={value1}
             onChange={this.handleTextInputChange1}
           />
         </FormGroup>
-        <FormGroup label="required Email" isRequired fieldId="simple-form-email">
+        <FormGroup label="Required Email" isRequired fieldId="simple-form-email">
           <TextInput
             isRequired
             type="email"
@@ -61,7 +61,7 @@ class SimpleForm extends React.Component {
             onChange={this.handleTextInputChange2}
           />
         </FormGroup>
-        <FormGroup label="Phone number" fieldId="simple-form-number">
+        <FormGroup label="Phone number" isRequired fieldId="simple-form-number">
           <TextInput
             isRequired
             type="tel"

diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigation.js b/packages/patternfly-4/react-docs/src/components/navigation/navigation.js
@@ -6,6 +6,11 @@ import PropTypes from 'prop-types';
 import logo from '../../assets/logo.png';
 import NavigationItemGroup from './navigationItemGroup';
 import NavigationItem from './navigationItem';
+import {
+  Form,
+  FormGroup,
+  TextInput
+} from '@patternfly/react-core';
 
 const routeShape = PropTypes.shape({
   to: PropTypes.string.isRequired,
@@ -33,8 +38,8 @@ class Navigation extends React.Component {
     searchValue: ''
   };
 
-  handleSearchChange = e => {
-    const searchValue = e.target.value;
+  handleSearchChange = (checked, event) => {
+    const searchValue = event.target.value;
     this.setState(() => ({
       searchValue
     }));
@@ -65,15 +70,20 @@ class Navigation extends React.Component {
               <img src={logo} alt="PatternFly Logo" />
             </Link>
           </div>
-          <div className={css(styles.search)}>
-            <input
-              className={css(styles.input)}
-              placeholder="Search components"
-              type="text"
-              value={searchValue}
-              onChange={this.handleSearchChange}
-            />
-          </div>
+          <Form className={css(styles.search)} onSubmit={event => { event.preventDefault(); return false; }}>
+            <FormGroup
+              label="Search Components"
+              fieldId="primaryComponentSearch">
+              <TextInput
+                type="text"
+                id="primaryComponentSearch"
+                name="primaryComponentSearch"
+                placeholder="For example, &quot;button&quot;"
+                value={searchValue}
+                onChange={this.handleSearchChange}
+              />
+            </FormGroup>
+          </Form>
           <NavigationItemGroup title="Style">
             <NavigationItem to="/styles/tokens" pkg="tokens">Tokens</NavigationItem>
             <NavigationItem to="/styles/icons" pkg="icons">Icons</NavigationItem>

diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigation.styles.js b/packages/patternfly-4/react-docs/src/components/navigation/navigation.styles.js
@@ -1,8 +1,6 @@
 import { StyleSheet } from '@patternfly/react-styles';
 import {
-  global_FontSize_xs as fontSizeXs,
-  global_spacer_sm as spacerSm,
-  global_spacer_xs as spacerXs,
+  global_FontSize_lg as fontSizeLg,
   global_spacer_md as spacerMd,
   global_BackgroundColor_100 as navBackgroundColor,
   c_nav_Width as sidebarWidth
@@ -16,20 +14,21 @@ export default StyleSheet.create({
     position: 'fixed',
     width: 'inherit',
     height: '100vh',
-    overflowY: 'auto',
+    overflowY: 'scroll',
     backgroundColor: navBackgroundColor.var
   },
   logo: {
     textAlign: 'center',
     margin: `${spacerMd.var} 0`,
     padding: `0 ${spacerMd.var}`
   },
-  search: {
-    margin: spacerMd.var
-  },
-  input: {
-    padding: `${spacerSm.var} ${spacerXs.var}`,
-    width: '100%',
-    fontSize: fontSizeXs.var
-  }
+  search: `
+    &.pf-c-form {
+      margin: ${spacerMd.var} 0;
+      padding: 0 ${spacerMd.var};
+    }
+    .pf-c-form__label {
+      --pf-c-form__label--FontSize: ${fontSizeLg.var};
+    }
+  `
 });
diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.js b/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
 import styles from './navigationItem.styles';
 import Link from 'gatsby-link';
-import { Badge } from '@patternfly/react-core';
 
 const propTypes = {
   to: PropTypes.string.isRequired,
@@ -19,17 +18,26 @@ const defaultProps = {
 
 const pathPrefix = 'https://github.com/patternfly/patternfly-react/tree/master/packages/';
 const getPkgPrefix = pkg => (pkg === 'icons' ? 'react-icons' : `patternfly-4/react-${pkg}`);
+const navItemDescriptor = pkg => `Found in patternfly ${pkg}`;
+const navItemDescriptorId = children => `${children}Descriptor`;
 
 const NavigationItem = ({ to, children, pkg, components }) => (
   <li>
-    <Link className={css(styles.navigationItem)} activeClassName={css(styles.active)} to={to}>
+    <Link
+      className={css(styles.navigationItem)}
+      activeClassName={css(styles.active)}
+      to={to}
+      aria-describedby={navItemDescriptorId(children)}>
       {children}
     </Link>
-    <Badge isRead className={css(styles.badge)}>
-      <a target="_blank" href={`${pathPrefix}${getPkgPrefix(pkg)}`}>
-        {pkg}
-      </a>
-    </Badge>
+    <a
+      className={css(styles.pkgLabel)}
+      target="_blank"
+      href={`${pathPrefix}${getPkgPrefix(pkg)}`}
+      id={navItemDescriptorId(children)}
+      aria-label={navItemDescriptor(pkg)}>
+      {pkg}
+    </a>
     {components &&
       components.length > 0 && (
         <ul className={css(styles.secondaryList)}>

diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.styles.js b/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.styles.js
@@ -1,14 +1,14 @@
 import { StyleSheet } from '@patternfly/react-styles';
 import {
-  global_spacer_sm as spacerSm,
   global_spacer_xs as spacerXs,
+  global_spacer_sm as spacerSm,
   global_spacer_xl as spacerXl,
   global_spacer_3xl as spacer3Xl,
   global_Color_dark_100 as itemColor,
   global_BackgroundColor_300 as bgColorHover,
   global_BackgroundColor_200,
-  global_FontSize_sm,
   global_FontSize_xs,
+  global_BorderRadius_lg as borderRadiusLg
 } from '@patternfly/react-tokens';
 
 export default StyleSheet.create({
@@ -22,6 +22,9 @@ export default StyleSheet.create({
       textDecoration: 'none'
     }
   },
+  secondaryList: {
+    paddingBottom: spacerXs.var
+  },
   navigationItemSecondary: {
     padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacer3Xl.var}`,
     display: 'block',
@@ -36,12 +39,13 @@ export default StyleSheet.create({
   active: {
     backgroundColor: bgColorHover.var
   },
-  badge: {
-    float: 'right',
-    marginTop: '-25px !important',
-    marginRight: '10px !important'
-  },
-  secondaryList: {
-    paddingBottom: spacerXs.var
-  }
+  pkgLabel: `
+    background-color: ${bgColorHover.var};
+    float: right;
+    margin-top: -25px;
+    margin-right: 10px;
+    font-size: ${global_FontSize_xs.var};
+    padding: 0 ${spacerSm.var};
+    border-radius: ${borderRadiusLg.var};
+  `
 });
diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigationItemGroup.js b/packages/patternfly-4/react-docs/src/components/navigation/navigationItemGroup.js
@@ -20,14 +20,7 @@ class NavigationItemGroup extends React.Component {
 
     return (
       <nav>
-        <div
-          className={css(styles.title)}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between'
-          }}
-        >
+        <div className={css(styles.title)}>
           {title}
         </div>
         <ul>{children}</ul>

diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigationItemGroup.styles.js b/packages/patternfly-4/react-docs/src/components/navigation/navigationItemGroup.styles.js
@@ -4,6 +4,9 @@ import { global_spacer_md as spacerMd, global_FontSize_sm as fontSizeSm } from '
 export default StyleSheet.create({
   title: {
     fontSize: fontSizeSm.var,
-    padding: spacerMd.var
+    padding: spacerMd.var,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
   }
 });