Issue Summary

On the “Filter board” page, the “Clear search” button does not have keyboard support and an accessible name.

Steps to Reproduce

1. Navigate onto the above mentioned page.
2. Navigate onto the mentioned instance with a keyboard.
3. Observe that the button does not have keyboard support.
4. As well, observe that the button does not have an accessible name.

Actual Results

The "Clear search" button (that appears when some characters are typed into the "Find a board" input field) lacks keyboard support. As a result, it cannot be operated with a keyboard and screen reader.

As well, this button does not have a programmatically defined accessible name. As a result, users of assistive technologies will not be able to understand the purpose or the functionality associated with the button.

Expected Result

All interactive elements should be focusable and operable with a keyboard. Use native a <button> element that has keyboard support by default. If this is not possible, use custom role="button" and tabindex="0" to make sure that this button receives keyboard focus and has an interactive role. As well, use aria-label attribute to provide an accessible name for the button. Make sure that the accessible name signposts the purpose or the functionality of the button.

Screenshot

Code snippet

<button aria-label="clear search">...</button>
<span role="button" tabindex="0" aria-label="Clear search">...</span>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environments

MacBook Pro (16-inch, 2021)
macOS Monterey Version 12.4
Chrome - Version 103.0.5060.134 (Official Build) (arm64)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.5 (17613.2.7.1.8)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest