doc_markup_links_aria_attributes.html (2222B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Markup-view Linkify ARIA attributes</title> 6 <script> 7 "use strict"; 8 class TestComponent extends HTMLElement { 9 constructor() { 10 super(); 11 this.attachShadow({mode: 'open'}); 12 13 this.shadowRoot.innerHTML = ` 14 <button 15 id="aria-describedby-shadow-dom" 16 aria-describedby="describedby01 describedbyshadow" 17 ></button> 18 <div id="describedbyshadow">#describedbyshadow</div> 19 `; 20 } 21 } 22 customElements.define('test-component', TestComponent); 23 </script> 24 </head> 25 <body> 26 <div id="aria-activedescendant" 27 aria-activedescendant="activedescendant01">aria-activedescendant test</div> 28 <div id="activedescendant01">#activedescendant01</div> 29 30 <div id="aria-controls" 31 aria-controls="controls01 controls02">aria-controls test</div> 32 <div id="controls01">#controls01</div> 33 <div id="controls02">#controls02</div> 34 35 <div id="aria-describedby" 36 aria-describedby="describedby01 describedby02">aria-describedby test</div> 37 <div id="describedby01">#describedby01</div> 38 <div id="describedby02">#describedby02</div> 39 40 <div id="aria-details" aria-details="details01 details02">aria-details test</div> 41 <div id="details01">details01</div> 42 <div id="details02">details02</div> 43 44 <div id="aria-errormessage" 45 aria-errormessage="errormessage01">aria-errormessage test</div> 46 <div id="errormessage01">errormessage01</div> 47 48 <div id="aria-flowto" 49 aria-flowto="flowto01 flowto02">aria-flowto test</div> 50 <div id="flowto01">#flowto01</div> 51 <div id="flowto02">#flowto01</div> 52 53 <div id="aria-labelledby" 54 aria-labelledby="labelledby01 labelledby02">aria-labelledby test</div> 55 <div id="labelledby01">#labelledby01</div> 56 <div id="labelledby02">#labelledby02</div> 57 58 <div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div> 59 <div id="owns01">#owns01</div> 60 <div id="owns02">#owns02</div> 61 62 <test-component></test-component> 63 64 <div id="empty-attributes" aria-activedescendant=" " aria-details=" "></div> 65 </body> 66 </html>