fix(revealjs): name the slide menu button for screen readers (#14251)

The Reveal.js slide menu button is an icon-only link with no accessible
name, so it failed the axe `link-name` rule (WCAG 2.4.4). The
`menu-ready` handler now sets its `aria-label` from a new
`revealjs-menu-button-label` language key ("Slide menu"), so authors can
translate it through `language:`. The label applies to normal decks and to
`delay-init: true` builds.

- Set the button's `aria-label` in `quarto-menu.js`, next to the
  `inert` handling from #15011
- Add `revealjs-menu-button-label` to `_language.yml`; the other
  translations fall back to English until they add it
- Escape `<` in config values written into the
  `Reveal.initialize` script, so a value containing `</script>` cannot
  end it early
- Insert that config with a replacer function, so `$&`, `$'` and other
  replacement patterns in a value are written literally

Fixes #14249

Author: mcanouil

news/changelog-1.11.md

@@ -20,6 +20,7 @@ All changes included in 1.11:
 - ([#5514](https://github.com/quarto-dev/quarto-cli/issues/5514)): Fix `fig-alt` being ignored in `docx` output. Images and figures, including computational figures, now use it as their Word alternative text instead of the caption or an empty description, and the visible caption is unchanged. (author: @jooyoungseo)
 - ([#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.
+- ([#14249](https://github.com/quarto-dev/quarto-cli/issues/14249)): Fix the `revealjs` slide menu button having no accessible name for screen readers. The name can be translated with the `revealjs-menu-button-label` language key. (author: @mcanouil)
 - ([#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.
 - ([#14774](https://github.com/quarto-dev/quarto-cli/issues/14774)): Fix missing keyboard focus indicator on the code tools button and on a website's sidebar toggle and sidebar search buttons.

src/config/constants.ts

@@ -306,6 +306,7 @@ export const kToggleReaderMode = "toggle-reader-mode";
 export const kToggleNavigation = "toggle-navigation";
 export const kScrollableCodeLabel = "scrollable-code-label";
 export const kScrollableOutputLabel = "scrollable-output-label";
+export const kRevealjsMenuButtonLabel = "revealjs-menu-button-label";
 
 export const kNavigationSiteLabel = "navigation-site-label";
 export const kNavigationSectionLabel = "navigation-section-label";
@@ -449,6 +450,7 @@ export const kLanguageDefaultsKeys = [
   kNavigationBreadcrumbsLabel,
   kScrollableCodeLabel,
   kScrollableOutputLabel,
+  kRevealjsMenuButtonLabel,
   kCopyButtonTooltip,
   kCopyButtonTooltipSuccess,
   kBackToTop,

src/config/types.ts

@@ -196,6 +196,7 @@ import {
   kResourcePath,
   kScrollableCodeLabel,
   kScrollableOutputLabel,
+  kRevealjsMenuButtonLabel,
   kSearchClearButtonTitle,
   kSearchCopyLinkTitle,
   kSearchDetatchedCancelButtonTitle,
@@ -717,6 +718,7 @@ export interface FormatLanguage {
   [kNavigationBreadcrumbsLabel]?: string;
   [kScrollableCodeLabel]?: string;
   [kScrollableOutputLabel]?: string;
+  [kRevealjsMenuButtonLabel]?: string;
   [kSearchMatchingDocumentsText]?: string;
   [kSearchCopyLinkTitle]?: string;
   [kSearchMoreMatchText]?: string;

src/format/reveal/format-reveal-plugin.ts

@@ -6,7 +6,11 @@
 
 import { ensureDirSync, existsSync } from "../../deno_ral/fs.ts";
 import { basename, join } from "../../deno_ral/path.ts";
-import { kIncludeInHeader, kSelfContained } from "../../config/constants.ts";
+import {
+  kIncludeInHeader,
+  kRevealjsMenuButtonLabel,
+  kSelfContained,
+} from "../../config/constants.ts";
 
 import { error } from "../../deno_ral/log.ts";
 
@@ -383,6 +387,9 @@ function revealMenuPlugin(format: Format) {
           content: revealMenuTools(format),
         }],
         openButton: format.metadata[kRevealMenu] !== false,
+        // read by quarto-menu.js, which names the button with it
+        openButtonLabel: format.language[kRevealjsMenuButtonLabel] ||
+          "Slide menu",
       },
     },
   };

src/format/reveal/format-reveal.ts

@@ -546,26 +546,30 @@ const fixupRevealJsInitialization = (
         );
       }
 
+      // Config values can hold author-supplied text, such as metadata or
+      // language strings, so `<` is escaped: a value holding `</script>` would
+      // otherwise close this script early.
+      const configValue = (value: unknown) =>
+        (JSON.stringify(value) ?? "undefined").replace(/</g, "\\u003c");
+
       // Write any additional configuration of reveal
       const configJs: string[] = [];
       Object.keys(extraConfig).forEach((key) => {
-        configJs.push(
-          `'${key}': ${JSON.stringify(extraConfig[key])}`,
-        );
+        configJs.push(`'${key}': ${configValue(extraConfig[key])}`);
       });
 
       // Plugin initialization
       Object.keys(pluginInit.revealConfig).forEach((key) => {
-        configJs.push(
-          `'${key}': ${JSON.stringify(pluginInit.revealConfig[key])}`,
-        );
+        configJs.push(`'${key}': ${configValue(pluginInit.revealConfig[key])}`);
       });
 
       const configStr = configJs.join(",\n");
 
+      // A replacer function inserts configStr literally, so `$&` or `$'` in a
+      // config value is not read as a replacement pattern.
       scriptEl.innerText = scriptEl.innerText.replace(
         "Reveal.initialize({",
-        `Reveal.initialize({\n${configStr},\n`,
+        () => `Reveal.initialize({\n${configStr},\n`,
       );
     }
   }

src/resources/editor/tools/vs-code.mjs

@@ -10532,6 +10532,7 @@ var require_yaml_intelligence_resources = __commonJS({
               "skip-to-content": "string",
               "scrollable-code-label": "string",
               "scrollable-output-label": "string",
+              "revealjs-menu-button-label": "string",
               "repo-action-links-edit": "string",
               "repo-action-links-source": "string",
               "repo-action-links-issue": "string",
@@ -25826,12 +25827,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 221293,
+        _internalId: 221295,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 221285,
+            _internalId: 221287,
             type: "enum",
             enum: [
               "png",
@@ -25847,7 +25848,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 221292,
+            _internalId: 221294,
             type: "anyOf",
             anyOf: [
               {

src/resources/editor/tools/yaml/all-schema-definitions.json

@@ -3500,6 +3500,7 @@
           "skip-to-content": "string",
           "scrollable-code-label": "string",
           "scrollable-output-label": "string",
+          "revealjs-menu-button-label": "string",
           "repo-action-links-edit": "string",
           "repo-action-links-source": "string",
           "repo-action-links-issue": "string",
@@ -18794,12 +18795,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 221293,
+    "_internalId": 221295,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 221285,
+        "_internalId": 221287,
         "type": "enum",
         "enum": [
           "png",
@@ -18815,7 +18816,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 221292,
+        "_internalId": 221294,
         "type": "anyOf",
         "anyOf": [
           {

src/resources/editor/tools/yaml/web-worker.js

@@ -45,6 +45,18 @@ window.RevealMenuToolHandlers = {
   })
 };
 
+// The plugin's button is a bare `<a href="#">` holding only an icon, so give it
+// an accessible name from the language files. The plugin builds the button and
+// the menu in the same call, so the button exists whenever the menu does.
+// See https://github.com/quarto-dev/quarto-cli/issues/14249
+const labelMenuButton = function () {
+  const label = Reveal.getConfig().menu?.openButtonLabel;
+  const button = document.querySelector(".slide-menu-button a");
+  if (label && button && !button.hasAttribute("aria-label")) {
+    button.setAttribute("aria-label", label);
+  }
+};
+
 // Keep the slide menu out of the tab order and the accessibility tree while it
 // is closed. Closing only moves it off screen, so screen readers still read it,
 // and Chrome and Firefox make its slide list a Tab stop once the list scrolls.
@@ -65,6 +77,7 @@ document.addEventListener("menu-ready", function () {
 
   const menu = document.querySelector(".slide-menu");
   if (menu) {
+    labelMenuButton();
     followMenu(menu);
     return;
   }
@@ -76,6 +89,7 @@ document.addEventListener("menu-ready", function () {
     const builtMenu = container.querySelector(".slide-menu");
     if (builtMenu) {
       observer.disconnect();
+      labelMenuButton();
       followMenu(builtMenu);
     }
   });