[app-layout] Focus first on drawer

[javier-godoy]

How to change the order of the tabs, so that the drawer is focused before the menu bar?

Setting a custom tabindex in an AppLayout seems to be ignored by the browser, and the nav bar on top still get selected before the left side.

[web-padawan]

Currently, focus sequence is caused by the DOM order, as can be seen here:
https://github.com/vaadin/vaadin-app-layout/blob/a0552191f3741019ada4733847a1a61a3bccf6fa/src/vaadin-app-layout.html#L195-L201

The focus first goes to navbar and then to drawer.

The typical use case is to place vaadin-tabs in the drawer. However, when setting tabindex="1" on the vaadin-tab, it is discarded because of how roving tabindex is implemented, which makes it more difficult.

Placing another component above tabs (e.g. clickable logo) with tabindex="1" might help in this case.

[web-padawan]

For reference, here is the implementation in an older prototype using LitElement.

[sosa-vaadin]

Changing the order in the DOM so that the drawer is first is enough to make it so that it is tab-able before the navbar.

primary-section-drawer.mov

I think it's fine as long as the primary-section="drawer" attribute is set. I think it looks unnatural for it to jump the navbar right to the drawer when it is rendered above the drawer.

primary-section-default.mov