Ensure page tabs contain proper textual descriptions indicating state and role

Description

Sequence navigation in LMS.

The items within the ordered list with id="sequence-list" are two page tabs with a set of buttons to alternate between the two page tabs.

Without the appropriate role information, screen reader users may be unable to perceive the structure of these elements, and how activating a link will adjust the page.

Developers must fully implement the aria role of "tab", "tablist", and "tabpanel".

The tablist role should be placed on the element with id="sequence-list", the tabs (e.g. id="tab_0") should contain the role of tab, and the div elements they control (which should already contain aria-controls) should receive the role of tabpanel.

The button elements at the end should either be removed entirely if they simply duplicate the actions of the tab elements. Alternatively, adding an aria-describedby attribute to more fully explain what function these buttons serve may be one accessible option for these controls.

Acceptance Criteria:

  • Hiding prev and next buttons in the header for screenreaders

    • Make sure focus still work correctly - buttons should not be focusable

  • Add aria roles of "tab", "tablist", and "tabpanel" to correct elements related to sequential nav

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Assignee

Unassigned

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Story Points

3

Epic Link

Sprint

None

Priority

CAT-3
Configure