Create real pagination for facet filtering desktop and mobile

Description

Location: Search results page e.g. https://www.edx.org/course?

Severity: 10

Description: The More.... control under the Filters Subject sub-section is not accessible with Voiceover. When accessibility is not enabled for actionable controls such as the More control, Voiceover users will not have access to the other categories and therefore will not benefit from this feature.

Pattern: None

Auditor Note: Developers must ensure that accessibility is enabled for the control. This can be done by ensuring that the isAccessibilityElement property is set to Yes.

Internal Note: This affects the desktop view as well. We need to implement real pagination here.

Proposed Solution

  • Hide the options not shown to the screen from everyone, using display:none

  • on-click of more, display:block

Epic Link

Activity

Show:
Mark Sadecki
November 16, 2017, 7:15 PM

Those are my notes, yes. The non-visible items are only hidden from sighted users, not from keyboard or screen reader users, so they do not benefit from being able to browse just a subset of the categories. This is made worse because non-visual and keyboard only users must TAB through each and every category, visible or not, to get to the other side. Sighted users need only not look at the item. The solution is to truly show/hide the non-visible items using display:none.

Albert (AJ) St. Aubin
November 16, 2017, 3:55 PM

Did you also write the Proposed solution here.

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

Priority

CAT-2

Assignee

Christopher Lee

Sprint

None

Story Points

3

Reporter

Mark Sadecki