Too many elements and interactive features nested in Heading element.

Description

Location: 05 Course - Peer Assessment

Severity: 3

Description: The headings used for each step includes the button to expand it, the text below it and the Status on the right side. When the heading contains the entire block, each element is rendered as heading level 4 with a screen reader which may be confusing to understand the structure of the page

Pattern: None

Auditor Note: Developers must ensure the proper text is implemented as a heading. In this case, only the title of that section should be a heading. The text indicating the status and the text for the due date should be rendered as static text. In addition, this would help with the label of the button as well since currently the label is rendered as the section title and the due date text which is long.
Compliant example:
<h4 class="step__title">
<button aria-describedby="deadline status" class="ui-slidable" aria-expanded="false" id="oa_response..." aria-controls="oa_response_block-v1...">
...<span class="step__label">Your Response</span>
</button>
</h4>
<span class="step__deadline">
<span id="deadline" class="date ora-datetime" ...>due Jan 1, 2029 00:00 GMT (in 11&nbsp;years, 4&nbsp;months)</span>
</span>

<span class="step__status">
<span id="status" class="step_status_value"><
...
Complete
</span>
</span>

Internal Note: I agree with this assessment. Can we get these status indicators outside of the Heading element?

Requirements

  1. Pull the button element outside of the h4 element.

    1. Add an aria-labeledby attribute to the button pointing at the title

    2. Add an id to the title element (the deepest one, containing the actual text of the assessment step - e.g. "Your Response")

    3. Add a caret icon to the button, make this the main control (see screenshots below).

  2. Add an aria-describedby attribute to the step__title elements pointing at the deadline and status

    1. We have to add ids to the status and deadline elements for this attribute to point to.

  3. Do the above for all of the appropriate templates in the response, peer, grade, and self directories (these correspond to each of the different steps available for an open response assessment).

Dev Notes

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Alexander Dusenbery
November 30, 2017, 8:51 PM

This is ready for review again. I'm updating a sandbox with my ORA branch now, will ping when it's ready for viewing.

Mark Sadecki
November 29, 2017, 9:11 PM

Alexander Dusenbery
November 29, 2017, 8:59 PM

Just a status note: things are moving along and looking ok when the assessment is "in progress":


There's still all of the self assessment step to deal with, and the styling is off under the peer assessment step when we're in the "not started" state:

Alexander Dusenbery
November 27, 2017, 6:57 PM
Fixed
Your pinned fields
Click on the next to a field label to start pinning.

Assignee

Alexander Dusenbery

Reporter

Mark Sadecki

Story Points

2