Selecting view type or filter should not shift focus to the top of the page

[alundgard]

Current behavior

Selecting a view type or filter using the keyboard or screen reader shifts the focus back to the top of the page.

Steps to reproduce

Example page: Spotlight Accessibility for SODA - San Francisco Buildings.

Navigate to the view type buttons with the keyboard or screen reader and make a selection. Also, navigate to the sidebar filters and make a selection.

Possible solution

WCAG Level A: Understanding Success Criterion 3.2.1: On Focus.

SODA recommends moving the focus to the beginning of the updated content (in this case, the exhibit items). Doing so would mean jumping over the Search input field, which sits between the view options and exhibit items. Or, when selecting a filter from the sidebar, focus would jump across sections of the page.

Another possibility may be to leave focus in its current position (at the view type button or sidebar filter), but with an indication that it has been selected (see #2472).

Reported by SODA

Violation: Ensure content updates define focus updates appropriately
Severity: Major

[Issue]
When activating the buttons for list vs. grid view, the focus shifts to the top of the page rather than being on the new view of content.

[User Impact]
When content within a page changes without reloading the page and without appropriate focus changes, assistive technologies such as screen readers may not be aware of the changes or the user may only be alerted that a change in content occurred and have to review the entire page to discover exactly what changed.

[Recommendation]
When the context of the page changes such as when the user initiates a change that updates a large portion of the page (e.g. in a single page application) focus should move to the beginning of the updated content. Similarly, when a button is activated to open a dialog, focus should be moved into the dialog. When the dialog is closed, focus needs to return to the element that triggered the dialog.

When activating any filter, the focus should either remain on the control or move to the search results. Use Javascript .focus() or another technique to manage focus.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

[jcoyne]

The different view types are actually different web pages. Note the view parameter is changed in the url:

https://exhibits.stanford.edu/a11y-for-soda/browse/san-francisco-buildings?view=list
https://exhibits.stanford.edu/a11y-for-soda/browse/san-francisco-buildings?view=gallery

[alundgard]

The different view types are actually different web pages.

Thanks, I see that selecting filters from the sidebar has the same issue.

[dnoneill]

@alundgard @jcoyne clicking on those icons actually reloads the page and goes it the equivalent of a new url. Does that change the recommendation or is it the same?

[jcoyne]

Yes. That's what I've been trying to say.

[alundgard]

Because each facet/view setting loads a new page, it seems that it's not possible to easily solve this focus issue.

Unless you have other ideas, we may need to rely on the skip links (Skip to main content, Skip to search, Skip to first result) to help users to jump to the relevant section of the page.

These skip links are present in the Spotlight DOM, but they don't appear when navigating by keyboard tabbing the way they do in other Blacklight applications (Archives, EarthWorks).


Absent other approaches, my suggestion for handling this issue is to improve the way skip links appear in Spotlight.

[hudajkhan]

Below is what these skip link options look like in various Blacklight-based systems including a modified version of Exhibits. @alundgard it would be good to know which option would make sense for Exhibits.

First, here is a screenshot from a modified version of Exhibits on the search results page:

These are screenshots from Spotlight:

This is a screenshot from EarthWorks:

This is a screenshot from SearchWorks:

@alundgard , from the non-exhibits sites above, is there a pattern we would rather be following for Exhibits? For EarthWorks and Spotlight, the skip link options are all listed in a horizontal row. For SearchWorks, the options are all in the same place and the user can toggle between them. Exhibits seems to be doing something similar on the home page when there are only two skip link options (main question and search) but it seems to be a bit of both on the search results page (showing two options in a horizontal row, but giving the option to toggle between options for one of the spots).
Also, I assume we probably want to change the spacing for the the Exhibits options (since they seem to overlap with the header in a weird way)?

[alundgard]

@hudajkhan Thanks for the screenshots.

• I think the EarthWorks design pattern is straightforward. Let's try to emulate that pattern.
• There are only 2 skip links on the home page because there are no search results on that page. If you visit a search result page, the Skip to first result link will appear in the link list.
• I wonder if this work intersects with this PR from @jcoyne ?

[hudajkhan]

Yes #2750 and #2751 are both related. The result looks like

Also even without tabbing, I see the link to result on the results page: