Merge pull request #466 from maykinmedia/fix/1121-click-trap-from-Sea…

…rch-and-Header

🐛 [#1121] focus-trap in Header and Search

src/open_inwoner/js/components/header/header.js

@@ -25,9 +25,15 @@ class Header extends Component {
    * Callbacks should trigger `setState` which in turn triggers `render`.
    */
   bindEvents() {
-    this.node.addEventListener('click', () =>
-      this.setState({ open: !this.state.open })
-    )
+    this.node.addEventListener('keyup', this.onKeyUp.bind(this))
+    this.node.addEventListener('click', (e) => {
+      if (
+        e.target.matches('.header__button') ||
+        e.target.matches('.header__button *')
+      ) {
+        this.setState({ open: !this.state.open })
+      }
+    })
   }
 
   /**
@@ -44,6 +50,16 @@ class Header extends Component {
   getSubMenu() {
     return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_SUBMENU)
   }
+  /**
+   * Gets called when a key is released.
+   * If key is escape key, explicitly close the mobile menu.
+   * @param {KeyboardEvent} event
+   */
+  onKeyUp(event) {
+    if (event.key === 'Escape') {
+      this.setState({ open: false })
+    }
+  }
 
   /**
    * Persists state to DOM.
@@ -54,7 +70,10 @@ class Header extends Component {
     document.body.classList.add('body')
     BEM.toggleModifier(document.body, MODIFIER_OPEN, state.open)
     BEM.toggleModifier(this.getButton(), MODIFIER_OPEN, state.open)
-    state.open ? this.getSubMenu().showModal() : this.getSubMenu().close()
+
+    if (matchMedia('(max-width: 767px)').matches) {
+      state.open ? this.getSubMenu().show() : this.getSubMenu().close()
+    }
 
     if (state.open) {
       window.scrollTo({ x: 0, y: 0 })

src/open_inwoner/scss/components/Header/Header.scss

@@ -121,7 +121,7 @@ $vm: var(--spacing-large);
     z-index: 2;
 
     @media (min-width: 768px) {
-      display: block;
+      display: none;
     }
   }
   &__submenu::backdrop {