[Faceted Filters] Clear controls do not manage focus

[svinkle]

Issue summary

When using the facet clear controls, keyboard focus is not managed on behalf of the user. When a clear control is activated focus is lost and, depending on the environment, could be placed at the top of the DOM. As a result, users may need to navigate back to where they were previously. Some sighted AT user groups may be confused when the focus indicator disappears as a result.

Screenshots

Steps to reproduce

1. Go to a collection page with Dawn theme with any supported browser.
2. Navigate to and activate a Facet Filter control.
3. Activate a facet.
4. Navigate to the facet close control and activate.

Behavior

Expected

• Focus to shift to a logical place in order for AT users to understand where focus is and where to start navigating from.

Actual

• Keyboard focus is lost.

Recommendation

On Desktop:

1. If only one facet is active, shift focus to the "Filter by" heading. Add tabindex="-1" to the heading in order for it to receive focus.
2. If more than one facet is active, shift focus to next filter link.

On Mobile:

1. If only one facet is active, shift focus to the "Filter and sort" control.
2. If more than one facet is active, shift focus to next filter link.

With this in place, keyboard-only users and screen reader users will have focus set back to a logical start position providing a mechanism to continue navigating from this point. Other sighted AT users (such as voice dictation) will have an understanding of the current keyboard cursor position.

Recommended code

Specifications

• Component: Faceted Filters
• WCAG Principal: Operable
• WCAG SC: 2.1.1 Keyboard
• Severity: Medium
• Effort: Medium