DP-22293 Make search page more accessible

[ygannett]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

Org. filter

Org. filter toggle

For AT users, no contextual information for the org. filter toggle button.

• Set up contextual information through aria-describedby on the button.
  • Add the contextual information above the button: <div id="toggle-org-filter" class="ma__visually-hidden" aria-hidden="true">Click the button to show/hide organizataion options for an organization specific search.</div>.
  • Associate div.toggle-org-filter with the button with aria-describedby.
  • aria-hidden="true" on div#toggle-org-filter ensures it's only announced when the button has focus.

TO-DOs:

• Set up div#toggle-org-filter as optional to make the component more versatile. In this particular case, this contextual information is necessary, but it might not in other cases. In case the component is used for other than the search, div#toggle-org-filter would be generated.

Org. filter options (Combobox)

TO-DOs:

• Add label for input.react-autosuggest__input. This label also serves to provide context info for the option list ul.react-autosuggest__suggestions-list, so don't use aria-label on input.react-autosuggest__input.
• Add ID to label to associate with aria-describedby on ul.react-autosuggest__suggestions-list.
• Change the aria-haspopup value to true on div.react-autosuggest__container. The current value listbox is proper for this use, but not supported by most of browsers and benefit only Safari users. For now, use true to be helpful to all users.
• Change type to text from search.
• Add ID to input.react-autosuggest__input to associate with the for attribute on label.
• Add aria-haspopup="true" to input.react-autosuggest__input for the option list.
• Remove role="listbox" from div.react-autosuggest__suggestions-container since ul.react-autosuggest__suggestions-list has one. This is a duplicate.
• Add aria-describedby to ul.react-autosuggest__suggestions-list to establish an association with the added label above.

Markup is expect to look like:

