Ошибка двойного нажатия на IE Touch в IE10-IE11 (ссылки должны быть нажаты дважды)

Question

Я столкнулся с этой проблемой на IE11 Mobile (Lumia 520 Phone) в существующем меню навигации, где каждая ссылка внутри моего подменю не вызывала щелчок при первом касании.

Это репродукция скрипки представляет собой частично доступное всплывающее меню навигации, взятое из примера меню приложения WAI.

Если вы протестируете его на IE10 или IE11 Mobile или Touch, вы увидите, что ни одна из ссылок подменю не работает.

Их нужно щелкнуть дважды, чтобы запустить события щелчка.

Это почему?

Answer 1

Эта ошибка является результатом функции "помочь имитировать зависание на устройствах с сенсорным экраном ", которая была развернута, начиная с IE10-11 для Touch.

Короче говоря, что вызывает и требует двойного нажатия aria-haspopup=true как уровень родительского элемента подменю. Из-за этого IE Touch ошибочно полагает, что все эти ссылки сами переключаются и относятся к ним как к таковым. Отмечу также, что по аналогичным причинам в iOS Safari есть собственный способ обработки элементов с помощью " :hover[s], который либо скрывает, либо показывает другой элемент с использованием видимости или отображения ".

Как описано в MSDN Internet Explorer 10 Образцы и учебные пособия:

Кроме того, Internet Explorer 10 добавляет новое поведение к существующему свойству aria-haspopup, чтобы имитировать наведение на элементы страницы со скрытым интерактивным содержимым.

Проблема в том, что, хотя она и была спроектирована, чтобы быть полезной, эта реализация основана на неполном и несколько ошибочном чтении того, что такое aria-haspopup, и что оно должно делать.

1. aria-haspopup технически является собственностью (а не государством). Это означает, что IE установил сенсорное поведение для элемента, который не должен изменяться во время выполнения. Если адаптивный контекст, возможно, не потребует такого изменения; aria-haspopup='true' должен остаться true даже если всплывающий элемент отображается. Состояние переключателя aria-expanded вместо.

2. Эта концепция работает только для MSDN-примера aria-haspopup, реализованного в этом руководстве. т.е. если aria-haspopup=true размещена на самой кнопке переключения, эта функция IE Touch будет работать как задумано. Однако если aria-haspopup=true Атрибуты размещаются на родительском уровне, как мое репро, или как более традиционное меню приложения, в соответствии с этим примером W3C/WAI, это проблема.

Решения для устранения этой ошибки: либо не использовать aria-haspopup=true на родительских элементах из-за IE10-11 Touch (который отстой для доступности), или удалите его из сенсорного IE10/IE11 с поддержкой сенсорного ввода, либо на стороне сервера, либо с Javascript соответственно.