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

Status

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