Today, a challenge in the form of a bug-report came in. It said
On my Microsoft Surface tablet, I cannot use the menu.
A little background you might need: The menu is a navigation bar with sub-items appearing on hover, like the example below.
We all know that iOS tablets and most Android tablets (as far as I know) open these hover sub-menu upon a single click. Microsoft’s IE11 however doesn’t.
At first I thought: “Well, there must be some invisible DIV obscuring it in IE11″. But after a quick trip on Google I found this. According to this document, adding ‘aria-haspopup‘ to the elements that need this behaviour, tells IE11 to translate a touch-click into a hover for that element . Frankly, I think this is brilliant! So I added the necessary code to our project and the menu worked as expected on IE11 touch-devices as well.
Now, before you start thinking this is another Microsoft IE horror trip: This is actually part of a whole W3C supported spec: Read all about ARIA here. I also found this little write-up on Stack Overflow here.
I’m sure this will help somebody in the future. Good luck!