Current selected view type should be indicated to screen readers

[alundgard]

Current behavior

The currently-selected view type (List, Gallery, Heatmap, Masonry, or Slideshow) is not indicated to screen readers.

Steps to reproduce

Example page (/browse): Spotlight Accessibility for SODA - San Francisco Buildings. Example page (/catalog): Parker Library - Search Results.

Navigate the view type buttons with a screen reader. The currently-selected view is not indicated.

Possible solution

WCAG Level A: Understanding Success Criterion 4.1.2: Name, Role, Value

Reported by SODA

Violation: Ensure custom controls provide proper textual name, role, and state information Severity: Major

[Issue] The buttons for the different views (list, gallery, etc.) do not indicate which is the currently selected item.

[User Impact] When controls do not provide name, role and/or state, screen reader users will not know their purpose and current state (if applicable).

[Code Reference] Example page (/browse): Spotlight Accessibility for SODA - San Francisco Buildings.

<a title="Gallery" class="btn btn-outline-secondary btn-icon view-type-gallery active" href="/a11y-for-soda/browse/san-francisco-buildings?view=gallery">
  <span class="blacklight-icons blacklight-icon-gallery"><!--?xml version="1.0"?-->
<svg width="24" height="24" viewBox="0 0 24 24" aria-label="Gallery view" role="img">
  <title>Gallery view</title>
  <path fill="none" d="M0 0h24v24H0V0z"></path>
  <path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"></path>
</svg>
</span>
  <span class="caption">Gallery</span>
</a>

Example page (/catalog): Parker Library - Search Results.

<div class="...">
   <a title="List" class="..." href="...">
      <span class="..."><!--?xml version="1.0"?-->
         <svg width="24" height="24" viewBox="0 0 24 24" aria-label="List view" role="img">
            <title>List view</title>
            <path d="..."></path>
            <path d="..." fill="none"></path>
         </svg>
      </span>
      <span class="...">List</span>
   </a>
   <a title="Gallery" class="..." href="...">
      <span class="..."><!--?xml version="1.0"?-->
         <svg width="24" height="24" viewBox="0 0 24 24" aria-label="Gallery view" role="img">
            <title>Gallery view</title>
            <path fill="none" d="..."></path>
            <path d="..."></path>
         </svg>
      </span>
      <span class="...">Gallery</span>
   </a>
   <a title="Masonry" class="..." href="...">
      <span class="..."><!--?xml version="1.0"?-->
         <svg width="24" height="24" viewBox="0 0 24 24" aria-label="Masonry view" role="img">
            <title>Masonry view</title>
            <path fill="none" d="..."></path>
            <path d="..."></path>
         </svg>
      </span>
      <span class="...">Masonry</span>
   </a>
</div>

[Recommendation] There are multiple possible solutions. One of the simpliest may be to add an aria-label on the that indicates the state, such as

<a aria-label="Gallery: Currently Selected">

Another solution is to use aria-current.

<a aria-current="true">

Should this be solved in Blacklight itself?