Button Example: Add AT support tables from ARIA-AT

content/patterns/button/examples/button.html

@@ -195,6 +195,25 @@ <h2 id="sc1_label">HTML Source Code</h2>
           sourceCode.make();
         </script>
       </section>
+
+      <section id="at-support">
+        <h2>Assistive Technology Support</h2>
+        <iframe
+          class="support-levels-command-button"
+          src="https://aria-at.w3.org/embed/reports/command-button?title=Command+Button"
+          height="500"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+
+        <iframe
+          class="support-levels-toggle-button"
+          src="https://aria-at.w3.org/embed/reports/toggle-button"
+          height="500"
+          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,15 @@
     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;
+    const magicNumberAdjustment = 35;
+    iframe.style.height = `${data.height + magicNumberAdjustment}px`;
+  }
 })();

cspell.json

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