diff --git a/client/components/common/CONSTANTS.js b/client/components/common/CONSTANTS.js index becdd3d2f..2d8a5ddd1 100644 --- 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 index a404687e2..651b81c75 100644 --- a/client/components/main/footer/StaticFooter.jsx +++ b/client/components/main/footer/StaticFooter.jsx @@ -15,7 +15,7 @@ const StaticFooter = () => ( Powered by volunteers from  { + 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 ( +
+

+ {element.instruction} + {element.shortcut} +

+
+ ); + } + + return ( +
+

+ {element.instruction} + {element.shortcut} +

+
+ ); + }); + + return ( +
+
+ + + +
+ +
+ ); +}; + +export default AccessibilityPane; diff --git a/client/components/main/header/Header.jsx b/client/components/main/header/Header.jsx index 68e1f940d..c9b2e40a4 100644 --- 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" >
@@ -75,6 +77,9 @@ const Header = () => { Contact Us
+
+ +
diff --git a/client/styles/_variables.scss b/client/styles/_variables.scss index 3881774ad..effcc8c7f 100644 --- 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 index 35d5dc314..0817bc344 100644 --- 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; +} \ No newline at end of file diff --git a/client/styles/main/_staticfooter.scss b/client/styles/main/_staticfooter.scss index a52e1eb3c..8798b9f4c 100644 --- 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; }