Describe the bug.
On /tools, the Filter and Jump to Category controls are implemented as clickable div elements instead of semantic button elements. This causes poor keyboard accessibility (focus/activation
behavior is inconsistent for keyboard-only users).
Also, the filter popup wrapper is rendered as a <button> containing interactive children (<Filters />), which is invalid interactive markup and can lead to unpredictable browser/screen-reader behavior.
Expected behavior
- Filter and Jump to Category should be semantic controls (
<button type="button">) and fully keyboard operable.
- The filter popup wrapper should be a non-interactive container (
<div>), not a button wrapping other interactive elements.
- Keyboard users and assistive tech users should get consistent behavior and announcements.
Screenshots
I will attach a Loom video showing:
- Keyboard-only interaction issues on
/tools
Loom Video Showing Bug and Fix
How to Reproduce
- Run the website locally or navigate to the website (https://www.asyncapi.com/tools):
- Open:
http://localhost:3000/tools or https://www.asyncapi.com/tools
- Use keyboard only (
Tab, Shift+Tab, Enter, Space).
- Navigate to Filter and Jump to Category controls.
- Try opening/closing controls with keyboard.
- Inspect DOM in DevTools:
- Trigger controls are clickable
divs.
- Filter popup is wrapped in a
<button> containing interactive content.
🖥️ Device Information [optional]
- Operating System (OS): macOS
- Browser: Chrome
👀 Have you checked for similar open issues?
🏢 Have you read the Contributing Guidelines?
Are you willing to work on this issue ?
Yes I am willing to submit a PR!
Describe the bug.
On
/tools, the Filter and Jump to Category controls are implemented as clickabledivelements instead of semanticbuttonelements. This causes poor keyboard accessibility (focus/activationbehavior is inconsistent for keyboard-only users).
Also, the filter popup wrapper is rendered as a
<button>containing interactive children (<Filters />), which is invalid interactive markup and can lead to unpredictable browser/screen-reader behavior.Expected behavior
<button type="button">) and fully keyboard operable.<div>), not a button wrapping other interactive elements.Screenshots
I will attach a Loom video showing:
/toolsLoom Video Showing Bug and Fix
How to Reproduce
npm run devhttp://localhost:3000/toolsorhttps://www.asyncapi.com/toolsTab,Shift+Tab,Enter,Space).divs.<button>containing interactive content.🖥️ Device Information [optional]
👀 Have you checked for similar open issues?
🏢 Have you read the Contributing Guidelines?
Are you willing to work on this issue ?
Yes I am willing to submit a PR!