Search button label a11y mismatch
colindean opened this issue · 5 comments
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
Ouch, this might be a problem in docsearch since this is all we provide:
I poked around the docsearch docs quickly and didn't find something obvious that would let us control this appearance.
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
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.
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.