fix: link-external-newwindow: true not respected by default listing

news/changelog-1.11.md

@@ -20,6 +20,8 @@ All changes included in 1.11:
 - ([#3873](https://github.com/quarto-dev/quarto-cli/issues/3873), [#9003](https://github.com/quarto-dev/quarto-cli/issues/9003)): Honor `fig-alt` for Mermaid and Graphviz diagrams in HTML, revealjs, DOCX, and Typst output while preserving visible captions. (author: @jooyoungseo)
 - ([#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.
+- ([#9469](https://github.com/quarto-dev/quarto-cli/pull/9469)): Announce links that `link-external-newwindow` opens in a new tab to screen readers, with a visually hidden "(opens in a new tab)" that can be translated with the `link-external-newwindow-label` language key. (author: @mcanouil)
+- ([#9469](https://github.com/quarto-dev/quarto-cli/pull/9469)): Hide the empty thumbnail link of default listing items that have no image and no file, such as external items listed in `contents:`, from assistive technology and the tab order, as [#15066](https://github.com/quarto-dev/quarto-cli/issues/15066) already does for posts. (author: @mcanouil)
 - ([#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`).
@@ -114,6 +116,7 @@ All changes included in 1.11:
 
 ### Websites
 
+- ([#9468](https://github.com/quarto-dev/quarto-cli/issues/9468)): Fix listing items not opening in a new tab with `link-external-newwindow: true`, while keeping the external link icon off default and grid listing items. (author: @mcanouil)
 - ([#10756](https://github.com/quarto-dev/quarto-cli/issues/10756)): Fix the notebook preview of an embedded `.qmd` file going missing from the output directory when a project is rendered again, which broke its source notebook link.
 - ([#12014](https://github.com/quarto-dev/quarto-cli/issues/12014)): Fix `twitter-card` `image-width` and `image-height` being listed as options although Twitter Cards have no image size tags. They are no longer documented, and setting them prints a warning pointing to `open-graph`, where an image size is used. The size Quarto measures from a local image is no longer written as `twitter:image-height` and `twitter:image-width` tags, only as `og:image:height` and `og:image:width`.
 - ([#12016](https://github.com/quarto-dev/quarto-cli/issues/12016)): Fix `open-graph` `image-width` and `image-height` being dropped when `site-url` is set and Quarto cannot measure the image, such as a remote image. A size declared in the site `open-graph` options no longer applies when a page sets its own `image`, even the same file: declare `image-width` and `image-height` in the page `open-graph` options or in shared metadata such as `_metadata.yml`.

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 kLinkExternalNewwindowLabel = "link-external-newwindow-label";
 export const kRevealjsMenuButtonLabel = "revealjs-menu-button-label";
 
 export const kNavigationSiteLabel = "navigation-site-label";
@@ -450,6 +451,7 @@ export const kLanguageDefaultsKeys = [
   kNavigationBreadcrumbsLabel,
   kScrollableCodeLabel,
   kScrollableOutputLabel,
+  kLinkExternalNewwindowLabel,
   kRevealjsMenuButtonLabel,
   kCopyButtonTooltip,
   kCopyButtonTooltipSuccess,

src/config/types.ts

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

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",
+              "link-external-newwindow-label": "string",
               "revealjs-menu-button-label": "string",
               "repo-action-links-edit": "string",
               "repo-action-links-source": "string",
@@ -25827,12 +25828,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 221295,
+        _internalId: 221297,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 221287,
+            _internalId: 221289,
             type: "enum",
             enum: [
               "png",
@@ -25848,7 +25849,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 221294,
+            _internalId: 221296,
             type: "anyOf",
             anyOf: [
               {

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

@@ -3500,6 +3500,7 @@
           "skip-to-content": "string",
           "scrollable-code-label": "string",
           "scrollable-output-label": "string",
+          "link-external-newwindow-label": "string",
           "revealjs-menu-button-label": "string",
           "repo-action-links-edit": "string",
           "repo-action-links-source": "string",
@@ -18795,12 +18796,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 221295,
+    "_internalId": 221297,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 221287,
+        "_internalId": 221289,
         "type": "enum",
         "enum": [
           "png",
@@ -18816,7 +18817,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 221294,
+        "_internalId": 221296,
         "type": "anyOf",
         "anyOf": [
           {

src/resources/filters/llms/llms.lua

@@ -39,6 +39,7 @@ local removable_classes = {
     ["md"] = true,
     ["code-with-copy"] = true,
     ["no-external"] = true,
+    ["no-external-icon"] = true,
     ["no-anchor"] = true,
 }
 local removable_attributes = {

src/resources/formats/html/templates/quarto-html-after-body.ejs

@@ -226,11 +226,15 @@
       <% } else { %>
         var filterRegex = new RegExp('/' + window.location.host + '/');
       <% } %>
+      <% if (linkExternalNewwindow) { %>
+      const newWindowLabel = <%= JSON.stringify(language['link-external-newwindow-label']).replace(/</g, '\\u003c') %>;
+      <% } %>
       var isInternal = (href) => {
           return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
       }
       // Inspect non-navigation links and adorn them if external
-     var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
+      window.quartoDecorateExternalLinks = function (root) {
+     var links = (root || window.document).querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
       for (var i=0; i<links.length; i++) {
         const link = links[i];
         if (!isInternal(link.href)) {
@@ -245,9 +249,21 @@
             if (link.getAttribute("rel") === null) {
               link.setAttribute("rel", "noopener");
             }
+            if (!link.querySelector(".quarto-ext-newwindow")) {
+              var newWindowNote = window.document.createElement("span");
+              newWindowNote.classList.add("visually-hidden", "quarto-ext-newwindow");
+              // minimal HTML ships no .visually-hidden rule
+              newWindowNote.style.cssText = "border:0;clip:rect(0 0 0 0);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;";
+              newWindowNote.textContent = " " + newWindowLabel;
+              link.appendChild(newWindowNote);
+              if (link.hasAttribute("aria-label")) {
+                link.setAttribute("aria-label", link.getAttribute("aria-label") + " " + newWindowLabel);
+              }
+            }
           <% } %>
 
 
+          if (!link.classList.contains('no-external-icon')) {
           <% if (linkExternalIcon && typeof(linkExternalIcon) === 'string') { %> 
             // external icon, if provided
             var extIcon = window.document.createElement('i');
@@ -258,8 +274,11 @@
             // default icon
             link.classList.add("external");
           <% } %>
+          }
         }
       }
+      };
+      window.quartoDecorateExternalLinks(window.document);
 
 
 
@@ -786,4 +805,4 @@
   }).replace(/</g, '\\u003c') %>;
   </script>
 <% } %>
-
+

src/resources/language/_language.yml

@@ -101,6 +101,9 @@ navigation-breadcrumbs-label: "Breadcrumbs"
 scrollable-code-label: "Scrollable code"
 scrollable-output-label: "Scrollable output"
 
+# Announced by screen readers after a link that opens in a new tab (never shown as visible text).
+link-external-newwindow-label: "(opens in a new tab)"
+
 # Accessible name for the Reveal.js slide menu button (never shown as visible text).
 revealjs-menu-button-label: "Slide menu"
 

src/resources/projects/website/listing/item-default.ejs.md

@@ -54,7 +54,7 @@ print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLi
 <% if (fields.includes('image')) { %>
 
 ```{=html}
-<div class="thumbnail"><a href="<%- item.path %>" class="no-external">
+<div class="thumbnail"><a href="<%- item.path %>" class="no-external-icon"<%= !item.image && !item.outputHref ? ' aria-hidden="true" tabindex="-1"' : '' %>>
 <% if (item.image) { %>
 <%= listing.utilities.img(itemNumber, item.image, "thumbnail-image", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
 <% } else { %>
@@ -68,9 +68,9 @@ print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLi
 ::: {.body}
 
 <% if (fields.includes('title')) { %>
-<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external"><%= item.title %></a></h3>
+<h3 class="no-anchor listing-title"><a href="<%- item.path %>" class="no-external-icon"><%= item.title %></a></h3>
 <% if (fields.includes('subtitle') && hasText(item.subtitle)) { %>
-<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external"><%= item.subtitle %></a></div>
+<div class="listing-subtitle"><a href="<%- item.path %>" class="no-external-icon"><%= item.subtitle %></a></div>
 <% } %>
 <% } %>
 
@@ -89,7 +89,7 @@ print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLi
 <% if (fields.includes('description')) { %>
 
 ```{=html}
-<div class="delink listing-description"><a href="<%- item.path %>" class="no-external">
+<div class="delink listing-description"><a href="<%- item.path %>" class="no-external-icon">
 ```
 
 <%= item.description %>
@@ -107,7 +107,7 @@ print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLi
 <% if (hasMetadata(item)) { %>
 
 ```{=html}
-<a href="<%- item.path %>" class="no-external">
+<a href="<%- item.path %>" class="no-external-icon">
 ```
 
 <% } %>

src/resources/projects/website/listing/item-grid.ejs.md

@@ -40,7 +40,7 @@ return !["title", "image", "image-alt", "date", "author", "subtitle", "descripti
 ::: {.g-col-1 <%= listing.utilities.metadataAttrs(item) %> }
 
 ```{=html}
-<a href="<%- item.path %>" class="quarto-grid-link">
+<a href="<%- item.path %>" class="quarto-grid-link no-external-icon">
 <div class="quarto-grid-item card h-100 <%= `card-${align}` %><%= hideBorders ? ' borderless' : '' %>">
 ```
 

src/resources/projects/website/listing/quarto-listing.js

@@ -47,6 +47,7 @@ window["quarto-listing-loaded"] = () => {
     // and refresh any newly visible items.
     list.on("updated", function () {
       renderVisibleProgressiveImages(list);
+      window.quartoDecorateExternalLinks?.(list.list);
       setTimeout(() => refreshPaginationHandlers(listingId));
 
       // Show or hide the no matching message

src/resources/schema/definitions.yml

@@ -1528,6 +1528,7 @@
       skip-to-content: string
       scrollable-code-label: string
       scrollable-output-label: string
+      link-external-newwindow-label: string
       revealjs-menu-button-label: string
       repo-action-links-edit: string
       repo-action-links-source: string

src/resources/schema/json-schemas.json

@@ -1931,6 +1931,9 @@
           "scrollable-output-label": {
             "type": "string"
           },
+          "link-external-newwindow-label": {
+            "type": "string"
+          },
           "revealjs-menu-button-label": {
             "type": "string"
           },

src/resources/types/schema-types.ts

@@ -786,6 +786,7 @@ export type FormatLanguage = {
   "skip-to-content"?: string;
   "scrollable-code-label"?: string;
   "scrollable-output-label"?: string;
+  "link-external-newwindow-label"?: string;
   "revealjs-menu-button-label"?: string;
   "repo-action-links-edit"?: string;
   "repo-action-links-source"?: string;

src/resources/types/zod/schema-types.ts

@@ -783,6 +783,7 @@ export const ZodFormatLanguage = z.object({
   "skip-to-content": z.string(),
   "scrollable-code-label": z.string(),
   "scrollable-output-label": z.string(),
+  "link-external-newwindow-label": z.string(),
   "revealjs-menu-button-label": z.string(),
   "repo-action-links-edit": z.string(),
   "repo-action-links-source": z.string(),

tests/docs/playwright/listings/external-links/.gitignore

@@ -0,0 +1,3 @@
+/.quarto/
+**/*.quarto_ipynb
+/_site/

tests/docs/playwright/listings/external-links/_quarto.yml

@@ -0,0 +1,13 @@
+project:
+  type: website
+
+website:
+  title: "Testing external links in listings"
+
+link-external-newwindow: true
+link-external-icon: true
+
+format: html
+
+axe:
+  output: console

tests/docs/playwright/listings/external-links/grid.qmd

@@ -0,0 +1,16 @@
+---
+title: "External Links Test - Grid"
+listing:
+  id: grid-listing
+  contents:
+    - path: https://example.com/external-article
+      title: "External Article"
+      description: "An external article that should open in new window, see the [docs](https://example.org/docs)."
+    - path: local-post.qmd
+      title: "Local Post"
+      description: "A local post that should NOT open in new window."
+  type: grid
+---
+
+::: {#grid-listing}
+:::

tests/docs/playwright/listings/external-links/index.qmd

@@ -0,0 +1,16 @@
+---
+title: "External Links Test - Default"
+listing:
+  id: external-listing
+  contents:
+    - path: https://example.com/external-article
+      title: "External Article"
+      description: "An external article that should open in new window, see the [docs](https://example.org/docs)."
+    - path: local-post.qmd
+      title: "Local Post"
+      description: "A local post that should NOT open in new window."
+  type: default
+---
+
+::: {#external-listing}
+:::

tests/docs/playwright/listings/external-links/local-post.qmd

@@ -0,0 +1,5 @@
+---
+title: "Local Post"
+---
+
+Local content.

tests/docs/playwright/listings/external-links/minimal.qmd

@@ -0,0 +1,8 @@
+---
+title: "External Links Test - Minimal HTML"
+format:
+  html:
+    minimal: true
+---
+
+An [Outside](https://example.com/minimal) link.

tests/docs/playwright/listings/external-links/no-newwindow.qmd

@@ -0,0 +1,6 @@
+---
+title: "External Links Test - Option Absent"
+link-external-newwindow: false
+---
+
+An [Outside](https://example.com/outside) link.