Description of the need
Backdrop tabs, such as those on /user
have role="tablist"
but the children tab links do not have role="tab"
. As per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/ta..., the tab links need the tab role. It also states that the "panels" need have the role tabpanel
, though given that only one is actually loaded to the page at a time, it's not clear if it makes sense.
Example from Mozilla:
<div class="tabs">
<div role="tablist" aria-label="Sample Tabs">
<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>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
<p>Content for the second panel</p>
</div>
<div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
<p>Content for the third panel</p>
</div>
</div>
Recent comments
If you use CSS Flexbox Layout, you can do with simple styles. In this example, if one or two side columns are excluded from the layout, the central column will occupy all the remaining width:...
How to show main content full-width when sidebar is empty
I found that it had to be specifically <!--> not <!--pagebreak-->
Paging - incorporate with CKeditor?
Yes good point on the allowed tags , however on trying it i hit a couple of issues... If i added the tag <!--pagebreak--> or even <!-- --> it would still remove it when...
Paging - incorporate with CKeditor?