Button Example: Add AT support tables from ARIA-AT (pull #2569)

Adds a section to the button example page after the source code section that shows a table of screen reader support levels for the example. The data is pulled from the aria-at project (aria-at.w3.org) and displayed in an iframe.

---------

Co-authored-by: Howard Edwards <[email protected]>
Co-authored-by: Matt King <[email protected]>

Author: 3 people

content/patterns/button/examples/button.html

@@ -195,6 +195,27 @@ <h2 id="sc1_label">HTML Source Code</h2>
           sourceCode.make();
         </script>
       </section>
+
+      <section id="at-support">
+        <h2>Assistive Technology Support</h2>
+        <h3>Command Button</h3>
+        <iframe
+          class="support-levels-command-button"
+          src="https://aria-at.w3.org/embed/reports/command-button"
+          height="100"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+
+        <h3>Toggle Button</h3>
+        <iframe
+          class="support-levels-toggle-button"
+          src="https://aria-at.w3.org/embed/reports/toggle-button"
+          height="100"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+      </section>
     </main>
   </body>
 </html>

content/shared/js/app.js

@@ -12,6 +12,10 @@
   // Rewrite links so they point to the proper spec document
   window.addEventListener('DOMContentLoaded', resolveSpecLinks, false);
 
+  // Support levels iframes should not show scrollbars, so a message with the
+  // correct height will be posted from the iframe.
+  window.addEventListener('message', fixIframeHeight);
+
   async function addExampleUsageWarning() {
     // Determine we are on an example page
     if (!document.location.href.match(/examples\/[^/]+\.html/)) return;
@@ -43,4 +47,14 @@
     const fixSpecLink = specLinks({ specStatus: 'ED' });
     document.querySelectorAll('a[href]').forEach(fixSpecLink);
   }
+
+  function fixIframeHeight(event) {
+    const data = event.data;
+    if (!data.iframe || !data.height || isNaN(data.height)) {
+      return;
+    }
+    const iframe = document.querySelector(`.${data.iframe}`);
+    if (!iframe) return;
+    iframe.style.height = data.height + 'px';
+  }
 })();

cspell.json

@@ -100,6 +100,7 @@
     "Hoyt",
     "IDREF",
     "IDREFS",
+    "iframes",
     "imgs",
     "Iskandar",
     "issie",