Don't set aria-expanded on the sidebar click area and backdrop

news/changelog-1.11.md

@@ -51,6 +51,7 @@ All changes included in 1.11:
 - ([#15129](https://github.com/quarto-dev/quarto-cli/issues/15129)): Fix default listings rendering an empty, focusable metadata link for posts with no date, author or other listed field to show, flagged by axe-core (`link-name`).
 - ([#15159](https://github.com/quarto-dev/quarto-cli/issues/15159), [#15160](https://github.com/quarto-dev/quarto-cli/issues/15160)): Fix the `revealjs` speaker view's Layout selector having no accessible name or visible keyboard focus, and its current slide, upcoming slide, time, and notes areas not being named regions. Changing layouts no longer forwards control keys to the slides, and the slide navigation buttons no longer introduce an unrelated complementary landmark. (author: @jooyoungseo)
 - ([#15211](https://github.com/quarto-dev/quarto-cli/issues/15211)): Fix default and grid listings rendering empty, focusable links when an item description contains a link, flagged by axe-core (`link-name`), a regression introduced in v1.7.7. Links in descriptions are shown as text again, so the whole description links to the item.
+- ([#15229](https://github.com/quarto-dev/quarto-cli/issues/15229)): On narrow screens, the secondary bar's click area and the sidebar backdrop no longer get `aria-expanded` when the sidebar opens or closes (axe `aria-allowed-attr`). Both now forward clicks to the sidebar toggle button, so tapping the backdrop also restores headroom.
 
 ## Formats
 

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

@@ -71,12 +71,10 @@ const navbarTocRight = nav['toc-location'] === "right" || nav['toc-location'] ==
       </button>
       <% if (nav.showBreadCrumbs) { %>
         <h1 class="quarto-secondary-nav-title no-breadcrumbs"></h1>
-        <a class="flex-grow-1" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"
-        onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">      
+        <a class="flex-grow-1" onclick="this.closest('.quarto-secondary-nav').querySelector('.quarto-btn-toggle').click();">      
         </a>
       <% } else { %>
-        <a class="flex-grow-1 no-decor" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"
-        onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">      
+        <a class="flex-grow-1 no-decor" onclick="this.closest('.quarto-secondary-nav').querySelector('.quarto-btn-toggle').click();">      
           <h1 class="quarto-secondary-nav-title"></h1>
         </a>     
       <% }  %>

src/resources/projects/website/templates/sidebar.ejs

@@ -97,4 +97,4 @@
   <% } %>
 
 </nav>
-<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" ></div>
+<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" onclick="document.querySelector('.quarto-secondary-nav .quarto-btn-toggle')?.click();"></div>

tests/docs/playwright/website/sidebar-collapse-aria/_quarto.yml

@@ -0,0 +1,11 @@
+project:
+  type: website
+
+website:
+  title: "sidebar-collapse-aria"
+  sidebar:
+    contents:
+      - index.qmd
+      - about.qmd
+
+format: html

tests/docs/playwright/website/sidebar-collapse-aria/about.qmd

@@ -0,0 +1,5 @@
+---
+title: "About"
+---
+
+About page.

tests/docs/playwright/website/sidebar-collapse-aria/index.qmd

@@ -0,0 +1,5 @@
+---
+title: "Home"
+---
+
+Home page.

tests/integration/playwright/tests/html-sidebar-collapse-aria.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from "@playwright/test";
+import { getUrl } from "../src/utils";
+
+// On a narrow screen only the sidebar toggle button is a collapse control.
+// The click area in the secondary bar and the backdrop behind the open
+// sidebar forward their clicks to that button, so Bootstrap must not write
+// aria-expanded on them (axe aria-allowed-attr).
+
+test.use({ viewport: { width: 500, height: 800 } });
+
+const url = "website/sidebar-collapse-aria/_site/index.html";
+
+test("only the toggle button carries aria-expanded", async ({ page }) => {
+  await page.goto(getUrl(url), { waitUntil: "load" });
+  const toggle = page.locator(".quarto-secondary-nav .quarto-btn-toggle");
+  const clickArea = page.locator(".quarto-secondary-nav a.flex-grow-1");
+  const glass = page.locator("#quarto-sidebar-glass");
+  const sidebar = page.locator("#quarto-sidebar");
+
+  await expect(toggle).toHaveAttribute("aria-expanded", "false");
+
+  await toggle.click();
+  await expect(sidebar).toHaveClass(/\bshow\b/);
+  await expect(toggle).toHaveAttribute("aria-expanded", "true");
+  await expect(clickArea).not.toHaveAttribute("aria-expanded");
+  await expect(glass).not.toHaveAttribute("aria-expanded");
+
+  // Tapping the backdrop closes the sidebar through the button.
+  await glass.click({ position: { x: 480, y: 400 } });
+  await expect(sidebar).not.toHaveClass(/\bshow\b/);
+  await expect(toggle).toHaveAttribute("aria-expanded", "false");
+  await expect(clickArea).not.toHaveAttribute("aria-expanded");
+  await expect(glass).not.toHaveAttribute("aria-expanded");
+});
+
+test("the secondary bar click area opens the sidebar", async ({ page }) => {
+  await page.goto(getUrl(url), { waitUntil: "load" });
+  const toggle = page.locator(".quarto-secondary-nav .quarto-btn-toggle");
+  const clickArea = page.locator(".quarto-secondary-nav a.flex-grow-1");
+
+  await clickArea.click();
+  await expect(page.locator("#quarto-sidebar")).toHaveClass(/\bshow\b/);
+  await expect(toggle).toHaveAttribute("aria-expanded", "true");
+  await expect(clickArea).not.toHaveAttribute("aria-expanded");
+});