[BITV] 9.4.1.2/6.4 - "Change scope" menus - Using the aria-label attribute on li elements along with role="presentation" is not allowed/recommended, as the aria-label output cannot be guaranteed. (1)

[AndyScherzinger]

• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/4648
• [x] https://github.com/nextcloud-libraries/nextcloud-vue/pull/4680
• [x] https://github.com/nextcloud/server/pull/41070
• [x] https://github.com/nextcloud/server/pull/40938

Personal info - Personal settings - Nextcloud https://try.nextcloud.com/ltd/a11y/index.php/settings/user

<li data-v-1846a4cc="" data-v-2dff160a="" data-v-2513166c="" role="presentation" class="action federation-actions__btn active" aria-label="Only visible to people on this instance and guests">

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-bfbf07e5c3-v6-n4

[Pytal]

As this is a button inside the li instead of a then with reference to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role#example_1_navigation_menu is it sufficient to remove the presentation role here @michaelnissenbaum?

[michaelnissenbaum]

Removing the role="presentation" is indeed correct in this case. Additionally, aria-expanded needs to be removed. Please ensure that the "aria-label" attribute is also removed from the "li" elements of the unordered list.

Also, the labels of the menu item elements should not be in the form of text paragraphs. This can cause issues with screen reader output, especially with VoiceOver. Use "span"-Element.

Furthermore, since you already have a visual label, you don't really need the aria-label attribute here.

[Pytal]

Thanks @michaelnissenbaum! For the menu markup specifically I'd like some clarifications.

The markup is from a shared component which is sometimes used for website navigation links à la

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role#example_1_navigation_menu

so some of these attributes are appropriate.

1) But since we use this component as an options popup menu in other places e.g. in this case, I believe we need to keep presentation in navigation menus but remove them in option menus, would that work @michaelnissenbaum?

2) From the MDN reference page linked above and https://www.w3.org/WAI/tutorials/menus/flyout/ the aria-expanded attribute is explicitly mentioned/used, could you clarify why we should remove it here @michaelnissenbaum?

[michaelnissenbaum]

It's crucial to understand the purpose of using role="presentation." This role removes the element's semantics - as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role.

1. The example provided by Mozilla in "Example 1" is, in reality, an application menu ("true" menu) and not a navigation menu - which is explained well here: https://inclusive-components.design/menus-menu-buttons/. And precisely for this example, the use of role="presentation" is appropriate. Here's another example without role="presentation": https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/.
2. The "aria-expanded" attribute is correctly used for navigation menus. For application menus, only aria-expanded="true" should be used.