Homebrew / brew.sh

🔖 The Homebrew homepage
https://brew.sh
BSD 2-Clause "Simplified" License
134 stars 141 forks source link

Search button label a11y mismatch #978

Closed colindean closed 1 year ago

colindean commented 1 year ago

The search button doesn't pass the test which requires the aria-label to be very similar the the content inside the button.

Search K
<button type="button" class="DocSearch DocSearch-Button" aria-label="Search">

Details: https://dequeuniversity.com/rules/axe/4.7/label-content-name-mismatch

colindean commented 1 year ago

Ouch, this might be a problem in docsearch since this is all we provide:

https://github.com/Homebrew/brew.sh/blob/d60d598a608541d2e7bca0590f14853f85dc4e90/_layouts/base.html#L69C1-L70

colindean commented 1 year ago

I poked around the docsearch docs quickly and didn't find something obvious that would let us control this appearance.

Bo98 commented 1 year ago

Doesn't seem like much of a problem given the content here is just a magnifying glass and the word "Search", and I guess the Ctrl+K shortcut combo graphic?

But if you feel it's worth it, the place to look is DocSearchTranslations

colindean commented 1 year ago

TBH it doesn't really seem like that big of a mismatch: the Aria label of "search" differs from the text content of the label in a meaningless way: some characters that are superfluous to the spoken label. This might be an accessibility thing that is a bit of a false positive bad thing in our case.

MikeMcQuaid commented 1 year ago

Will review a PR for this but 👎🏻 on this being an issue that needs to remain open for someone to resolve. The label seems accurate to me and it feels like the automated test is suboptimal.