Make scrollable code blocks and cell output keyboard-focusable in HTML output

news/changelog-1.11.md

@@ -15,6 +15,7 @@ All changes included in 1.11:
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Add a distinct, localizable `aria-label` to each navigation landmark of websites and books: the navbar (`Site`), the sidebar (`Section`, or `Site` when there is no navbar), the narrow-viewport toolbar (`Toolbar`), the previous/next page navigation (`Page`), and the breadcrumbs (`Breadcrumbs`) (previously hardcoded English `breadcrumb`). The new `navigation-*-label` language keys can be overridden with `language:` metadata.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Translate the new `navigation-*-label` keys in all 33 built-in language files. The values are drawn from existing human-translated interface strings (LibreOffice, GNOME, Wikidata) and each one carries a comment naming its source; values that were adapted rather than used verbatim are marked `needs review`.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Label the table of contents `<nav>` with its localized title (`aria-labelledby`), in `html` and `revealjs` output, so assistive technology can tell it apart from other navigation landmarks.
+- ([#14378](https://github.com/quarto-dev/quarto-cli/issues/14378)): Make scrollable code blocks and cell output keyboard-focusable in HTML output, so keyboard users can Tab to them and scroll with the arrow keys (axe rule `scrollable-region-focusable`, WCAG 2.1.1). While a region overflows it gets `tabindex="0"`, `role="group"`, and a localized `aria-label` (new `scrollable-code-label` and `scrollable-output-label` language keys, translated in all 34 built-in language files); when it fits again the attributes are removed. Chrome and Firefox already focus such regions natively; this adds Safari coverage and an accessible name.
 
 ## Formats
 

src/config/constants.ts

@@ -304,6 +304,8 @@ export const kToggleSidebar = "toggle-sidebar";
 export const kToggleDarkMode = "toggle-dark-mode";
 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 kNavigationSiteLabel = "navigation-site-label";
 export const kNavigationSectionLabel = "navigation-section-label";
@@ -445,6 +447,8 @@ export const kLanguageDefaultsKeys = [
   kNavigationToolbarLabel,
   kNavigationPageLabel,
   kNavigationBreadcrumbsLabel,
+  kScrollableCodeLabel,
+  kScrollableOutputLabel,
   kCopyButtonTooltip,
   kCopyButtonTooltipSuccess,
   kBackToTop,

src/config/types.ts

@@ -194,6 +194,8 @@ import {
   kRepoActionLinksIssue,
   kRepoActionLinksSource,
   kResourcePath,
+  kScrollableCodeLabel,
+  kScrollableOutputLabel,
   kSearchClearButtonTitle,
   kSearchCopyLinkTitle,
   kSearchDetatchedCancelButtonTitle,
@@ -713,6 +715,8 @@ export interface FormatLanguage {
   [kNavigationToolbarLabel]?: string;
   [kNavigationPageLabel]?: string;
   [kNavigationBreadcrumbsLabel]?: string;
+  [kScrollableCodeLabel]?: string;
+  [kScrollableOutputLabel]?: string;
   [kSearchMatchingDocumentsText]?: string;
   [kSearchCopyLinkTitle]?: string;
   [kSearchMoreMatchText]?: string;

src/format/html/format-html.ts

@@ -462,6 +462,11 @@ export async function htmlFormatExtras(
   // Add localization strings
   options.language = format.language;
 
+  // the scrollable-regions module in quarto.js reads its localized labels
+  // from a global set by the after-body script; quarto.js only ships with
+  // bootstrap formats
+  options.scrollableRegions = bootstrap;
+
   // anchors if required
   if (options.anchors) {
     scripts.push({

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

@@ -10403,6 +10403,8 @@ var require_yaml_intelligence_resources = __commonJS({
               "copy-button-tooltip": "string",
               "copy-button-tooltip-success": "string",
               "skip-to-content": "string",
+              "scrollable-code-label": "string",
+              "scrollable-output-label": "string",
               "repo-action-links-edit": "string",
               "repo-action-links-source": "string",
               "repo-action-links-issue": "string",
@@ -25589,12 +25591,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 218300,
+        _internalId: 218304,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 218292,
+            _internalId: 218296,
             type: "enum",
             enum: [
               "png",
@@ -25610,7 +25612,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 218299,
+            _internalId: 218303,
             type: "anyOf",
             anyOf: [
               {

src/resources/editor/tools/yaml/yaml-intelligence-resources.json

@@ -3371,6 +3371,8 @@
           "copy-button-tooltip": "string",
           "copy-button-tooltip-success": "string",
           "skip-to-content": "string",
+          "scrollable-code-label": "string",
+          "scrollable-output-label": "string",
           "repo-action-links-edit": "string",
           "repo-action-links-source": "string",
           "repo-action-links-issue": "string",
@@ -18557,12 +18559,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 218300,
+    "_internalId": 218304,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 218292,
+        "_internalId": 218296,
         "type": "enum",
         "enum": [
           "png",
@@ -18578,7 +18580,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 218299,
+        "_internalId": 218303,
         "type": "anyOf",
         "anyOf": [
           {

src/resources/formats/html/esbuild-analysis-cache.json

@@ -2,7 +2,7 @@
   "quarto.js": {
     "inputs": {
       "quarto.js": {
-        "bytes": 26830,
+        "bytes":    27594,
         "imports": [],
         "format": "esm"
       }
@@ -14,16 +14,21 @@
             "path": "./tabsets/tabsets.js",
             "kind": "import-statement",
             "external": true
+          },
+          {
+            "path": "./scrollable-regions/scrollable-regions.js",
+            "kind": "import-statement",
+            "external": true
           }
         ],
         "exports": [],
         "entryPoint": "quarto.js",
         "inputs": {
           "quarto.js": {
-            "bytesInOutput": 22313
+            "bytesInOutput": 22490
           }
         },
-        "bytes": 22313
+        "bytes": 22490
       }
     }
   }

src/resources/formats/html/quarto.js

@@ -1,4 +1,5 @@
 import * as tabsets from "./tabsets/tabsets.js";
+import * as scrollableRegions from "./scrollable-regions/scrollable-regions.js";
 
 const sectionChanged = new CustomEvent("quarto-sectionChanged", {
   detail: {},
@@ -34,21 +35,25 @@ const layoutMarginEls = () => {
 };
 
 window.document.addEventListener("DOMContentLoaded", function (_event) {
-  // Recompute the position of margin elements anytime the body size changes
+  // Recompute the position of margin elements and re-sync scrollable regions
+  // anytime the body size changes. Trailing, so a resize that ends inside the
+  // wait is still handled rather than left at a size the page no longer has.
   if (window.ResizeObserver) {
     const resizeObserver = new window.ResizeObserver(
       throttle(() => {
         layoutMarginEls();
+        scrollableRegions.syncScrollableRegions();
         if (
           window.document.body.getBoundingClientRect().width < 990 &&
           isReaderMode()
         ) {
           quartoToggleReader();
         }
-      }, 50)
+      }, 50, true)
     );
     resizeObserver.observe(window.document.body);
   }
+  scrollableRegions.syncScrollableRegions();
 
   const tocEl = window.document.querySelector('nav.toc-active[role="doc-toc"]');
   const sidebarEl = window.document.getElementById("quarto-sidebar");
@@ -827,16 +832,31 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
 
 tabsets.init();
 
-function throttle(func, wait) {
+// With `trailing`, a call dropped during the wait runs once the wait ends, so
+// the last event of a burst is never lost.
+function throttle(func, wait, trailing = false) {
   let waiting = false;
+  let pending = null;
+  const release = function () {
+    if (pending) {
+      const [context, args] = pending;
+      pending = null;
+      func.apply(context, args);
+      setTimeout(release, wait);
+    } else {
+      waiting = false;
+    }
+  };
   return function () {
-    if (!waiting) {
-      func.apply(this, arguments);
-      waiting = true;
-      setTimeout(function () {
-        waiting = false;
-      }, wait);
+    if (waiting) {
+      if (trailing) {
+        pending = [this, arguments];
+      }
+      return;
     }
+    func.apply(this, arguments);
+    waiting = true;
+    setTimeout(release, wait);
   };
 }