Merge pull request #806 from hackforla/562-FRONT-AccessibilityPanel

562 front accessibility panel
hackforla · Sep 24, 2020 · a5eecc0 · a5eecc0
2 parents f559d2b + 98e6f29
commit a5eecc0
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 5 deletions.
diff --git a/client/components/common/CONSTANTS.js b/client/components/common/CONSTANTS.js
@@ -201,6 +201,69 @@ export const CITY_COUNCILS = [
   { id: 15, name: 'Council District 15' },
 ];
 
+export const ACCESSIBILITY_INSTRUCTIONS = [
+  {
+    instruction: 'Move backward from link to link or to controls: ',
+    shortcut: 'Shift + Tab',
+  },
+  {
+    instruction: 'Select buttons: ',
+    shortcut: 'Spacebar',
+  },
+  {
+    instruction: 'Navigate and select Radio Buttons: ',
+    shortcut: 'Arrow',
+  },
+  {
+    instruction: 'Select/deselect boxes: ',
+    shortcut: 'Spacebar',
+  },
+  {
+    instruction: 'Move from box to box: ',
+    shortcut: 'Tab',
+  },
+  {
+    instruction: 'Open a List Box: ',
+    shortcut: 'ALT + Down arrow',
+  },
+  {
+    instruction: 'Read the prior screen: ',
+    shortcut: 'CTRL + Page Up',
+  },
+  {
+    instruction: 'Read the next screen: ',
+    shortcut: 'CTRL + Page Down',
+  },
+  {
+    instruction: 'Go to the top of the page: ',
+    shortcut: 'CTRL + Home',
+  },
+  {
+    instruction: 'Go to the bottom of the page: ',
+    shortcut: 'CTRL + End',
+  },
+  {
+    instruction: 'Close the current window (in Internet Explorer): ',
+    shortcut: 'CTRL + W',
+  },
+  {
+    instruction: 'Refresh the screen: ',
+    shortcut: 'F5',
+  },
+  {
+    instruction: 'Go back a page: ',
+    shortcut: 'ALT + Left Arrow',
+  },
+  {
+    instruction: 'Go forward a page: ',
+    shortcut: 'ALT + Right Arrow',
+  },
+  {
+    instruction: 'Navigate to and select the text in the address combo box: ',
+    shortcut: 'ALT + D',
+  },
+];
+
 /*
   NC regions and names are from here:
     https://empowerla.org/councils-by-service-region/

diff --git a/client/components/main/footer/StaticFooter.jsx b/client/components/main/footer/StaticFooter.jsx
@@ -15,7 +15,7 @@ const StaticFooter = () => (
       Powered by volunteers from&nbsp;
       <a
         href="https://www.hackforla.org/#projects"
-        ariaLabel="hack for la website"
+        aria-label="hack for la website"
         className="has-text-weight-bold"
         rel="external noopener noreferrer"
         target="_blank"

diff --git a/client/components/main/header/AccessibilityPane.jsx b/client/components/main/header/AccessibilityPane.jsx
@@ -0,0 +1,77 @@
+/* eslint-disable max-len */
+
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { ACCESSIBILITY_INSTRUCTIONS } from '@components/common/CONSTANTS';
+
+const AccessibilityPane = () => {
+  const [isOpen, updateIsOpen] = useState(false);
+  const dropdownClassName = classNames('dropdown', {
+    'is-active': isOpen,
+  });
+
+  const handleClick = () => {
+    updateIsOpen(!isOpen);
+  };
+
+  const renderInstructions = () => ACCESSIBILITY_INSTRUCTIONS.map((element, index) => {
+    if (index % 2 !== 0) {
+      return (
+        <div className="instruction" key={index.toString()}>
+          <p>
+            {element.instruction}
+            <b>{element.shortcut}</b>
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="instruction offset" key={index.toString()}>
+        <p>
+          {element.instruction}
+          <b>{element.shortcut}</b>
+        </p>
+      </div>
+    );
+  });
+
+  return (
+    <div // eslint-disable-line
+      className={dropdownClassName}
+      tabIndex={0}
+      onKeyDown={handleClick}
+      aria-expanded={isOpen}
+      role="button"
+    >
+      <div
+        className="dropdown-trigger"
+        onClick={handleClick}
+        style={{ width: '100%' }}
+        role="presentation"
+      >
+        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" cursor="pointer">
+          <path d="M24.9661 12.4994C24.9661 5.64131 19.3918 0.0332031 12.4999 0.0332031C5.60802 0.0332031 0.0336914 5.64131 0.0336914 12.4994C0.0336914 19.3575 5.6418 24.9656 12.4999 24.9656C19.358 24.9656 24.9661 19.3575 24.9661 12.4994ZM12.4999 3.81699C13.5472 3.81699 14.3918 4.66158 14.3918 5.70888C14.3918 6.75618 13.5472 7.60077 12.4999 7.60077C11.4526 7.60077 10.608 6.75618 10.608 5.70888C10.608 4.69536 11.4526 3.81699 12.4999 3.81699ZM10.608 20.3373C10.4391 20.7089 10.1013 20.9116 9.72964 20.9116C9.5945 20.9116 9.45937 20.8778 9.32423 20.8102C8.81747 20.5737 8.61477 19.9994 8.85126 19.4927C8.85126 19.4927 10.7094 15.2359 11.0472 13.6819C11.1823 13.1413 11.2499 11.6886 11.2837 11.0129C11.2837 10.7764 11.1486 10.5737 10.9459 10.5062L6.75666 9.28996C6.21612 9.12104 5.91207 8.54672 6.08099 8.03996C6.24991 7.5332 6.82423 7.29672 7.33099 7.43185C7.33099 7.43185 11.1486 8.64807 12.4999 8.64807C13.8513 8.64807 17.7364 7.39807 17.7364 7.39807C18.2432 7.26293 18.8175 7.56699 18.9526 8.07374C19.0877 8.5805 18.7837 9.15482 18.2769 9.28996L14.1215 10.54C13.9188 10.6075 13.7499 10.8102 13.7837 11.0467C13.8175 11.7224 13.885 13.1751 14.0202 13.7156C14.358 15.2697 16.2161 19.5264 16.2161 19.5264C16.4526 20.0332 16.2161 20.6075 15.7432 20.844C15.608 20.9116 15.4729 20.9454 15.3377 20.9454C14.9661 20.9454 14.5945 20.7427 14.4594 20.371L12.4999 16.2832L10.608 20.3373Z" fill="white" />
+        </svg>
+      </div>
+      <div className="dropdown-menu" id="accessibility-dropdown" role="menu">
+        <div className="dropdown-content">
+          <div className="dropdown-content-item">
+            <h2>Accessibility Information</h2>
+            <h3>Map</h3>
+            <p>The map shows the Neighborhood Councils (NC) in Los Angeles. Each NC is outlined in a dotted line, and the border of each NC is outlined in a thick yellow line when hovering over it with your mouse.</p>
+            <h3>Data Visualization</h3>
+            <p>Data visualizations show the results once the filter criterias are selected and submitted. The charts display details once the mouse hovers over the charts.</p>
+            <h3>Keyboard Accessibility</h3>
+            <p>Use these common keyboard commands to navigate web pages without a mouse. Some keystrokes may not work with every Internet browser.</p>
+          </div>
+          <div className="dropdown-content-item key-instructions">
+            {renderInstructions()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccessibilityPane;
diff --git a/client/components/main/header/Header.jsx b/client/components/main/header/Header.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import clx from 'classnames';
+import AccessibilityPane from './AccessibilityPane';
 import COLORS from '../../../styles/COLORS';
 
 const Header = () => {
@@ -27,6 +28,7 @@ const Header = () => {
       className="navbar"
       role="navigation"
       aria-label="main navigation"
+      id="top-navbar"
     >
       <div className="navbar-brand">
         <Link to="/" className="navbar-item">
@@ -75,6 +77,9 @@ const Header = () => {
               Contact Us
             </NavLink>
           </div>
+          <div className="navbar-item">
+            <AccessibilityPane />
+          </div>
         </div>
       </div>
     </nav>

diff --git a/client/styles/_variables.scss b/client/styles/_variables.scss
@@ -11,6 +11,7 @@ $brand-cta1-color:      #FFB24A;    // orange
 $brand-cta2-color:      #55D4D2;    // light blue
 $brand-bg-color:        #FFFFFF;    // white
 $brand-stroke-color:    #999999;    // grey
+$brand-stroke-color-light: #EEEEEE;    // light grey
 
 // font families
 $brand-heading-family:  'Open Sans', sans-serif;
@@ -46,3 +47,4 @@ $z-modal: 10000;
 
 // header and footer
 $z-navbar: 20000;
+$z-top-navbar: 30000;
diff --git a/client/styles/main/_header.scss b/client/styles/main/_header.scss
@@ -1,4 +1,6 @@
 .navbar {
+  $hamburger-height: 200px;
+
   font-family: $brand-heading-family;
   font-weight: bold;
   height: $header-height;
@@ -38,12 +40,14 @@
     }
   }
 
-  @media only screen and (max-width: 1024px) {
+
+  @media only screen and (max-width: 1022px) {
     .navbar-menu.is-active {
       padding: 0;
       background: none;
       box-shadow: none;
       width: 270px;
+      height: $hamburger-height;
       position: fixed;
       right: 0;
 
@@ -55,7 +59,7 @@
   }
 
   .navbar-menu .navbar-item {
-    font-size: 16px;
+    font-size: 15px;
     margin-right: 20px;
   }
 
@@ -87,4 +91,56 @@
       }
     }
   }
+
+  div#accessibility-dropdown {
+    right: -25px;
+    top: 50px;
+    left: auto;
+    width: 600px;
+    height: calc(100vh - #{$header-height + $footer-height + 5px});
+    overflow-y: scroll;
+    padding: 0;
+    border-radius: 5px;
+
+    @media only screen and (max-width: 1022px) {
+      right: auto;
+      left: -350px;
+      top: 45px;
+      height: calc(100vh - #{$header-height + $hamburger-height});
+    }
+  }
+
+  div.dropdown-content {
+    background-color: $brand-stroke-color-light;
+  }
+
+  div.dropdown-content-item {
+    margin: 5px 15px;
+
+    h3 {
+      margin-top: 12px;
+    }
+
+    p {
+      font-family: $brand-text-family;
+      font-weight: lighter;
+      font-size: 0.9em;
+    }
+  }
+
+  div.dropdown-content-item.key-instructions {
+    margin: 10px 0 0 0;
+  }
+
+  .instruction {
+    padding: 2px 0 2px 15px;
+  }
+
+  .offset {
+    background-color: rgb(226, 226, 226);
+  }
 }
+
+nav#top-navbar {
+  z-index: $z-top-navbar;
+}
diff --git a/client/styles/main/_staticfooter.scss b/client/styles/main/_staticfooter.scss
@@ -5,11 +5,11 @@
   font-weight: normal;
   margin: 15px 0 0 20px;
   position: absolute;
-  
+
   @media only screen and (max-width: 640px) {
     margin-top: 0;
   }
-  
+
   a {
     color: $brand-bg-color;
   }