diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html index 51ccbb6277..c0c4870720 100644 --- a/content/patterns/button/examples/button.html +++ b/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> diff --git a/content/shared/js/app.js b/content/shared/js/app.js index 65e55ea2f0..7612696db6 100644 --- a/content/shared/js/app.js +++ b/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'; + } })(); diff --git a/cspell.json b/cspell.json index 633ec50f16..5c7bf3671f 100644 --- a/cspell.json +++ b/cspell.json @@ -100,6 +100,7 @@ "Hoyt", "IDREF", "IDREFS", + "iframes", "imgs", "Iskandar", "issie",