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
Welcome to Backdrop! For your setup, you’ll want to create a subtheme of Bootstrap5 Lite itself; the Bootswatch styles (like Cerulean) are just presets that B5 Lite loads, and you can “lock in”...
Basic Theme designing questions, using Bootstrap5 Lite
Hi Rob, Welcome to Backdrop! Here’s a quick overview: Subtheming Bootswatch: You should create your subtheme based on Bootstrap5 Lite, not directly on a Bootswatch style....
Basic Theme designing questions, using Bootstrap5 Lite
Hi Rolf, This happens because CKEditor saves absolute or semi-absolute paths in the HTML instead of using Backdrop’s file stream wrappers (like public://). When you move your site...
Losing link to embedded pictures when moving my installation