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.

Epic Link

None

Activity

Show:
Harry Rein
October 26, 2017, 7:29 PM

Sounds good!

Alasdair Swan
October 26, 2017, 6:59 PM

your header updates should fix this one too. Can you please wait until your header is in prod and then close.

Alasdair Swan
October 25, 2017, 5:12 PM

edx-platform fix should be a part of https://openedx.atlassian.net/browse/LEARNER-2955
Separate ticket for edx-mktg fix?

Fixed
Your pinned fields
Click on the next to a field label to start pinning.

Priority

CAT-2

Assignee

Harry Rein

Sprint

None

Reporter

Mark Sadecki