navigation: screen reader read order and dom order bad

[oliverfoster]

Subject of the issue

Because nav buttons are floated their visual appearance is inverse to the dom order

Environment

• Framework: >=4

Requirements

• Allow item order to be controlled in the json
• Left, right and middle containers
• API for adding/removing/sorting/modifying items

[kirsty-hames]

It is possible to display nav elements in their dom order if we use display flex instead of floats.

See core changes below.

.nav {
  &__inner {
    display: flex;
    align-items: center;
  }

  &__back-btn {
    //.u-float-left;
  }

  &__drawer-btn {
    //.u-float-right;
    margin-left: auto;
    .dir-rtl & {
      margin-left: 0;
      margin-right: auto;
    }
  }
}

Instead of using floats to create the navigation split we can use margin. Both .nav__back-btn and .nav__drawer-btn are rendered even if they're not visually displayed and we can assume anything floated right would display after .nav__drawer-btn.

In addition we would no longer need the float properties on the following contrib extensions:
adapt-contrib-languagePicker
adapt-contrib-pageLevelProgress
(Just to note, even without the floats being removed this doesn't impact the layout)

[oliverfoster]

navigation buttons now sortable with data-order attribute on the button node, see:
https://github.com/adaptlearning/adapt-contrib-core/blob/f4a589902c565d5749053ea3d091bda5f8aa4ed5/js/views/navigationView.js#L86-L92

needs fixing:
https://github.com/adaptlearning/adapt-contrib-core/blob/f4a589902c565d5749053ea3d091bda5f8aa4ed5/schema/course.schema.json#L316

https://github.com/adaptlearning/adapt-contrib-core/blob/f4a589902c565d5749053ea3d091bda5f8aa4ed5/templates/nav.hbs#L17