Details
-
Bug
-
Resolution: Fixed
-
Low
-
9.7.0
-
9.07
-
Severity 3 - Minor
-
Description
Issue Summary
On the “Filter board” page, the “Clear search” button does not have keyboard support and an accessible name.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the mentioned instance with a keyboard.
- Observe that the button does not have keyboard support.
- 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