Increase efficiency of use for keyboard users when tabbing through the toolbuttons container

[julkuh]

Issue description

This issue is about increasing the efficiency of use for keyboard users when tabbing through the toolbuttons container (e.g. the ones in the bottom right corner of the map of the sample app).

Currently the whole container is marked as role="toolbar". Due to the "toolbar" role, a screenreader user expects the following behavior (which is useful for all other keyboard users too):

1. The whole container (the one with role="toolbar") is focusable by tabbing onto it
2. As soon as the container is focused, the tools inside can be navigated through the arrow keys on keyboard. If a tool is disabled, it is skipped.
3. Pressing tab again, move the focus away from the toolbar over too the next focusable element (which is not a tool inside the container of course).

Example: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/

Please also consider a correct aria-orientation attribute with a value of either "horizontal" or "vertical", depending of the alignment of the toolbuttons.

Validations

• Read and follow our code of conduct
• Read the contributing guidelines
• Check that there isn't already a similar issue