fix(a11y): accessible labels for close button, MDN icons; fix Firefox theme toggle

src/core/mdn-annotation.js

@@ -211,10 +211,10 @@ function findElements(data) {
  */
 function getEngineSupportIcons(engines) {
   if (engines.length === 3) {
-    return html`<span title="${l10n.inAllEngines}">✅</span>`;
+    return html`<span role="img" aria-label="${l10n.inAllEngines}">✅</span>`;
   }
   if (engines.length < 2) {
-    return html`<span title="${l10n.inSomeEngines}">🚫</span>`;
+    return html`<span role="img" aria-label="${l10n.inSomeEngines}">🚫</span>`;
   }
   return html`<span>&emsp;</span>`;
 }

src/core/ui.js

@@ -50,7 +50,7 @@ const menu = html`<ul
 const closeButton = html`<button
   class="close-button"
   onclick=${() => ui.closeModal()}
-  title="Close"
+  aria-label="Close"
 >
   ❌
 </button>`;

src/w3c/style.js

@@ -126,16 +126,19 @@ export function run(conf) {
     );
     document.head.appendChild(colorScheme);
   }
-  if (colorScheme?.content.includes("dark")) {
-    const darkModeStyleUrl = getStyleUrl("dark.css");
-    document.head.appendChild(
-      html`<link
-        rel="stylesheet"
-        href="${darkModeStyleUrl.href}"
-        media="(prefers-color-scheme: dark)"
-      />`
-    );
-    // As required by W3C Pub Rules.
+  // Always add the dark stylesheet so fixup.js's updateTheme() can find it.
+  // Use media="not all" for light-only specs so it's present but never applied (#5200).
+  const darkModeStyleUrl = getStyleUrl("dark.css");
+  const isDark = colorScheme?.content.includes("dark");
+  document.head.appendChild(
+    html`<link
+      rel="stylesheet"
+      href="${darkModeStyleUrl.href}"
+      media="${isDark ? "(prefers-color-scheme: dark)" : "not all"}"
+    />`
+  );
+  if (isDark) {
+    // As required by W3C Pub Rules, dark stylesheet must be last.
     sub("beforesave", styleMover(darkModeStyleUrl));
   }
 }

tests/spec/core/mdn-annotation-spec.js

@@ -86,7 +86,8 @@ describe("Core - MDN Annotation", () => {
     const iconBad = poorSupportedMdnPanel.querySelector(
       "details summary span:nth-child(2)"
     );
-    expect(iconBad.title).toContain("has limited support");
+    expect(iconBad.getAttribute("role")).toBe("img");
+    expect(iconBad.getAttribute("aria-label")).toContain("has limited support");
     expect(iconBad.textContent).toBe("🚫");
     const textBad = poorSupportedMdnPanel.querySelector("details p");
     expect(textBad.classList).toContain("engines-some");
@@ -96,7 +97,8 @@ describe("Core - MDN Annotation", () => {
     const iconGood = goodSupportedMdnPanel.querySelector(
       "details summary span:nth-child(2)"
     );
-    expect(iconGood.title).toContain("all major engines");
+    expect(iconGood.getAttribute("role")).toBe("img");
+    expect(iconGood.getAttribute("aria-label")).toContain("all major engines");
     expect(iconGood.textContent).toBe("✅");
     const textGood = goodSupportedMdnPanel.querySelector("details p");
     expect(textGood.classList).toContain("engines-all");

tests/spec/core/ui-spec.js

@@ -32,6 +32,19 @@ describe("Core - UI", () => {
     expect(window.getComputedStyle(menu).display).toBe("none");
   });
 
+  it("close button has accessible label", async () => {
+    const doc = await makeRSDoc(makeStandardOps({ group: "webapps" }));
+    const ui = doc.defaultView.respecUI;
+    ui.freshModal(
+      "Test",
+      doc.createTextNode("content"),
+      doc.createElement("button")
+    );
+    const closeButton = doc.querySelector(".close-button");
+    expect(closeButton).toBeTruthy();
+    expect(closeButton.getAttribute("aria-label")).toBe("Close");
+  });
+
   it("shows errors", async () => {
     const doc = await makeRSDoc(makeStandardOps({ group: "webapps" }));
     const ui = doc.defaultView.respecUI;

tests/spec/w3c/style-spec.js

@@ -221,6 +221,18 @@
     expect(elem.content).toBe("light");
   });
 
+  it("always adds dark stylesheet link so fixup.js theme toggle works", async () => {
+    // Light-only specs must have dark.css link present so fixup.js updateTheme()
+    // doesn't throw a TypeError when accessing darkCss.disabled (issue #5200).
+    const ops = makeStandardOps(); // default: light-only color scheme
+    const doc = await makeRSDoc(ops);
+    const link = doc.querySelector(
+      `link[href="https://www.w3.org/StyleSheets/TR/2021/dark.css"]`
+    );
+    expect(link).toBeTruthy();
+    expect(link.media).toBe("not all");
+  });
+
   it("adds dark mode stylesheet", async () => {
     const ops = makeStandardOps();
     const doc = await makeRSDoc(ops, "spec/core/color-scheme.html");
@@ -229,6 +241,7 @@
       `link[href="https://www.w3.org/StyleSheets/TR/2021/dark.css"]`
     );
     expect(link).toBeTruthy();
+    expect(link.media).toBe("(prefers-color-scheme: dark)");
   });
 
   it("adds darkmode stylesheet at the end", async () => {