Improperly implemented treeview. Convert to a nested list.

Description

Location: Any Course Home Page e.g. https://courses.edx.org/courses/course-v1:edX+StudioX+3T2017/course/

Severity: 5

Description: The entire main content section is implemented with ARIA role="tree". Wen tabbing through the elements, the roles are not properly rendered, multiple tab stops for each section, and the keyboard interaction does not even correspond one for a tree view. In addition, treeitems also have aria-expanded attributes when there is no section expanded for the section. This page will be highly inaccessible and confusing to people using a screen reader.

Pattern: None

Auditor Note: Developers must ensure that ARIA roles are not used when it is not necessary and ensure when they are necessary, that the roles, state, and properties chosen are correct for the functionality of the component. In this case, the page is just composed of different sections with headings and links to the specific course. Remove the ARIA role of tree and treeitem.
Compliant example:
<ol class="block-tree">
<li class="outline-item section" id="block-v1">
<div class="section-name">
<h3>Introduction</h3>
</div>
<ol class="outline-item ">
<li class="subsection">
<a class="outline-item focusable" href="https://level-access.sandbox.edx.org/courses/course-v1" id="block-v1:LevelAccessX+LA101+2017_08">
<div class="subsection-text">
<span class="subsection-title">About this course</span>

</div> <!-- /subsection-text -->
</a>
</li>
...
</ol>
</li>
...
</ol>

Internal Note: This is a result of value engineering this feature. It was originally scoped to allow for expanding and collapsing the subsections, but this feature was removed during engineering. The accessibility roles are not longer relevent. If we plan on making these expanding and collapsing, we need to do that. If not, we need to re-engineer the front end of this differently.

Epic Link

Activity

Show:
Mark Sadecki
November 16, 2017, 5:17 PM

per our conversation, this is the HTML i recommend. I kept all the CSS classes the same, so visually, nothing should change, I just ripped a bunch of extra markup out. There is likely lots of javascript that can also be ripped out. Here is what the HTML should look like:

Note, I suggest removing the extra sr-only text that is added before the Resume Course text, its unnecessary and adds extra verbiage to an already very long link text. In addition to simplifying the HTML as per below, remove the following node:

<span class="sr-only">This is your last visited course section.</span>

Albert (AJ) St. Aubin
November 16, 2017, 5:04 PM

Is going to provide some further recommendations.

Mark Sadecki
November 16, 2017, 4:43 PM

+1

Michael Frey
November 16, 2017, 4:29 PM

Just rip out for now. No adding anything else.

Zachary Rockwell
November 16, 2017, 4:27 PM

I think since the functionality doesn't exist we should rip it out. We can add it back in when we do the next story.

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

Priority

CAT-2

Assignee

Michael Terry

Sprint

None

Story Points

3

Reporter

Mark Sadecki