search

sul-dlss / exhibits

Stanford University Libraries online exhibits showcase
https://exhibits.stanford.edu
Other
19 stars 7 forks source link

Aria-labelledby should only be applied to semantic elements #2500

Open alundgard opened 1 month ago

alundgard commented 1 month ago

Current behavior

aria-labelledby is applied to non-semantic HTML elements (div) without an appropriate role attribute.

Steps to reproduce

Example page: Parker Library - Search Results.

Inspect the "Limit your search" facet menu options.

Possible solution

Note: This issue is similar to #2498.

WCAG Level A: What happens when aria-label, aria-labelledby and aria-describedby are on static HTML elements?.

See SODA's recommendations below.

Reported by SODA

Violation: Ensure ARIA roles, states, and properties are valid Severity: Minor

[Issue] Some elements contain invalid ARIA attributes or values (states, roles, and properties). This div element has an aria-labelledby attribute. ARIA-LABELLEDBY is not supported on non-semantic elements such as DIV and SPAN.

[User Impact] When ARIA attributes (state, roles, and properties) are not valid according to the specification or are not used correctly, assistive technology may not function as expected.

[Code Reference]

<h3 class="..." id="facet-format_main_ssim-header">
   <button type="button" class="..." aria-expanded="true"> Resource type </button>
</h3>
<div class="..." aria-labelledby="facet-format_main_ssim-header" id="facet-format_main_ssim">
   <div class="...">
      <ul class="...">
         <li>
            <span class="...">
               <span class="...">Archive/Manuscript</span>
               <a href="..." rel="nofollow" class="...">
                  <span aria-hidden="true" class="...">✖</span>
                  <span class="...">[remove]</span>
               </a>
            </span>
            <span style="..." class="...">559</span>
         </li>
      </ul>
   </div>
</div>

[Recommendation] Use a different element than DIV for wrapping the section (such as <section>) or add a role to the DIV.

jcoyne commented 1 month ago

I think this is in Blacklight: https://github.com/projectblacklight/blacklight/blob/abf6f24bb8e53354dc91db8520f029bee68c4a4c/app/components/blacklight/facet_field_component.html.erb#L16