feedback updates

AlbyIanna · Jul 30, 2019 · 9ac66c5 · 9ac66c5
1 parent 91e0ff8
commit 9ac66c5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/examples/dropdown/dropdown.js b/examples/dropdown/dropdown.js
@@ -9,7 +9,7 @@ const Dropdown = ({ activatorText = 'Dropdown', items = [] }) => {
     const dropdownListRef = useRef(null)
 
     const wrapKeyHandler = (event) => {
-        if (event.keyCode === 27 && isOpen) {
+        if (event.key === 'Escape' && isOpen) {
             // escape key
             setIsOpen(false)
             activatorRef.current.focus()
@@ -26,21 +26,21 @@ const Dropdown = ({ activatorText = 'Dropdown', items = [] }) => {
     }
     useEffect(() => {
         if (isOpen) {
-            document.addEventListener('mousedown', clickOutsideHandler)
+            document.addEventListener('mouseup', clickOutsideHandler)
 
             dropdownListRef.current.querySelector('a').focus()
         } else {
-            document.removeEventListener('mousedown', clickOutsideHandler)
+            document.removeEventListener('mouseup', clickOutsideHandler)
         }
 
         return () => {
-            document.removeEventListener('mousedown', clickOutsideHandler)
+            document.removeEventListener('mouseup', clickOutsideHandler)
         }
     }, [isOpen])
     return (
         <div
             className="dropdown-wrap"
-            onKeyDown={wrapKeyHandler}
+            onKeyUp={wrapKeyHandler}
         >
             <button
                 aria-haspopup="true"
@@ -55,10 +55,11 @@ const Dropdown = ({ activatorText = 'Dropdown', items = [] }) => {
                 id="dropdown1"
                 ref={dropdownListRef}
                 tabIndex="-1"
-                className={`dropdown-itemList ${isOpen ? 'active' : ''}`}>
+                className={`dropdown-itemList ${isOpen ? 'active' : ''}`}
+                role="list">
                 { items.map((item, index) => {
-                    return <li key={index}>
-                        <a href={item.url}>item.text</a>
+                    return <li key={index} role="listitem">
+                        <a href={item.url}>{item.text}</a>
                     </li>
                 })}
                 { items.length === 0 ? <li>No items</li> : null }

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -25,6 +25,7 @@ const IndexPage = () => (
         <li><a href="https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a">Chrome Accessibility Inspector</a></li>
         <li><a href="https://developers.google.com/web/updates/2018/01/devtools#contrast">Chrome Color Contrast Debugger</a></li>
         <li><a href="https://marcysutton.com/angular-protractor-accessibility-plugin/">Protractor Accessibility Plugin</a></li>
+        <li><a href="https://a11ysupport.io/">Accessibility Support matrix</a></li>
       </ul>
 
       <h3>Screen reader cheat sheets</h3>