tab-roles.html (6905B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Tab-related Role Verification Tests</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 <p>Tests <a href="https://w3c.github.io/aria/#tab">tab</a> and related roles.</p> 15 16 <!--<div> tab with tablist/tab/tabpanel semantics--> 17 <div role="tablist" data-testname="div role is tablist" data-expectedrole="tablist" class="ex"> 18 <div role="tab" data-testname="role is tab (in div tablist)" data-expectedrole="tab" class="ex">x</div> 19 </div> 20 <div role="tabpanel" data-testname="role is tabpanel (with sibling div tablist)" data-expectedrole="tabpanel" class="ex"></div> 21 22 <!--<div> tabs with tablist/tab/tabpanel semantics, selection, no focus management--> 23 <div role="tablist" data-testname="div role is tablist (with selection)" data-expectedrole="tablist" class="ex"> 24 <div role="tab" aria-selected="true" data-testname="role is tab and tab is selected" data-expectedrole="tab" class="ex">x</div> 25 <div role="tab" aria-selected="false" data-testname="role is tab and tab is not selected" data-expectedrole="tab" class="ex">y</div> 26 </div> 27 <div role="tabpanel" data-testname="role is tabpanel (faux selected)" data-expectedrole="tabpanel" class="ex"></div> 28 <div role="tabpanel" data-testname="role is tabpanel (faux unselected)" data-expectedrole="tabpanel" class="ex"></div> 29 30 <!--<div> tabs with tablist/tab/tabpanel semantics, selection, roving tabindex--> 31 <div role="tablist" data-testname="div role is tablist (with selection, roving tabindex)" data-expectedrole="tablist" class="ex"> 32 <div role="tab" aria-selected="true" tabindex = "0" data-testname="role is tab, tab is selected and in tab order" data-expectedrole="tab" class="ex">x</div> 33 <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab and tab is not selected, not tabbable" data-expectedrole="tab" class="ex">y</div> 34 <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab and tab is not selected, not tabbable (duplicate)" data-expectedrole="tab" class="ex">z</div> 35 </div> 36 <div role="tabpanel" data-testname="role is tabpanel with selection, roving tabindex" data-expectedrole="tabpanel" class="ex"></div> 37 <div role="tabpanel" data-testname="role is tabpanel with selection, roving tabindex (duplicate)" data-expectedrole="tabpanel" class="ex"></div> 38 <div role="tabpanel" data-testname="role is tabpanel with selection, roving tabindex (duplicate 2)" data-expectedrole="tabpanel" class="ex"></div> 39 40 <!--<div> tabs with tablist/tab/tabpanel semantics and non-empty tabpanel--> 41 <div role="tablist" data-testname="div role is tablist (with non-empty tabpanel)" data-expectedrole="tablist" class="ex"> 42 <div role="tab" aria-selected="true" data-testname="role is tab and tab is selected (with non-empty tabpanel content)" data-expectedrole="tab" class="ex">x</div> 43 <div role="tab" aria-selected="false" data-testname="role is tab and tab is not selected (with non-empty tabpanel content)" data-expectedrole="tab" class="ex">y</div> 44 </div> 45 <div role="tabpanel" data-testname="role is tabpanel with selection, non-empty content" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> 46 <div role="tabpanel" data-testname="role is tabpanel with selection, non-empty content (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div> 47 48 <!--<div> tabs with tablist/tab/tabpanel semantics, non-empty tabpanel and aria-controls--> 49 <div role="tablist" data-testname="div role is tablist (with non-empty tabpanel and aria-controls)" data-expectedrole="tablist" class="ex"> 50 <div role="tab" aria-controls = "tabpanel1" aria-selected="true" data-testname="role is tab, tab is selected (with aria-controls)" data-expectedrole="tab" class="ex">x</div> 51 <div role="tab" aria-controls = "tabpanel2" aria-selected="false" data-testname="role is tab, tab is not selected (with aria-controls)" data-expectedrole="tab" class="ex">y</div> 52 </div> 53 <div role="tabpanel" id="tabpanel1" data-testname="role is tabpanel with aria-controls and non-empty content" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> 54 <div role="tabpanel" id="tabpanel2" data-testname="role is tabpanel with aria-controls and non-empty content (duplicate)" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> 55 56 <!--<div> tablist with child <button> that has explicit role="tab"--> 57 <div role="tablist" data-testname="div role for button parent container is tablist" data-expectedrole="tablist" class="ex"> 58 <button role="tab" data-testname="button role is tab (in div tablist)" data-expectedrole="tab" class="ex">x</div> 59 </div> 60 61 <!--<ul> tablist with child <divs> that have explicit role="tab"--> 62 <ul role="tablist" data-testname="ul role is tablist" data-expectedrole="tablist" class="ex"> 63 <li> 64 <div role="tab" aria-selected="true" tabindex = "0" data-testname="role is tab (within li), tab is selected and in tab order" data-expectedrole="tab" class="ex">x</div> 65 </li> 66 <li> 67 <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab (within li), tab is not selected and in tab order" data-expectedrole="tab" class="ex">y</div> 68 </li> 69 </ul> 70 <div role="tabpanel" data-testname="role is tabpanel as sibling to ul" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> 71 <div role="tabpanel" data-testname="role is tabpanel as sibling to ul (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div> 72 73 <!--<ul> tablist with child <divs> that have explicit role="tab", role="none" on li elements--> 74 <ul role="tablist" data-testname="ul role is tablist (child li have role none)" data-expectedrole="tablist" class="ex"> 75 <li role="none"> 76 <div role="tab" aria-selected="true" tabindex = "0" data-testname="role is tab (within li with role none), tab is selected and in tab order" data-expectedrole="tab" class="ex">x</div> 77 </li> 78 <li role="none"> 79 <div role="tab" aria-selected="false" tabindex = "-1" data-testname="role is tab (within li with role none), tab is not selected and in tab order" data-expectedrole="tab" class="ex">y</div> 80 </li> 81 </ul> 82 <div role="tabpanel" data-testname="role is tabpanel as sibling to ul with child role none li elements" data-expectedrole="tabpanel" class="ex">Tab one's stuff</div> 83 <div role="tabpanel" data-testname="role is tabpanel as sibling to ul with child role none li elements (duplicate)" data-expectedrole="tabpanel" class="ex">Tab two's stuff</div> 84 85 <script> 86 AriaUtils.verifyRolesBySelector(".ex"); 87 </script> 88 89 </body> 90 </html>