Merge pull request #157 from geotrev/app/accessibility

[155] [156] Fix skip to main, jump to top, and Documentation global nav buttons.

Author: geotrev

app/components/Article/Article.js

@@ -36,5 +36,5 @@ export default function Article(props) {
 }
 
 Article.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.string.isRequired,
 }

app/components/Footer/Footer.js

@@ -6,6 +6,11 @@ import PropTypes from "prop-types"
 import "./styles.scss"
 
 export default function Footer(props) {
+  const handleClick = event => {
+    event.preventDefault()
+    props.handleRefocusClick(props.headerRef)
+  }
+
   return (
     <div className="footer-wrapper small-section fluid grid">
       <div className="row">
@@ -50,8 +55,9 @@ export default function Footer(props) {
             <li role="none">
               <button
                 className="is-visually-hidden-focusable"
-                onClick={props.handleHeaderFocusClick}
+                onClick={handleClick}
                 role="listitem"
+                type="button"
               >
                 Return to top of page
               </button>
@@ -64,5 +70,8 @@ export default function Footer(props) {
 }
 
 Footer.propTypes = {
-  handleHeaderFocusClick: PropTypes.func.isRequired,
+  handleRefocusClick: PropTypes.func.isRequired,
+  headerRef: PropTypes.shape({
+    current: PropTypes.instanceOf(Element),
+  }),
 }

app/components/Footer/__tests__/Footer.spec.js

@@ -6,7 +6,10 @@ jest.mock("react-feather/dist/icons/github", () => global.simpleMock("Github"))
 
 describe("<Footer />", () => {
   const baseProps = {
-    handleHeaderFocusClick: jest.fn(),
+    handleRefocusClick: jest.fn(),
+    headerRef: {
+      current: document.createElement("header"),
+    },
   }
 
   const mountComponent = () => {
@@ -20,12 +23,12 @@ describe("<Footer />", () => {
     expect(wrapper).toMatchSnapshot()
   })
 
-  it("calls handleHeaderFocusClick prop when hidden button is clicked", () => {
+  it("calls handleRefocusClick prop when hidden button is clicked", () => {
     // Given
     const wrapper = mountComponent()
     // When
     wrapper.find(".is-visually-hidden-focusable").simulate("click")
     // Then
-    expect(baseProps.handleHeaderFocusClick).toHaveBeenCalled()
+    expect(baseProps.handleRefocusClick).toHaveBeenCalledWith(baseProps.headerRef)
   })
 })

app/components/Footer/__tests__/__snapshots__/Footer.spec.js.snap

@@ -2,7 +2,12 @@
 
 exports[`<Footer /> renders 1`] = `
 <Footer
-  handleHeaderFocusClick={[MockFunction]}
+  handleRefocusClick={[MockFunction]}
+  headerRef={
+    Object {
+      "current": <header />,
+    }
+  }
 >
   <div
     className="footer-wrapper small-section fluid grid"
@@ -85,8 +90,9 @@ exports[`<Footer /> renders 1`] = `
           >
             <button
               className="is-visually-hidden-focusable"
-              onClick={[MockFunction]}
+              onClick={[Function]}
               role="listitem"
+              type="button"
             >
               Return to top of page
             </button>

app/components/GlobalNav/GlobalNav.js

@@ -9,21 +9,27 @@ import Logo from "app/assets/images/un-logo.png"
 import "./styles.scss"
 
 export default function GlobalNav(props) {
+  const handleClick = event => {
+    event.preventDefault()
+    props.handleRefocusClick(props.mainRef)
+  }
+
   return (
     <nav id="global-nav" className="fluid grid">
       <ul className="nav-list row has-no-padding">
         <li className="small-5 xsmall-12 columns" role="none">
-          <Link to="/" className="logo">
+          <Link to="/" className="logo" role="listitem">
             <img src={Logo} alt="Undernet" />
           </Link>
         </li>
-        <li className="small-7 xsmall-12 columns" role="none">
+        <li className="small-7 xsmall-12 columns">
           <ul className="row">
             <li role="none">
               <button
                 role="listitem"
                 className="is-visually-hidden-focusable"
-                onClick={props.handleMainFocusClick}
+                onClick={handleClick}
+                type="button"
               >
                 Skip to main content
               </button>
@@ -47,9 +53,9 @@ export default function GlobalNav(props) {
               </a>
             </li>
             <li role="none">
-              <Link to={introductionPath} role="listitem">
+              <a href={introductionPath} role="listitem">
                 Documentation
-              </Link>
+              </a>
             </li>
           </ul>
         </li>
@@ -59,5 +65,8 @@ export default function GlobalNav(props) {
 }
 
 GlobalNav.propTypes = {
-  handleMainFocusClick: PropTypes.func.isRequired,
+  handleRefocusClick: PropTypes.func.isRequired,
+  mainRef: PropTypes.shape({
+    current: PropTypes.instanceOf(Element),
+  }),
 }

app/components/GlobalNav/__tests__/GlobalNav.spec.js

@@ -4,7 +4,10 @@ import { BrowserRouter as Router } from "react-router-dom"
 
 describe("<Nav />", () => {
   const baseProps = {
-    handleMainFocusClick: jest.fn(),
+    handleRefocusClick: jest.fn(),
+    mainRef: {
+      current: document.createElement("main"),
+    },
   }
 
   const mountComponent = () => {
@@ -22,12 +25,12 @@ describe("<Nav />", () => {
     expect(wrapper).toMatchSnapshot()
   })
 
-  it("calls handleMainFocusClick prop when hidden button is clicked", () => {
+  it("calls handleRefocusClick prop when hidden button is clicked", () => {
     // Given
     const wrapper = mountComponent()
     // When
     wrapper.find(".is-visually-hidden-focusable").simulate("click")
     // Then
-    expect(baseProps.handleMainFocusClick).toHaveBeenCalled()
+    expect(baseProps.handleRefocusClick).toHaveBeenCalledWith(baseProps.mainRef)
   })
 })

app/components/GlobalNav/__tests__/__snapshots__/GlobalNav.spec.js.snap

@@ -25,7 +25,12 @@ exports[`<Nav /> renders 1`] = `
     }
   >
     <GlobalNav
-      handleMainFocusClick={[MockFunction]}
+      handleRefocusClick={[MockFunction]}
+      mainRef={
+        Object {
+          "current": <main />,
+        }
+      }
     >
       <nav
         className="fluid grid"
@@ -40,12 +45,14 @@ exports[`<Nav /> renders 1`] = `
           >
             <Link
               className="logo"
+              role="listitem"
               to="/"
             >
               <a
                 className="logo"
                 href="/"
                 onClick={[Function]}
+                role="listitem"
               >
                 <img
                   alt="Undernet"
@@ -56,7 +63,6 @@ exports[`<Nav /> renders 1`] = `
           </li>
           <li
             className="small-7 xsmall-12 columns"
-            role="none"
           >
             <ul
               className="row"
@@ -66,8 +72,9 @@ exports[`<Nav /> renders 1`] = `
               >
                 <button
                   className="is-visually-hidden-focusable"
-                  onClick={[MockFunction]}
+                  onClick={[Function]}
                   role="listitem"
+                  type="button"
                 >
                   Skip to main content
                 </button>
@@ -153,18 +160,12 @@ exports[`<Nav /> renders 1`] = `
               <li
                 role="none"
               >
-                <Link
+                <a
+                  href="/docs/overview/introduction"
                   role="listitem"
-                  to="/docs/overview/introduction"
                 >
-                  <a
-                    href="/docs/overview/introduction"
-                    onClick={[Function]}
-                    role="listitem"
-                  >
-                    Documentation
-                  </a>
-                </Link>
+                  Documentation
+                </a>
               </li>
             </ul>
           </li>

app/layouts/Main/Main.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useEffect } from "react"
 import { Switch, Route } from "react-router-dom"
 import { ContextUtil } from "undernet"
 
@@ -14,8 +14,10 @@ import "./styles.scss"
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
 export default function Main() {
-  const [headerTabIndex, setHeaderTabIndex] = useState(UNFOCUSABLE_TABINDEX)
-  const [mainTabIndex, setMainTabIndex] = useState(UNFOCUSABLE_TABINDEX)
+  const Attributes = {
+    TABINDEX: "tabindex",
+  }
+
   const headerRef = React.createRef()
   const mainRef = React.createRef()
   const componentUnmountFunction = () => {
@@ -27,41 +29,31 @@ export default function Main() {
     return componentUnmountFunction
   }, [])
 
-  useEffect(() => {
-    if (headerTabIndex === FOCUSABLE_TABINDEX) {
-      headerRef.current.focus()
-    } else if (mainTabIndex === FOCUSABLE_TABINDEX) {
-      mainRef.current.focus()
-    }
-  }, [headerTabIndex, mainTabIndex])
-
-  const handleHeaderFocusClick = event => {
-    event.preventDefault()
-    setHeaderTabIndex(FOCUSABLE_TABINDEX)
+  const handleRefocusClick = ref => {
+    ref.current.setAttribute(Attributes.TABINDEX, FOCUSABLE_TABINDEX)
+    ref.current.focus()
   }
 
-  const handleMainFocusClick = event => {
-    event.preventDefault()
-    setMainTabIndex(FOCUSABLE_TABINDEX)
-  }
+  const getHeaderTabIndex = () => headerRef.current.getAttribute(Attributes.TABINDEX)
+  const getMainTabIndex = () => mainRef.current.getAttribute(Attributes.TABINDEX)
 
   const handleHeaderBlur = () => {
-    if (headerTabIndex === UNFOCUSABLE_TABINDEX) return
-    setHeaderTabIndex(UNFOCUSABLE_TABINDEX)
+    if (getHeaderTabIndex() === UNFOCUSABLE_TABINDEX) return
+    headerRef.current.removeAttribute(Attributes.TABINDEX)
   }
 
   const handleMainBlur = () => {
-    if (mainTabIndex === UNFOCUSABLE_TABINDEX) return
-    setMainTabIndex(UNFOCUSABLE_TABINDEX)
+    if (getMainTabIndex() === UNFOCUSABLE_TABINDEX) return
+    mainRef.current.removeAttribute(Attributes.TABINDEX)
   }
 
   return (
     <React.Fragment>
-      <header tabIndex={headerTabIndex} ref={headerRef} onBlur={handleHeaderBlur} role="banner">
-        <GlobalNav handleMainFocusClick={handleMainFocusClick} />
+      <header ref={headerRef} onBlur={handleHeaderBlur} role="banner">
+        <GlobalNav handleRefocusClick={handleRefocusClick} mainRef={mainRef} />
       </header>
 
-      <main tabIndex={mainTabIndex} ref={mainRef} onBlur={handleMainBlur} role="main">
+      <main ref={mainRef} onBlur={handleMainBlur} role="main">
         <Switch>
           <Route exact path={rootPath} component={Home} />
           <Route path={docsPath} component={Docs} />
@@ -70,7 +62,7 @@ export default function Main() {
       </main>
 
       <footer>
-        <Footer handleHeaderFocusClick={handleHeaderFocusClick} />
+        <Footer handleRefocusClick={handleRefocusClick} headerRef={headerRef} />
       </footer>
     </React.Fragment>
   )

app/layouts/Main/__tests__/Main.spec.js

@@ -37,7 +37,7 @@ describe("<Main />", () => {
       expect(header.is(":focus")).toBe(true)
     })
 
-    it("sets [tabindex] of header tag to null when blurred", () => {
+    it("removes [tabindex] of header tag when blurred", () => {
       // Given
       const wrapper = mountComponent()
       const header = wrapper.find("header")
@@ -60,7 +60,7 @@ describe("<Main />", () => {
       expect(main.is(":focus")).toBe(true)
     })
 
-    it("sets [tabindex] of main tag to null when blurred", () => {
+    it("removes [tabindex] of main tag when blurred", () => {
       // Given
       const wrapper = mountComponent()
       const main = wrapper.find("main")