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 @@

HTML Source Code

sourceCode.make(); + +
+

Assistive Technology Support

+

Command Button

+ + +

Toggle Button

+ +
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",