доступность - aria-haspopup menu - интерактивные элементы кроме menuitem в меню

Постановка проблемы и существующее понимание

У меня есть всплывающее окно, которое содержит различный контент, разделенный на разделы, и запускается при нажатии кнопки. Я пытаюсь раскрыть соответствующую семантику доступности / арии в этой реализации. (Это не модальный диалог, а простое всплывающее окно). Согласно моему текущему исследованию, это то, что я думаю, имеет смысл:

• aria-expanded на кнопке триггера
• aria-haspopup="menu" на кнопке триггера
• role="menu" во всплывающем окне
• role="menuitem" на содержании во всплывающем окне
• другие дополнительные возможности клавиатуры

Примеры:

• Этот пример реализации кнопки меню: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
• Реализация аналогичных всплывающих окон в Twitter с role="menu"

• Общие рекомендации bootstrap по раскрывающимся спискам https://getbootstrap.com/docs/4.0/components/dropdowns/#accessibility

Стандарт WAI ARIA определяет фактический виджет role = menu, но он специфичен для меню, подобного приложениям, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.

С другой стороны, выпадающие списки Bootstrap носят общий характер и применимы к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа в систему. По этой причине Bootstrap не ожидает (и не добавляет автоматически) каких-либо атрибутов role и aria-, необходимых для истинных меню ARIA. Авторы должны сами включить эти более конкретные атрибуты.

Моя проблема похожа, но мне нужна помощь в выборе ролей в меню.

Требование:

Вот как выглядит мое всплывающее меню:

• есть 2 секции, разделенные перегородкой
• в первом разделе есть некоторая информация и некоторые интерактивные элементы
• во втором разделе есть ссылки
• для второго раздела я очень доволен использованием роли menuitem на каждом из них
• Я не совсем уверен в том, как обрабатывать первый раздел, хотя
• As per current understanding:
  • anything wihtout the menuitem role inside a menu, is ignored for creating the accessibility tree
  • семантика всех дочерних элементов menuitem удалена. Таким образом, button внутри menuitem не будет объявлен как таковой.
• Как и в случае с реализацией twitter, я могу игнорировать свои неинтерактивные элементы в первом разделе, НЕ добавляя к ним роль menuitem, но что мне делать с интерактивными элементами. Например, для элемента Funds я не могу добавить role="menuitem" ко всему контейнеру, потому что тогда кнопка Add Funds не будет работать для пользователей программ чтения с экрана (?).
• Я могу добавить role="menuitem" к кнопке и обязательно добавить лучшую метку aria, которая объявляет текущие средства, а также позволяет пользователю нажимать кнопку для добавления средств, но я не совсем уверен в этом.

Вопросов:

• Существуют ли какие-либо другие семантики ролей / доступности ARIA, которые следует применять в этом случае? Является ли этот вариант использования меню, которое подходит под определение role = menu?
• Если role = menu и role = menuitem наиболее подходят для этой настройки, что мне делать с интерактивными элементами в первом разделе моего компонента?
• Если мое требование не подходит ни для одной из ролей всплывающих окон, можно ли не раскрывать это с помощью aria-haspopup и только с расширенным aria?

Другие источники:

• Доступность: для чего можно использовать aria-haspopup? < / а>
• https://github.com/w3c/aria-practices/issues/1926