Move navbar search after nav links so tab order matches visual order (#14754)

In a collapsible navbar, the search control came right after the brand
in the DOM, while CSS flex `order` places it at the far right. Keyboard
and screen-reader users reached search before the navigation links.
The navsearch partial now comes at the end of the collapse branch in
nav-before-body.ejs, after the nav links and tools, so tab order runs
brand, nav links, tools, search (WCAG technique C27).

The rendered layout does not change: every navbar child has its own
CSS `order` at each breakpoint, and search stays outside the collapse
region. Custom CSS or JS that expects `#quarto-search` to come before
the nav links in the DOM, such as sibling selectors, needs updating.

- Add a smoke-all test checking that search follows the collapse
  region and the tools in the navbar.

Fixes #7058

Author: cwickham

news/changelog-1.11.md

@@ -12,6 +12,7 @@ All changes included in 1.11:
 ## Accessibility
 
 - ([#730](https://github.com/quarto-dev/quarto-cli/issues/730)): Fix keyboard navigation of tabsets in HTML documents without Bootstrap (`theme: none`): Tab now moves from the selected tab into its panel instead of selecting the next tab, and the arrow keys switch tabs.
+- ([#7058](https://github.com/quarto-dev/quarto-cli/issues/7058)): Move the navbar search control after the navigation links and tools in the DOM so keyboard and screen-reader order matches the visual order. The rendered layout is unchanged (navbar positioning is controlled by CSS `order`), but custom CSS or JS that relied on `#quarto-search` preceding the navbar links in the DOM may need updating.
 - ([#13463](https://github.com/quarto-dev/quarto-cli/issues/13463)): The dark/light mode toggle is now a switch (`button` with `role="switch"`, `aria-checked`, and a localized `aria-label`) instead of a link.
 - ([#14615](https://github.com/quarto-dev/quarto-cli/issues/14615)): Fix invalid `role="menu"` on the website navbar's collapse toggle button, flagged by axe-core (`aria-allowed-role`) and WAVE (`aria-role-mismatch`).
 - ([#12116](https://github.com/quarto-dev/quarto-cli/issues/12116), [#4935](https://github.com/quarto-dev/quarto-cli/issues/4935)): Website sidebar section toggles are now `<button>` elements, so they are keyboard accessible and properly announced.

src/resources/projects/website/templates/nav-before-body.ejs

@@ -26,9 +26,6 @@ const navbarTocRight = nav['toc-location'] === "right" || nav['toc-location'] ==
       }) %>
       <% if (nav.navbar.left || nav.navbar.right) { %>  
         <% if (nav.navbar.collapse) { %>
-          <% if (nav.navbar.search) { %>
-            <% partial('navsearch.ejs',  { classes: '', language: nav.language }) %>
-          <% } %>
           <% partial('navtoggle.ejs', { language: nav.language }) %>
           <% partial('navcollapse.ejs') %>
             <% partial('navitems.ejs', { align: 'start', items: nav.navbar.left, draftMode: nav.draftMode}) %>
@@ -40,6 +37,9 @@ const navbarTocRight = nav['toc-location'] === "right" || nav['toc-location'] ==
           <% if (!nav.navbar["tools-collapse"]) { %> 
             <% partial('navtools.ejs', { align: 'none', tools: nav.navbar.tools, darkToggle: nav.navbar.darkToggle, readerToggle: nav.navbar.readerToggle, search: false, className: navbarToolsClass, language: nav.language }) %>
           <% } %>
+          <% if (nav.navbar.search) { %>
+            <% partial('navsearch.ejs',  { classes: '', language: nav.language }) %>
+          <% } %>
         <% } else { %>
           <% partial('navitems.ejs', { align: 'start', items: nav.navbar.left, draftMode: nav.draftMode}) %>
           <% partial('navitems.ejs', { align: 'end', items: nav.navbar.right, draftMode: nav.draftMode }) %>

tests/docs/smoke-all/website/navbar-search-order/.gitignore

@@ -0,0 +1,5 @@
+/.quarto/
+*.html
+search.json
+site_libs/
+**/*.quarto_ipynb

tests/docs/smoke-all/website/navbar-search-order/_quarto.yml

@@ -0,0 +1,14 @@
+project:
+  type: website
+  output-dir: .
+
+website:
+  title: "Website"
+  search: true
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+    tools:
+      - icon: github
+        href: https://github.com/quarto-dev/quarto-cli

tests/docs/smoke-all/website/navbar-search-order/index.qmd

@@ -0,0 +1,20 @@
+---
+title: "Website"
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          # search comes after the collapse (nav links) and the tools
+          - '#navbarCollapse ~ #quarto-search'
+          - '.quarto-navbar-tools ~ #quarto-search'
+        -
+          # search must not precede the nav links or the toggler
+          - '#quarto-search ~ #navbarCollapse'
+          - '#quarto-search ~ .navbar-toggler'
+---
+
+Regression test for issue 7058: in the navbar, the search div must come last
+in the DOM — after the toggler, the collapsible nav links, and the tools — so
+that keyboard/screen-reader order matches the visual order (the CSS `order`
+properties place search rightmost at every breakpoint; WCAG technique C27).