search

web-illinois / toolkit

This library provides styles and web components for creating branded UIUC websites.
18 stars 7 forks source link

Search form button needs text content #393

Closed Detzner closed 1 year ago

Detzner commented 2 years ago

For the magnifying glass button in the search form, AInspector brings up 2 errors:

  1. ‘Add text content to the BUTTON element.’
  2. 'IMAGE is not a defined aria role' To change this I beautified the toolkit.js code that I downloaded from the cdn, and used that for a test site. In toolkit.js, line 4975, I deleted ‘role=“image” ’ (IMAGE is not a defined aria role) and after I added Submit search
trnelson-uillinois commented 1 year ago

This solves the #233 issue as well. I customize the toolkit.js code locally too so I can make this change for my sites, but I wanted to comment on this fix from Richard Detzner to promote it. Thank you Richard. This is an easy fix that should be prioritized and included in the baseline toolkit. it solves the accessibility issues flagged by AInspector. Thanks, Todd

Detzner commented 1 year ago

Thanks, Todd. There's one more change to add in the same place: add text to the magnifying glass button (BUTTONs must have content) If you add this immediately after the tag it won't be visible but can be read by a screen reader: Submit search

Detzner commented 1 year ago

whoops- the comment stripped out the code. I'll try again without the brackets around the span tags: span class="visible-hidden" style="clip: rect(1px, 1px, 1px, 1px);height: 1px;overflow: hidden;position: absolute;white-space: nowrap;width: 1px;" Submit search /span