1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34

content / test / data / accessibility / html / tab-panel.html [blame]

<button
  role="tab"
  aria-selected="true"
  aria-controls="panel-1"
  id="tab-1"
  tabindex="0">
  First Tab
</button>
<button
  role="tab"
  aria-selected="false"
  aria-controls="panel-2"
  id="tab-2"
  tabindex="-1">
  Second Tab
</button>
<button
  role="tab"
  aria-selected="false"
  aria-controls="panel-3"
  id="tab-3"
  tabindex="-1">
  Third Tab
</button>

<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Content for the first panel, this should be read.</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Content for the second panel, this should be read.</p>
</div>
<div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
  <p>Content for the third panel, this should be read.</p>
</div>