Closed mariapraetzellis closed 5 months ago
Tab ordering is a fairly involved issue to fix.
The plan navigation for example (e.g. Write Plan, Research Outputs, Download, etc.) look like this:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="<%= (active_page?(plan_path(plan), true) ? 'active' : '') %>">
<a href="<%= plan_path(plan) %>" role="tab" aria-controls="content"><%= _('Project Details') %></a>
</li>
But the Aria tab
rules dictate that the role="tab"
must be a direct child of role="tablist"
. Ours are nested within an <li>
.
It's possible that we could just collapse these, but I am guessing it has ties/implications with Bootstrap 3 or will at the very least also require a decent amount of CSS work.
Current Behavior: Tab order skips all the individual expand buttons. The order goes “collapse all” to the CDL logo in the footer.
Applicable WCAG Standard(s) 2.4.3 Focus Order (Level A)