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.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
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.

Michael Frey
November 16, 2017, 4:29 PM

Just rip out for now. No adding anything else.

Mark Sadecki
November 16, 2017, 4:43 PM

+1

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

Is going to provide some further recommendations.

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>

Fixed

Assignee

Michael Terry

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

Story Points

3

Epic Link

Sprint

None

Due date

2017/12/08

Priority

CAT-2
Configure