fix: refocus website search button when the dialog is closed (#2702)

Author: shleewhite

website/app/components/doc/page/header/algolia-search/index.js

@@ -58,9 +58,12 @@ export default class DocAlgoliaSearchComponent extends Component {
         detachedCancelButtonText: 'Close', // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-translations
       },
       onStateChange: ({ state, prevState }) => {
+        // keep tracked state in sync with internal state so cmd+k properly opens/closes the dialog
+        this.isModalOpen = state.isOpen;
         // used to reset the query to an empty state/string when the modal is closed (via "click" or "esc" key)
         if (!state.isOpen && prevState.isOpen) {
           autocompleteInstance.setQuery('');
+          document.getElementById('search-button').focus();
         }
       },
       // onSubmit: ({ state, setQuery, setIsOpen, refresh }) => {
@@ -244,7 +247,6 @@ export default class DocAlgoliaSearchComponent extends Component {
     document.addEventListener('keydown', (event) => {
       if (event.metaKey && event.key === 'k') {
         autocompleteInstance.setIsOpen(!this.isModalOpen);
-        this.isModalOpen = !this.isModalOpen;
       }
     });
 

website/app/components/doc/page/header/index.hbs

@@ -16,16 +16,18 @@
       <Doc::Page::Header::NavItem @label="Components" @route="components" @currentTopRoute={{@currentTopRoute}} />
       <Doc::Page::Header::NavItem @label="Patterns" @route="patterns" @currentTopRoute={{@currentTopRoute}} />
       <li class="doc-page-header__nav-item-generic doc-page-header__nav-item--split">
-        <div class="sr-only" id="search-button">This button opens a dialog containing an input field and some additional
-          information that you may wish to explore. An automatic search will be performed as you type text into the
-          search field, but the results may not be announced. Exploring the additional items in the modal will help you
-          discover the search results.</div>
+        <div class="sr-only" id="search-button-help">
+          This button opens a dialog containing an input field and some additional information that you may wish to
+          explore. An automatic search will be performed as you type text into the search field, but the results may not
+          be announced. Exploring the additional items in the modal will help you discover the search results.
+        </div>
         <button
           type="button"
           class="doc-page-header__desktop-icon-item"
           data-doc-algolia-search-autocomplete-secondary-trigger
-          aria-describedby="search-button"
+          aria-describedby="search-button-help"
           aria-label="Search"
+          id="search-button"
         >
           <Hds::Icon @name="search" @size="24" />
         </button>