Changelog #41

We are excited to announce accessibility improvements to the site search toggle and navigation bar. These updates improve keyboard usability, screen reader compatibility, and overall compliance with accessibility standards.

Enhancements were made to improve keyboard navigation and screen reader compatibility for the site search feature:

• Replaced the SVG icon as a semantic HTML button element.
• Added ARIA attributes to improve assistive technology support.
• Verified compliance with accessibility standards and improved overall user experience for keyboard and assistive technology users.

For Developers:

Any custom modules or subthemes that provide their own page--*.html.twig overrides also need the same updates applied manually.

How to find affected templates:

Search toggle: Search for any Twig template that has a bare <span class="toggle-button"> inside <div class="search"> with a <button> wrapper

grep -rn 'class="search"' --include="*.twig" web/themes/ web/modules/custom/

If the next line after <div class="search"> is <span class="toggle-button"> instead of <button ... id="search-toggle-container">, the file needs updating.
 

Navbar Toggle: Search for navbar toggle buttons missing aria attributes using grep -rn 'class="navbar-toggle"' --include="*.twig" web/themes/ web/modules/custom/

grep -rn 'class="navbar-toggle"' --include="*.twig" web/themes/ web/modules/custom/

If the line does NOT contain aria-expanded="false" aria-controls="navbar-collapse", it needs updating.

How to fix affected templates: 

Search toggle: Replace the following old markup:

<div class="search">
  <span class="toggle-button">
    <svg class="mag" ...>
    ...
    </svg>
    <svg class="arrow" ...>
    ...
    </svg>
  </span>
</div>

New Markup:

<div class="search" aria-expanded="false">
  <button type="button" id="search-toggle-container" aria-expanded="false" aria-label="Search">
    <span class="toggle-button" aria-hidden="true">
      <svg
      class="mag"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M15.2397415,16.6539551 C14.1023202,17.4996184 12.6929286,18 11.1666667,18 C7.39272088,18 4.33333333,14.9406125 4.33333333,11.1666667 C4.33333333,7.39272088 7.39272088,4.33333333 11.1666667,4.33333333 C14.9406125,4.33333333 18,7.39272088 18,11.1666667 C18,12.6929286 17.4996184,14.1023202 16.6539551,15.2397415 L20.2071068,18.7928932 C20.5976311,19.1834175 20.5976311,19.8165825 20.2071068,20.2071068 C19.8165825,20.5976311 19.1834175,20.5976311 18.7928932,20.2071068 L15.2397415,16.6539551 Z M11.1666667,16 C13.836043,16 16,13.836043 16,11.1666667 C16,8.49729038 13.836043,6.33333333 11.1666667,6.33333333 C8.49729038,6.33333333 6.33333333,8.49729038 6.33333333,11.1666667 C6.33333333,13.836043 8.49729038,16 11.1666667,16 Z"></path>
      </svg>

      <svg
      class="arrow"
      width="14"
      height="14"
      viewBox="0 0 24 24"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M12,12.5857864 L8.70710678,9.29289322 C8.31658249,8.90236893 7.68341751,8.90236893 7.29289322,9.29289322 C6.90236893,9.68341751 6.90236893,10.3165825 7.29289322,10.7071068 L11.2928932,14.7071068 C11.6834175,15.0976311 12.3165825,15.0976311 12.7071068,14.7071068 L16.7071068,10.7071068 C17.0976311,10.3165825 17.0976311,9.68341751 16.7071068,9.29289322 C16.3165825,8.90236893 15.6834175,8.90236893 15.2928932,9.29289322 L12,12.5857864 Z"></path>
      </svg> 
    </span>
  </button>
</div>

Navbar Toggle: Replace the following old markup:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">

New Markup:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar-collapse">