PLANET 8030: Make the text input the first focusable element in the search field

- Move the search icon position.
- Adjust the CSS.

Author: mardelnet

assets/src/scss/layout/navbar/_search.scss

@@ -165,7 +165,6 @@
 
   @include x-large-and-up {
     display: inline-block;
-    margin-inline-end: 0;
   }
 }
 

templates/search-form.twig

@@ -1,30 +1,31 @@
 <form id="search_form" class="form nav-search-form" action="{{ data_nav_bar.home_url }}">
     {% set search_label = __( 'Search', 'planet4-master-theme' ) %}
-    <button class="nav-search-btn"
-            aria-label="{{ __( 'Search', 'planet4-master-theme' ) }}"
-            type="submit"
-            data-ga-category="Menu Navigation"
-            data-ga-action="Search"
-            data-ga-label="{{ page_category }}"
-    >
-        {{ search_icon|replace({'<svg': "<svg " ~ data_ga_attrs })|raw }}
-        <span class="visually-hidden"
-              data-ga-category="Menu Navigation"
-              data-ga-action="Search"
-              data-ga-label="{{ page_category }}"
-        >
-                    {{ search_label }}
-            </span>
-    </button>
     <input id="{{ search_input_id }}"
-           type="search"
-           name="s"
-           class="form-control"
-           placeholder="{{ search_label }}"
-           value="{{ data_nav_bar.search_query|e('wp_kses_post')|raw }}"
-           aria-label="{{ __( 'Search input', 'planet4-master-theme' ) }}"/>
+        type="search"
+        name="s"
+        class="form-control"
+        placeholder="{{ search_label }}"
+        value="{{ data_nav_bar.search_query|e('wp_kses_post')|raw }}"
+        aria-label="{{ __( 'Search input', 'planet4-master-theme' ) }}"
+    />
     <input id="orderby" type="hidden" name="orderby" value="{{ selected_sort ?? default_sort }}"/>
     <button class="nav-search-clear" aria-label="{{ __( 'Clear search', 'planet4-master-theme' ) }}" type="button">
         <span class="visually-hidden">{{ __( 'Clear search', 'planet4-master-theme' ) }}</span>
     </button>
+    <button class="nav-search-btn"
+        aria-label="{{ __( 'Search', 'planet4-master-theme' ) }}"
+        type="submit"
+        data-ga-category="Menu Navigation"
+        data-ga-action="Search"
+        data-ga-label="{{ page_category }}"
+    >
+        {{ search_icon|replace({'<svg': "<svg " ~ data_ga_attrs })|raw }}
+            <span class="visually-hidden"
+                data-ga-category="Menu Navigation"
+                data-ga-action="Search"
+                data-ga-label="{{ page_category }}"
+            >
+                {{ search_label }}
+            </span>
+    </button>
 </form>