From d2c5dc2badc6082e6a2ca1b50d62ddf57d89d64e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zo=C3=AB=20Bijl?= <5457769+ZoeBijl@users.noreply.github.com> Date: Tue, 25 Feb 2020 18:45:59 +0100 Subject: [PATCH 01/13] Fetch setup --- examples/js/app.js | 10 ++++++++++ examples/js/notice.html | 26 ++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 examples/js/notice.html diff --git a/examples/js/app.js b/examples/js/app.js index 578fe8a250..f390546953 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -1,4 +1,14 @@ (function () { // Load syntax highlighting hljs.initHighlightingOnLoad(); + + + fetch('notice.html') + .then((response) => { + console.log(response.getElementById('support-notice')) + }) + + let exampleHeader = document.getElementById('ex_label') + let template = document.importNode('notice.html#support-notice', true) + console.log('loaded', template, exampleHeader) }()); diff --git a/examples/js/notice.html b/examples/js/notice.html new file mode 100644 index 0000000000..1d9904bc9c --- /dev/null +++ b/examples/js/notice.html @@ -0,0 +1,26 @@ + \ No newline at end of file From 34c14439213947415a88d12941b6681412ee6d33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Tue, 25 Feb 2020 23:20:03 +0100 Subject: [PATCH 02/13] Make it work --- examples/js/app.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/examples/js/app.js b/examples/js/app.js index f390546953..2486450704 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -2,13 +2,21 @@ // Load syntax highlighting hljs.initHighlightingOnLoad(); - - fetch('notice.html') - .then((response) => { - console.log(response.getElementById('support-notice')) - }) - - let exampleHeader = document.getElementById('ex_label') - let template = document.importNode('notice.html#support-notice', true) - console.log('loaded', template, exampleHeader) + // Add support notice to all examples + fetch('../../js/notice.html') + .then(function(response) { + return response.text() + }) + .then(function(html) { + var parser = new DOMParser() + return parser.parseFromString(html, "text/html") + }) + .then(function(templateResponse) { + var templateFragment = templateResponse.getElementById('support-notice') + + return document.importNode(templateFragment.content, true) + }) + .then(function(fragment) { + document.getElementById('ex_label').append(fragment) + }) }()); From af5a8a9c9fbb8ba7c5b6c162f4a8cbc0b401f198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Tue, 25 Feb 2020 23:36:03 +0100 Subject: [PATCH 03/13] Clean up a bit --- examples/js/app.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/js/app.js b/examples/js/app.js index 2486450704..efe14ae9b0 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -3,7 +3,7 @@ hljs.initHighlightingOnLoad(); // Add support notice to all examples - fetch('../../js/notice.html') + fetch('/examples/js/notice.html') .then(function(response) { return response.text() }) @@ -13,7 +13,6 @@ }) .then(function(templateResponse) { var templateFragment = templateResponse.getElementById('support-notice') - return document.importNode(templateFragment.content, true) }) .then(function(fragment) { From 97471ab8359cd9875707c7109d7e4a54c6dc3e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Wed, 26 Feb 2020 00:08:11 +0100 Subject: [PATCH 04/13] Move notice to after heading --- examples/js/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/js/app.js b/examples/js/app.js index efe14ae9b0..278f3cef40 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -16,6 +16,7 @@ return document.importNode(templateFragment.content, true) }) .then(function(fragment) { - document.getElementById('ex_label').append(fragment) + var exLabel = document.getElementById('ex_label') + exLabel.parentNode.insertBefore(fragment, exLabel.nextSibling) }) }()); From ba11bf977a47d1c90f6ceece17a4ce8ff302b054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Wed, 26 Feb 2020 18:49:17 +0100 Subject: [PATCH 05/13] Pull addSupportNotice to its own function --- examples/js/app.js | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/examples/js/app.js b/examples/js/app.js index 278f3cef40..4a3427b890 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -3,20 +3,24 @@ hljs.initHighlightingOnLoad(); // Add support notice to all examples - fetch('/examples/js/notice.html') - .then(function(response) { - return response.text() - }) - .then(function(html) { - var parser = new DOMParser() - return parser.parseFromString(html, "text/html") - }) - .then(function(templateResponse) { - var templateFragment = templateResponse.getElementById('support-notice') - return document.importNode(templateFragment.content, true) - }) - .then(function(fragment) { - var exLabel = document.getElementById('ex_label') - exLabel.parentNode.insertBefore(fragment, exLabel.nextSibling) - }) + addSupportNotice() + + function addSupportNotice() { + fetch('/examples/js/notice.html') + .then(function(response) { + return response.text() + }) + .then(function(html) { + var parser = new DOMParser() + return parser.parseFromString(html, "text/html") + }) + .then(function(templateResponse) { + var templateFragment = templateResponse.getElementById('support-notice') + return document.importNode(templateFragment.content, true) + }) + .then(function(fragment) { + var exLabel = document.getElementById('ex_label') + exLabel.parentNode.insertBefore(fragment, exLabel.nextSibling) + }) + } }()); From 7949844bc2c9aae04b4eb5da2a16993045a5a024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zo=C3=AB=20Bijl?= <5457769+ZoeBijl@users.noreply.github.com> Date: Fri, 28 Feb 2020 02:31:49 +0100 Subject: [PATCH 06/13] Add comments --- examples/js/app.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/examples/js/app.js b/examples/js/app.js index 4a3427b890..9a8b009a91 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -8,18 +8,23 @@ function addSupportNotice() { fetch('/examples/js/notice.html') .then(function(response) { + // Return notice.html as text return response.text() }) .then(function(html) { + // Parse response as text/html var parser = new DOMParser() return parser.parseFromString(html, "text/html") }) .then(function(templateResponse) { + // Get the template element from the parsed response var templateFragment = templateResponse.getElementById('support-notice') + // Import the template contents return document.importNode(templateFragment.content, true) }) .then(function(fragment) { var exLabel = document.getElementById('ex_label') + // Insert the support notice after the page's example heading exLabel.parentNode.insertBefore(fragment, exLabel.nextSibling) }) } From c296e645e92081424c672be00f6516dfc26c4230 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zo=C3=AB=20Bijl?= <5457769+ZoeBijl@users.noreply.github.com> Date: Wed, 4 Mar 2020 01:01:08 +0100 Subject: [PATCH 07/13] Dynamically change template URL path --- examples/js/app.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/examples/js/app.js b/examples/js/app.js index 9a8b009a91..35fb7c458d 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -6,7 +6,14 @@ addSupportNotice() function addSupportNotice() { - fetch('/examples/js/notice.html') + // Expected outcome '../js/app.js' OR '../../js/app.js' + var scriptSource = document.querySelector('[src$="app.js"]').getAttribute('src') + // Cut off the 'app.js' part so we know where to grab our template + var jsPath = scriptSource.split('app.js')[0] + // Append the template filename to the path + var fetchSource = jsPath + 'notice.html' + + fetch(fetchSource) .then(function(response) { // Return notice.html as text return response.text() From 892ae85008bb2f5aba2c1fc7b7efab463534c836 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zo=C3=AB=20Bijl?= <5457769+ZoeBijl@users.noreply.github.com> Date: Wed, 4 Mar 2020 01:08:36 +0100 Subject: [PATCH 08/13] Edit comment --- examples/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/js/app.js b/examples/js/app.js index 35fb7c458d..5c9c78eec8 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -8,7 +8,7 @@ function addSupportNotice() { // Expected outcome '../js/app.js' OR '../../js/app.js' var scriptSource = document.querySelector('[src$="app.js"]').getAttribute('src') - // Cut off the 'app.js' part so we know where to grab our template + // Split off the 'app.js' part so we know where to fetch our template var jsPath = scriptSource.split('app.js')[0] // Append the template filename to the path var fetchSource = jsPath + 'notice.html' From 34b4acc3a03abe5ad31496a17806f07c4d7ce83c Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 28 May 2020 16:45:18 +0200 Subject: [PATCH 09/13] Fix relative urls, add 'note' class for styling, fix race condition bug and remove unnecessary use of template element --- examples/js/app.js | 49 +++++++++++++++++++++++++--------------- examples/js/notice.html | 50 ++++++++++++++++++++--------------------- 2 files changed, 55 insertions(+), 44 deletions(-) diff --git a/examples/js/app.js b/examples/js/app.js index 5c9c78eec8..092a1f9ae6 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -3,36 +3,49 @@ hljs.initHighlightingOnLoad(); // Add support notice to all examples - addSupportNotice() + window.addEventListener('DOMContentLoaded', addSupportNotice, false); function addSupportNotice() { + // The "Example" heading + var exampleHeading = document.getElementById('ex_label'); + if (!exampleHeading) { + return; + } + + // The #browser_and_AT_support link + var supportLink = document.querySelector('a[href$="#browser_and_AT_support"]'); + if (!supportLink) { + return; + } + + // Get the right relative URL to the root aria-practices page + var urlPrefix = supportLink.getAttribute('href').split('#')[0]; + // Expected outcome '../js/app.js' OR '../../js/app.js' - var scriptSource = document.querySelector('[src$="app.js"]').getAttribute('src') - // Split off the 'app.js' part so we know where to fetch our template - var jsPath = scriptSource.split('app.js')[0] - // Append the template filename to the path - var fetchSource = jsPath + 'notice.html' + var scriptSource = document.querySelector('[src$="app.js"]').getAttribute('src'); + // Replace 'app.js' part with 'notice.html' + var fetchSource = scriptSource.replace('app.js', 'notice.html'); fetch(fetchSource) .then(function(response) { // Return notice.html as text - return response.text() + return response.text(); }) .then(function(html) { // Parse response as text/html - var parser = new DOMParser() - return parser.parseFromString(html, "text/html") - }) - .then(function(templateResponse) { - // Get the template element from the parsed response - var templateFragment = templateResponse.getElementById('support-notice') - // Import the template contents - return document.importNode(templateFragment.content, true) + var parser = new DOMParser(); + return parser.parseFromString(html, "text/html"); }) - .then(function(fragment) { - var exLabel = document.getElementById('ex_label') + .then(function(doc) { + // Get the details element from the parsed response + var noticeElement = doc.querySelector('details'); + // Rewrite links with the right urlPrefix + var links = doc.querySelectorAll('a[href^="/#"]'); + for (var i = 0; i < links.length; ++i) { + links[i].pathname = urlPrefix; + } // Insert the support notice after the page's example heading - exLabel.parentNode.insertBefore(fragment, exLabel.nextSibling) + exampleHeading.parentNode.insertBefore(noticeElement, exampleHeading.nextSibling); }) } }()); diff --git a/examples/js/notice.html b/examples/js/notice.html index 1d9904bc9c..fb046fa74e 100644 --- a/examples/js/notice.html +++ b/examples/js/notice.html @@ -1,26 +1,24 @@ - \ No newline at end of file +
+ Important Note About Use of This Example +

+ Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification. +

+ +
From e9f59a70b81f4f08c9ad95c682ce6258c8aead85 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 28 May 2020 16:53:41 +0200 Subject: [PATCH 10/13] Make notice.html valid HTML --- examples/js/notice.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/js/notice.html b/examples/js/notice.html index fb046fa74e..e8c1e36dc7 100644 --- a/examples/js/notice.html +++ b/examples/js/notice.html @@ -1,3 +1,7 @@ + + + +support notice (template)
Important Note About Use of This Example

From 536909749700d6bc96b6f32588eb790289b6eee9 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 28 May 2020 18:05:06 +0200 Subject: [PATCH 11/13] Make it work for pages with multiple examples and where the 'Example' heading isn't the first h2 --- examples/js/app.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/examples/js/app.js b/examples/js/app.js index 092a1f9ae6..f1c6b48796 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -7,7 +7,15 @@ function addSupportNotice() { // The "Example" heading - var exampleHeading = document.getElementById('ex_label'); + var headings = document.querySelectorAll('h2'); + var exampleHeading = null; + for (var i = 0; i < headings.length; ++i) { + var heading = headings[i]; + if (heading.textContent.trim().match(/^Examples?$/)) { + exampleHeading = heading; + break; + } + } if (!exampleHeading) { return; } From 571092ed7bde71604bcdaa0b48fdfbe74e90d382 Mon Sep 17 00:00:00 2001 From: JaEun Jemma Ku Date: Tue, 2 Jun 2020 12:40:17 -0500 Subject: [PATCH 12/13] moved notice msg before example heading --- examples/js/app.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/js/app.js b/examples/js/app.js index f1c6b48796..9960946d1d 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -32,8 +32,9 @@ // Expected outcome '../js/app.js' OR '../../js/app.js' var scriptSource = document.querySelector('[src$="app.js"]').getAttribute('src'); // Replace 'app.js' part with 'notice.html' - var fetchSource = scriptSource.replace('app.js', 'notice.html'); + var fetchSource = scriptSource.replace('app.js', './notice.html'); + //fetch('https://raw.githack.com/w3c/aria-practices/1228-support-notice/examples/js/notice.html') fetch(fetchSource) .then(function(response) { // Return notice.html as text @@ -52,8 +53,8 @@ for (var i = 0; i < links.length; ++i) { links[i].pathname = urlPrefix; } - // Insert the support notice after the page's example heading - exampleHeading.parentNode.insertBefore(noticeElement, exampleHeading.nextSibling); + // Insert the support notice before the page's example heading + exampleHeading.parentNode.insertBefore(noticeElement, exampleHeading); }) } }()); From 057c5b3b05d974dc64884b56e3ea3b003a249d58 Mon Sep 17 00:00:00 2001 From: Valerie Young Date: Fri, 26 Jun 2020 10:18:25 -0700 Subject: [PATCH 13/13] Move support notice under H1 --- examples/js/app.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/js/app.js b/examples/js/app.js index 9960946d1d..b74e006c6f 100644 --- a/examples/js/app.js +++ b/examples/js/app.js @@ -8,15 +8,14 @@ function addSupportNotice() { // The "Example" heading var headings = document.querySelectorAll('h2'); - var exampleHeading = null; + var foundExampleHeading; for (var i = 0; i < headings.length; ++i) { - var heading = headings[i]; - if (heading.textContent.trim().match(/^Examples?$/)) { - exampleHeading = heading; + if (headings[i].textContent.trim().match(/^Examples?$/)) { + foundExampleHeading = true; break; } } - if (!exampleHeading) { + if (!foundExampleHeading) { return; } @@ -53,8 +52,9 @@ for (var i = 0; i < links.length; ++i) { links[i].pathname = urlPrefix; } - // Insert the support notice before the page's example heading - exampleHeading.parentNode.insertBefore(noticeElement, exampleHeading); + // Insert the support notice before the page's h1 + var heading = document.querySelector('h1'); + heading.parentNode.insertBefore(noticeElement, heading.nextSibling); }) } }());