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
I currently look after 97 Backdrop sites... 37 Drupal sites that need migrating... 17 WordPress sites... 23 tiny HTML sites (holding pages/simple intros) a few Wix and Squarespace sites...
Happy Birthday Backdrop CMS - Share your projects!
Having built around 25 websites in Drupal 7, I have been delighted with the process of upgrading them to Backdrop CMS over the past couple of years. Most notable are the following...
Happy Birthday Backdrop CMS - Share your projects!
Thanks (again)!
Webform - how to remove user name & date at top