fix(a11y): name the modal close button and MDN engine icons for AT

src/core/mdn-annotation.js

@@ -215,12 +215,12 @@ 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>`;
+  return html`<span aria-hidden="true">&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>`;

tests/data/mdn-annotation/payment-request.json

@@ -204,6 +204,14 @@
       "title": "PaymentRequest.prototype.id"
     }
   ],
+  "dom-paymentrequest-show": [
+    {
+      "slug": "API/PaymentRequest/show",
+      "summary": "The show() method of the PaymentRequest interface instructs the user agent to begin the process of showing the payment interface to the user.",
+      "engines": ["blink", "webkit"],
+      "title": "PaymentRequest.prototype.show"
+    }
+  ],
   "custom-method": [
     {
       "slug": "API/PaymentRequest/custom",

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,12 +97,23 @@ 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");
   });
 
+  it("hides the spacer icon of features in two engines from assistive technology", () => {
+    const { previousElementSibling: partialSupportMdnPanel } =
+      doc.getElementById("dom-paymentrequest-show");
+    const icon = partialSupportMdnPanel.querySelector(
+      "details summary span:nth-child(2)"
+    );
+    expect(icon.getAttribute("aria-hidden")).toBe("true");
+    expect(icon.textContent.trim()).toBe("");
+  });
+
   it("doesn't attach MDNbox if ID is not in the spec", () => {
     const {
       previousElementSibling: { classList },

tests/spec/core/mdn-annotation.html

@@ -26,7 +26,7 @@ <h2>
           <dfn>id</dfn> attribute
         </h2>
       </section>
-      <section>
+      <section id="dom-paymentrequest-show">
         <h2>
           <dfn>show()</dfn> method
         </h2>

tests/spec/core/ui-spec.js

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