aria-labelledby idrefs in shadow DOM

dylanb · Jun 22, 2017 · 10d1d42 · 10d1d42
1 parent d0a4cee
commit 10d1d42
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/shadowDOM/aria_shadow.html b/shadowDOM/aria_shadow.html
@@ -7,6 +7,12 @@
         <a href="/">Back to dylanb.github.io</a>
         <div class="attach">
         </div>
+        <div>
+            <p id="target">Thingamabob</p>
+        </div>
+        <div class="slotted">
+            <a href="" aria-labelledby="target">Thing One</a>
+        </div>
         <script>
             function createContent() {
                 var group = document.createElement('div');
@@ -15,22 +21,31 @@
                 return group;
             }
 
-            function createStyle()
-            {
+            function createStyle() {
                 var style = document.createElement('style');
                 style.textContent = '';
                 return style;
             }
 
-            function makeShadowTree(node)
-            {
+            function makeShadowTree(node) {
                 var root = node.attachShadow({mode: 'open'});
                 root.appendChild(createStyle());
                 root.appendChild(createContent());
             }
+            function createContentSlotted() {
+                var group = document.createElement('div');
+                group.innerHTML = '<div id="target">Stuff<slot></slot></div><a href="" aria-labelledby="target">Thing Two</a>';
+                return group;
+            }
+
+            function makeShadowTreeSlotted(node) {
+                var root = node.attachShadow({mode: 'open'});
+                root.appendChild(createContentSlotted());
+            }
 
             document.addEventListener('DOMContentLoaded', function() {
                 document.querySelectorAll('div.attach').forEach(makeShadowTree);
+                document.querySelectorAll('div.slotted').forEach(makeShadowTreeSlotted);
             });
         </script>
     </body>