Modeling Touch on Windows surface without using aria-haspop

Microsoft suggests using aria-haspop = "true" to simulate hovering on touchscreen devices.

This is also the correct use of the W3 role model in the specification.

Without enabling aria-haspop = "true" I cannot open the submenu when I click, and when I click on it, it triggers a "right click".

Codepen example

Html

<ul class="menu">
  <li aria-haspopup="false">
    <a href="#">aria-haspopup="false"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
  </li>
  <li aria-haspopup="true">
    <a href="#">aria-haspop="true"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
</ul>

      

CSS

.menu > li {
  display: inline-block;
  position: relative;
  background: #1abc9c;
}
.menu > li > a {
  padding: 20px;
  background: #1abc9c;
  display: inline;
  float: left;
}

.menu > li:hover .sub-menu {
  display: block;
  position: absolute;
  background:  #1abc9c;
  top: 50px;
  left: 0;
}
.menu .sub-menu {
  display: none;
}

.menu .sub-menu li {
  padding: 20px;
  width: 140px;
}

      

Try to make the Internet less accessible. Is there a way to make the submenu work just as well without adding aria labels to the Windows surface device? CSS only is preferred. Javascript would be acceptable, but less ideal.

+3


source to share


1 answer


The same Microsoft tutorial you linked recommends using an event onclick

to show content.

The best practice is not to use hover to hide content that the user can interact with. Consider using the onclick event to toggle visibility instead .

The problem, of course, is that your menu items are also links, and clicking on the link will likely take you to another page. Only if they are truly dead anchors that go nowhere (as in your example code) is it safe to use their events onclick

to show or hide submenus.



Here is some sample code that uses onclick

CSS to display submenus instead :hover

. Note that my example directly assigns handlers for brevity, but it's better to use the addEventListener()

.

var parentMenuItems = document.querySelectorAll(".menu > li");
var len = parentMenuItems.length;
while (len--) {
  parentMenuItems[len].onclick = showSubMenu;
  parentMenuItems[len].onmouseenter = showSubMenu;
  parentMenuItems[len].onmouseleave = hideSubMenu;
}
function showSubMenu() {
  this.querySelector(".sub-menu").style.display = "block";
}
function hideSubMenu() {
  this.querySelector(".sub-menu").style.display = "none";
}
      

.menu > li {
  display: inline-block;
  position: relative;
  background: #1abc9c;
}
.menu > li > a {
  padding: 20px;
  background: #1abc9c;
  display: inline;
  float: left;
}
.menu > li .sub-menu {
  position: absolute;
  background: #1abc9c;
  top: 50px;
  left: 0;
}
.menu .sub-menu {
  display: none;
}
.menu .sub-menu li {
  padding: 20px;
  width: 140px;
}
      

<ul class="menu">
  <li aria-haspopup="false">
    <a href="#">aria-haspopup="false"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
  <li aria-haspopup="true">
    <a href="#">aria-haspop="true"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
</ul>
      

Run codeHide result


+1


source







All Articles