A11y: Trap focus inside open off-canvas nav

maks-akymenko · Sep 13, 2019 · 303a15b · 303a15b
1 parent 10fd312
commit 303a15b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-focus-lock": "^2.0.5",
     "react-scripts": "3.1.1",
     "styled-components": "^4.3.2"
   },

diff --git a/src/App.js b/src/App.js
@@ -4,6 +4,7 @@ import { useOnClickOutside } from './hooks';
 import { GlobalStyles } from './global';
 import { theme } from './theme';
 import { Burger, Menu } from './components';
+import FocusLock from 'react-focus-lock';
 
 function App() {
   const [open, setOpen] = useState(false);
@@ -17,8 +18,10 @@ function App() {
       <>
         <GlobalStyles />
         <div ref={node}>
-          <Burger open={open} setOpen={setOpen} aria-controls={menuId} />
-          <Menu open={open} setOpen={setOpen} id={menuId} />
+          <FocusLock disabled={!open}>
+            <Burger open={open} setOpen={setOpen} aria-controls={menuId} />
+            <Menu open={open} setOpen={setOpen} id={menuId} />
+          </FocusLock>
         </div>
         <div>
           <h1>Hello. This is burger menu tutorial</h1>