<div class="ma__header-search__wrapper ma__header-search__wrapper--responsive">
  <div class="ma__header-search__pre-filter">
    <div>
      <!-- CONTEXT INFO FOR THE TOGGLE FOR ASSISTIVE TECHNOLOGIES -->
      <!-- ARIA-HIDDEN TO ENSURE THE CONTENT IS ANNOUNCED ONLY TO THE ASSOCIATION WITH THE BUTTON. -->
      <div id="toggle-org-filter" class="ma__visually-hidden" aria-hidden="true">Click the button to show/hide organization options for an organization specific search.</div>
      <!-- COMBOBOX TOGGLE -->
      <!-- ADD aria-controls="org-options" TO SET UP AN ASSOCIATION WITH THE COMBOBOX COMPONENT.  THIS TELLS aria-expanded INDICATES THE STATE OF THE COMBOBOX. --> 
      <button class="ma__button-icon ma__button-icon--expanded ma__button-icon--capitalized ma__icon-small "
              tabindex="0"
              aria-expanded="true"
              aria-controls="org-typeahed-input"
              aria-describedby="toggle-org-filter">
        <span>All Organizations</span><svg aria-hidden="true" width="20" height="20" viewBox="0 0 59 38" xmlns="http://www.w3.org/2000/svg"><path d="M29.414 37.657L.344 8.586 8.828.102l20.586 20.584L50 .1l8.484 8.485-29.07 29.072"></path></svg>
      </button>

      <!-- COMBOBOX -->
      <!-- ADD id="org-typeahed-input" TO ESTABLISH AN ASSOCIATION WITH BUTTON ABOVE. --> 
      <div class="ma__input-typeahead ma__input-typeahead--boxed" id="org-typeahed-input">
        <!-- CHANGE aria-haspopup="listbox" TO aria-haspopup="true" SINCE listbox IS CURRENTLY ONLY SUPPORTED BY SAFARI AND IT'S NOT HELPING MAJORITY OF USERS. -->
        <!-- REMOVE aria-owns="react-autowhatever-org-typeahead" AS A PARENT-CHILD RELASTIONSHIP IS ESTABLISHED THROUGH THE STRUCTURE. -->
        <div role="combobox"
             aria-haspopup="listbox"
             aria-expanded="true"
             class="react-autosuggest__container react-autosuggest__container--open">
          <!-- ADD label. -->
          <!-- THE LABEL IS NOT VISIBLE TO SIGHTED USERS. NOT USING ARIA-LABLE TO ESTABLISH ASSOCIATION WITH THE OPTION LIST AS WELL. THIS LABEL IS USED FOR INPUT AND UL BELOW. -->   
          <label for="org-filter" id="org-filter-label" class="ma__visually-hidden">Type keywords, then select an organization from the list.</label>
          <!-- CHANGE type TO text. -->
          <!-- ADD ID org-filter TO ASSOCIAGE WITH ADDED label ABOVE. -->
          <!-- ADD aria-haspopup= "true".  DON'T USE listbox FOR VALUE SINCE IT'S NOT SUPPORTED BY MOST OF BROWSERS YET. -->
          <input type="text"
                 id="org-filter"
                 autocomplete="off"
                 aria-autocomplete="list"
                 aria-haspopup= "true"
                 aria-controls="react-autowhatever-org-typeahead"
                 class="react-autosuggest__input react-autosuggest__input--open react-autosuggest__input--focused"
                 placeholder="Search an organization..."
                 value="">
          <!-- REMOVE role="listbox" SINCE UL HAS ONE. -->
          <div class="react-autosuggest__suggestions-container react-autosuggest__suggestions-container--open"
               id="react-autowhatever-org-typeahead">
            <!-- ADD aria-describedby="org-filter-label" TO ASSOCIATE WITH label ABOVE. -->
            <ul role="listbox"
                class="react-autosuggest__suggestions-list"
                aria-describedby="org-filter-label">
              <li role="option" id="react-autowhatever-org-typeahead--item-0" aria-selected="false" class="react-autosuggest__suggestion react-autosuggest__suggestion--first" data-suggestion-index="0"><span class="ma__suggestion-content"><span class="ma__suggestion-content-name"><span>All Organizations</span></span></span></li>
              <li role="option" id="react-autowhatever-org-typeahead--item-1" aria-selected="false" class="react-autosuggest__suggestion" data-suggestion-index="1"><span class="ma__suggestion-content"><span class="ma__suggestion-content-name"><span>Org Having (Parentheses in the Name)</span></span></span></li>
              ...
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ma__header-search">
    <form action="#" class="ma__form" role="search">
      <label for="header-search" class="ma__header-search__label">Search terms</label><input id="header-search" class="ma__header-search__input" placeholder="Search Mass.gov" type="search" value="">
      <button class="ma__button-icon ma__button-search " tabindex="0"><span>Search</span><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path d="M19.99 17.4l-5.33-5.295a7.803 7.803 0 001.23-4.216C15.89 3.54 12.33 0 7.95 0 3.57 0 .01 3.54.01 7.89c0 4.351 3.56 7.891 7.94 7.891 1.48 0 2.87-.406 4.06-1.111L17.38 20zM2.97 7.89c0-2.728 2.23-4.948 4.98-4.948 2.75 0 4.98 2.22 4.98 4.948 0 2.729-2.23 4.949-4.98 4.949-2.75 0-4.98-2.22-4.98-4.949z"></path></svg></button>
    </form>
  </div>
</div>

Filter options (Tabs)

They have helpful aria-labels, but not programmatically grouped as a set of options to be recognize by assistive technology.

• Add a label to the component on its container div.ma_search-banner__filter as aria-label="Search result filter".
• Group all buttons as a list with role="tablist" on the button container, div.ma__tabs.
• Add role="tab" to button.ma__tabs-items.
• Add aria-controls="search-results" to button.ma__tabs-items to show where the buttons' feature affects.
• [https://github.com/massgov/massgov-search/pull/751] Add ID to search results container, section.main-content--two to set up a corresponding container for the tab filter options' aria-controls.

No visual changes.

Related Issue / Ticket

• JIRA issue
• Github issue

Steps to Test

1. A partial change is in DP-22293_search-a11y (https://github.com/massgov/massgov-search/pull/751). Test with both PRs together.
2. When the org. filter button gets focus, the contextual information, "Click the button to show/hide organization options for an organization specific search." gets announced.
3. Screen readers announce the filters as "Search result filter" and a list of options.

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

@todo

Today I learned...