[a11y] Make the map and it's elements accessible

[MichelGabriel]

The main goal is to make the map accessible by keyboard.

Changes:

• replace popover swith dropdowns (popovers are added at the end of the DOM and therefore not really accessible)
• rewrite the base layer selection in a plain list (this also adds the necessary room for the dropdown to fit)
• reorder the map panels: the panel is now directly after the open/close button in the DOM
• map can now get the focus, so panning and zooming with the keyboard is possible
• add focus outline style for the map
• add focus style for the map buttons
• improve focus style for location search
• layerlist: more buttons are in the toolbar that is visible on hover
• layerlist: button bar also visible on focus
• change 'style popover' (now a dropdown) is added to this button bar

Smaller changes:

• add href to links (enables focus)
• more distinct focus state
• legend panel is accessible

Extra:

• cleanup some css, added some basic rules
• improved whitespace
• removed redundant divs

Some screenshots after the changes:

[josegar74]

Some items to review:

1. Layer tools panel is not displayed fully

2. Similar with the add layers > style chooser

3. Disabled options, maybe to be displayed in gray?

[MichelGabriel]

@josegar74 thanks for reviewing. Going to fix the menus and disabled buttons.

[MichelGabriel]

@josegar74 For me the menu's open to the left so they are displayed properly. Could it be cache?

[josegar74]

@MichelGabriel I've cleanup the wro4j cache and the browser cache and get the same:

[MichelGabriel]

That is strange, is see this:

[MichelGabriel]

Added some visual improvements to the services dropdown:

[MichelGabriel]

Latest commit with improvements to the a11y aspects of the add layer list

[josegar74]

Tested, LGTM