Mobile menu does not open when voice mode is enabled on iOS

Question

I open my site in ios using the Safari browser. The mobile menu is working fine.

It opens when I click the menu icon (three line icon). But when I turn on the voice message, go to the browser and click this menu icon, the mobile menu does not open.

Is this a css problem or do I need to add some attributes aria?

Can someone help me?

   

jQuery('.menu-trigge').once('menuMobile').click(function () {
                    jQuery(this).toggleClass('expand');
                    if (jQuery('.menu-trigger').hasClass('expand')) {
                      jQuery('.menu-trigger').first().slideDown();
                    } else {
                      jQuery('.menu-trigger').first().slideUp();
                    }
                  });

.menu-trigger {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	width: 33px;
	margin: 0 0 0 15px;
	transition: 275ms all ease;
}
.menu-trigger span {
	display: block;
	height: 3px;
	background: #233e6b;
	margin-bottom: 4px;
	-webkit-transition: 275ms all ease;
	transition: 275ms all ease;
}
.main-menu {
	position: absolute;
	top: 100%;
	right: -10px;
	width: 100vw;
	z-index: 100;
	background: #fff;
}
ul.menu {
max-height: calc(100vh - 55px);
	overflow: auto;
}

<div class="menu-block">
  <div class="main-menu">
	<div class="menu_wrapper">
	  <ul class="menu">
		<li>Menu 1</li>
		<li>Menu 2</li>
	  </ul>
	</div>
  </div>
  <div class="menu-trigger">
	<span></span>
	<span></span>
	<span></span>
  </div>
</div>

Run code

Answer 1

This is because you used the div to attach the click event.

Your div.menu-trigger should be a button [type = "button"].

, , - . Div , .

-, - (, ), div , . .

, , tabindex JS heavy-lift.

, :

<button type="button" class="menu-trigger">

, aria, tabindex JS, :

<div class="menu-trigger" role="button" tabindex="0">
// then make sure the JS fires on click and on the enter and spacebar keypress events.
// this mimics the keyboard and focus features that are baked in with the button element

important: - , , . - aria-label = " ". , , aria-label, " ".

<button type="button" class="menu-trigger" aria-label="open the menu">

Answer 2

aria-* , . - JS/CSS. , , :

CSS .main-menu-on , :

.main-menu-on {
    top: 50px;
    right: 10px;
}

JS , , :

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);

. , aria-*. , VoiceOver , , VoiceOver, .

aria-*:

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);

.menu-trigger {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	width: 33px;
	margin: 0 0 0 15px;
	transition: 275ms all ease;
}
.menu-trigger span {
	display: block;
	height: 3px;
	background: #233e6b;
	margin-bottom: 4px;
	-webkit-transition: 275ms all ease;
	transition: 275ms all ease;
}
.main-menu {
	position: absolute;
	top: 100%;
	right: -10px;
	width: 100vw;
	z-index: 100;
	background: #fff;
}
.main-menu-on {
	top: 50px;
	right: 10px;
}
ul.menu {
max-height: calc(100vh - 55px);
	overflow: auto;
}

<div class="menu-block">
  <div class="main-menu">
	<div class="menu_wrapper">
	  <ul class="menu">
		<li>Menu 1</li>
		<li>Menu 2</li>
	  </ul>
	</div>
  </div>
  <div class="menu-trigger">
	<span></span>
	<span></span>
	<span></span>
  </div>
</div>