use button elements instead of anchor elements and add tooltips to zoomcontrol

[mprins]

TL;DR: if it is a button it should be a button.

Using the correct semantics serves accessiblity and adding a tooltip (which is screen reader accessible) makes the button easier to understand for everyone. Also proper focus handling is important for keyboard users since the have no :hover event

the tooltip can be easily disabled by removing the :focus and :hover pseudo classes or using some simple css to override those.

more background in: http://www.geodienstencentrum.nl/blog/accessibility/webmapping/2014-02-14/enhancing-openlayers-controls.html

[elemoine]

Very nice. Thanks. @fredj also did some work on that a while back. IIRC we decided against using buttons because styling buttons consistently across different browsers was not an easy problem. I'll have a closer look at your patch.

[tonio]

I just take a quick look:

• Zoom, ZoomToExtent, Fullscreen controls share (or at least should share, see my wip branch) their styles : I think if we go this way, all 3 must be treated the same way.
• you set the border color for the IE background color, but not for standard browser (rgba color).
• there are some unwanted dimension changes, see before/after:

[mprins]

@elemoine it seems an error to me to not use the proper element. Choosing to do that because it doesn't look exactly the same on every platform makes form subordinate to function.

[mprins]

@tonio I think you've got a good point here, but since this is about accessibility I think it's out of scope. (even though these controls need a work over since they are actually empty hyperlinks using :after)

Can you please describe what you mean with the dimension changes?

I think it would be nice to cascade (parts) of a style, but to make that easier I would look into something like Sass. Using a css pre-processor also gives the advantage of optimizing the css during build. For an example of what this could look like see: https://sourceforge.net/p/dokuwikispatial/code/HEAD/tree/trunk/openlayersmap/src/scss/

eg. shared.css for commonly needed layout and a .css per control that optionally extends the base class in the shared file. I really think the current css file is rather convoluted with all those :not[ie] selectors, I you want to have additional support for a single browser, specifically IE, it should go in a conditionally loaded style-sheet and not be carried as a burden across all other browsers...

[tonio]

@mprins I’m pursuing your work here

• I rebase your work on my CSS refactoring branch,
• made some appearance tuning,
• switch to an «em» based button size,
• make tip content configurable.

I’ll continue adapting the other controls the same way.

[tonio]

see #1725

[mprins]

OK, that's cool.

[mprins]

closing this in favour of #1725