>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3538249. --> Reported by: [mherchel](https://www.drupal.org/user/118428) Related to !180 >>> <p>This is a followup from <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/bluecheese/-/work_items/3528253" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/bluecheese/-/work_items/3528253</a></span></p> <p>Currently the menus can obscure focused controls, which is a WCAG violation (2.4.7). </p> <p>At desktop, for search, user menu, get started menu, and subitems: On focus out, items should close. We should also close any menus when a user clicks outside of the header.</p> <p>At mobile, we have a choice between creating a focus trap, or closing the flyout menu on focus out. This is closely related to <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/bluecheese/-/work_items/3538248" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/bluecheese/-/work_items/3538248</a></span> (note: we're closing the flyout menu on <code>focusout</code>). </p> <h3>Testing instructions</h3> <p>At desktop:</p> <ol> <li>Tab to a menu item. Hit enter to open. Tab through. Keep tabbing until at next menu. The original menu item should close</li> <li>Tab to a menu item. Hit enter to open. Tab within. Hit shift+tab to tabl backwards until you're outside of the original menu item. The original menu item should close</li> <li>Open up a submenu. Click outside the header. The submenu should close.</li> <li>Do the same on the search and the user menu. The items should close when clicking outside of the header.</li> <li>Tab to the search and open it. Tab outside of the search. It should close.</li> <li>Tab to the user menu and open it. Tab outside of the user menu. It should close.</li> </ol> <p>At mobile:</p> <ol> <li>Tab to the mobile menu button and open it. Tab within and then through. When exiting the header, it should close</li> <li>Tab to the mobile menu button and open it. Tab within and then shift+tab backwards out of the header. The header should close</li> <li>Open the mobile menu via click. Then click outside. It should close.</li> <li>Open the search and then tab through. The search should close. </li> <li>Open the search and shift+tab backwards. When tabbing outside of the header, it will close.</li> <li>Open the search. Click outside of the header. The search should close. </li> </ol>