Tab order in write plan

[mariapraetzellis]

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)

[briri]

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.