chore: add no-JS state for search button and refactor into a component

Author: julhoang

templates/v3/includes/_header_v3.html

@@ -12,6 +12,7 @@
 
   Note: Subcomponents inherit the full parent context. Specifically:
     _header_nav_link.html    uses: url, label, nav_id, is_unread, active_nav_item
+    _header_search_bar.html  uses: current_version
     _header_utilities.html   uses: disable_theme_switcher, request, avatar_id, version_menu_id
 
   Usage:
@@ -69,20 +70,7 @@
     </div>
 
     {% comment %} Search — responsive: full bar on desktop, button on mobile {% endcomment %}
-    <search class="header__search-bar">
-    <button type="button"
-            id="gecko-search-button"
-            class="header__search-input-trigger"
-            data-current-boost-version="{{ current_version.stripped_boost_url_slug }}"
-            data-theme-mode="light"
-            data-font-family="var(--font-sans)">
-      <span class="header__search-icon" aria-hidden="true">
-        {% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
-      </span>
-      Search
-    </button>
-    <span class="header__search-kbd" aria-hidden="true">CTRL+K</span>
-    </search>
+    {% include "v3/includes/header/_header_search_bar.html" %}
     {% comment %} Desktop & tablet utilities (hidden on mobile) {% endcomment %}
     <div class="header__right">
       {% include "v3/includes/header/_header_utilities.html" with avatar_id="desktop-user-menu" version_menu_id="desktop-version-menu" %}

templates/v3/includes/header/_header_search_bar.html

@@ -0,0 +1,43 @@
+{% comment %}
+  Header Search Bar — Gecko-powered search trigger with JS-disabled fallback.
+
+  The search modal is imported from static/js/boost-gecko/.
+
+  When JavaScript is enabled, the button opens the Gecko search overlay (wired
+  in static/js/search-shortcut.js; Ctrl/Cmd+K shortcut). When JavaScript is
+  disabled, the button and keyboard hint are hidden via an inline <style> in
+  <noscript>, and a non-interactive span explains that search is unavailable.
+
+  Variables:
+    current_version  (object, required) — current Boost release (from context processor)
+
+  Usage:
+    {% include "v3/includes/header/_header_search_bar.html" %}
+{% endcomment %}
+<search class="header__search-bar">
+  <button type="button"
+          id="gecko-search-button"
+          class="header__search-input-trigger"
+          data-current-boost-version="{{ current_version.stripped_boost_url_slug }}"
+          data-theme-mode="light"
+          data-font-family="var(--font-sans)">
+    <span class="header__search-icon" aria-hidden="true">
+      {% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
+    </span>
+    Search
+  </button>
+  <span class="header__search-kbd" aria-hidden="true">CTRL+K</span>
+  <noscript>
+    <style>
+      #gecko-search-button,
+      .header__search-kbd { display: none; }
+      .header__search-bar > noscript { display: contents; }
+    </style>
+    <span class="header__search-input-trigger" aria-disabled="true">
+      <span class="header__search-icon" aria-hidden="true">
+        {% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
+      </span>
+      Search is not available with JS disabled
+    </span>
+  </noscript>
+</search>