LI elements need role=presentation when used in aria menu

Description

Location: Any page in courseware e.g. https://courses.edx.org/dashboard

Severity: 3

Description: <li class="dropdown-item item has-block-link"><a href="/dashboard" role="menuitem" class="action dropdown-menuitem">Dashboard</a></li>

The user dropdown menu is implemented with UL and LI elements but since the UL element has role="menu" the ARIA role overrides the parent UL element which makes the LI elements stand on their own without a container.

Pattern: None

Auditor Note: To ensure the list structure is ignored by assistive technologies and only the menu semantics is conveyed properly, add role="presentation" in the LI elements of the list:

<li role="presentation" class="dropdown-item item has-block-link">
<a href="/dashboard" role="menuitem" class="action dropdown-menuitem">Dashboard</a>
</li>

Internal Note: We NEED to make the menu that appears on the public website use the same code as this once its fixed. To a screen reader user, this behave differently even though they do the same thing and appear in the same place on every page.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Harry Rein

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 &amp; 2)

None

Platform Map Area (Levels 3 &amp; 4)

None

Sprint

None

Due date

2014/04/15

Priority

CAT-2
Configure