Adapt Learning Community: Navigation Button Order

Hi Rob,

For some reason, I believe tabindex is not the preferred method. I solved this issue by changing the way the navigation bar is built. I think I changed the order of elements in the template and forced some element to wait for the others before being added to the DOM by the Javascript. I don't remember the details; I would have to look up the project to find them.

In any case, stay on the lookout for unintended consequences of altering the tabindex.

Note the warnings in MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Here is a more detailed article, from several years ago, that discusses this issue:

http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html

Show parent | Reply

Could you please look up the project and let me know what scripting to use to delay or re-order the loading of elements in the navbar?

I too am having issues with Tabindex, its not a great solution.

Show parent | Reply

You can use JQuery to change the order of elements in the DOM (example) so the easiest route might be to write some code in your theme to re-order them.

This is a bit of a known issue with the navigation bar in adapt and we will address it soon. It's been on the back burner for a while because it's fairly easy to hack your way around (if using the framework) on a project-by-project yet solving it properly for all projects (and the authoring tool) is fairly complex.

Show parent | Reply

Is there a specific place I should be running this jQuery?

In navigationViews.js? Or in each one of the extensions?

Show parent | Reply

Ok so I got this to work, but it still isnt correct.

The client I am working with says that the focus order MUST, MUST in all instances follow the visual order.

Because these icons are positioned with float:right, they are backwards.

As in, in the code, when going down each button, the focus goes right to left.

According to the client this fails WCAG.

Show parent | Reply