Issues

 
1 of 1

profile popover: Ensure ARIA roles, states, and properties are valid

Fixed

Description

upper-right-corner profile link expands and collapses and this information is not communicated to screen reader users. Additionally, list of the expanded item has role of menu and menuitem which is not correct since it does not include the only link but it also includes text information.

[User Impact] The top right corner profile expansion does not behave as menu and when screen reader users navigate to it, they get confused since it does not follow menu's keyboard paradigm.[Code]

<a id="loginUser" class="Mrphs-userNav__drop-btn no-avatar Mrphs-userNav__submenuitem--userlink current-site " href="javascript:void(0);"><span class="Mrphs-userNav__submenuitem--username">Sakai</span><span class="Mrphs-userNav__submenuitem--userid">admin</span></a>.....<ul class="Mrphs-userNav__subnav is-hidden" role="menu">.....<a id="Mrphs-userNav__submenuitem--connections" role="menuitem" href="javascript:;"><span>My Connections</span></a>

.....[Expected behavior]

  • Developers must ensure that when assistive technologies users navigate to "Sakai", screen reader announce its state of being expand or collapse. For that developers need to use "aria-expand" property.

  • Moreover, developers need to remove the role of menu and menuitem. If developers need to implement this as menu then they need to make sure it follows the standard paradigm of menu, however, for this element it is not recommended.

  • Developers should follow:Heading with Level StartNative Button with Expandable State (via aria-expanded)Heading with Level EndExpandable Named Region Start (via role="region" plus aria-labelledby or aria-label)List of Native LinksExpandable Named Region End[Reference link]https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/

Details

Priority

Affects versions

Fix versions

22 Status

Verified

Components

Assignee

Reporter

Labels

Created April 19, 2018 at 7:36 AM
Updated May 31, 2023 at 5:59 PM
Resolved February 8, 2022 at 4:02 PM

Activity

Thomas KelseyMay 31, 2023 at 5:59 PM

Per comment below, marking as Verified

Steve WaldeckApril 11, 2022 at 12:44 AM

Verified on 22x: https://qa22-mysql.nightly.sakaiproject.org/ Build: 964ed95d

Win10 (Chrome)

Sam OttenhoffApril 10, 2022 at 1:30 PM

I don’t think the central_park_lamp is within scope for this Jira

Steve WaldeckApril 9, 2022 at 12:37 AM
Edited

Verified on Trunk 23: https://trunk-mysql.nightly.sakaiproject.org/ Build: 92a1e186

Chrome

– On 22x, there is one critical error: the centrall_park_lamp.jpg image doesn’t have alt text attribute. Does this prevent verification from passing for 22?

Automation for JiraNovember 10, 2021 at 9:20 PM

A pull request has been created, "SAK-38394 cleanup use of role=menu and menuitem", you can see it at https://github.com/sakaiproject/sakai/pull/10016