Visible, non-interactive elements with click handlers must have at least one keyboard listener

[derberg]

Affected accessibility because of below code from Sidebar.tsx

return (
    <SidebarContext.Provider value={{ setShowSidebar }}>
      <div
Visible, non-interactive elements with click handlers must have at least one keyboard listener.
        className="burger-menu rounded-full h-16 w-16 bg-white fixed bottom-16 right-8 flex items-center justify-center z-30 cursor-pointer shadow-md bg-teal-500"
        onClick={() => setShowSidebar(prev => !prev)}
        data-lol={showSidebar}
      >

more details: https://sonarcloud.io/project/issues?pullRequest=744&open=AYtrMfuPCKuSkLgXi7U7&id=asyncapi_asyncapi-react

Offering the same experience with the mouse and the keyboard allow users to pick their preferred devices.

Additionally, users of assistive technology will also be able to browse the site even if they cannot use the mouse.

This rules detects the following issues:

when onClick is not accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress.
when onmouseover/onmouseout are not paired by onfocus/onblur.

Possible solution

<div onClick={() => {}} onKeyDown={this.handleKeyDown} /> => <div onMouseOver={ () => {} } onFocus={ () => {} } />

[harshit-senpai]

hey @derberg I would like to work on this issue, I think i'll be comfortable with this as a MERN Developer

[derberg]

@harshit-senpai sure, go ahead and try. First propose the solution and then open a PR

[harshit-senpai]

sure @derberg Here is the proposed solution :

Based on the information provided, and here is how I would address the issue:

The issue is occurring on the <div> with the burger-menu className because it has an onClick handler but no keyboard event handlers like onKeyUp/onKeyDown/onKeyPress.

This fails accessibility best practices because it provides a click interaction but no keyboard alternative, preventing users who rely on keyboard navigation from using this element.

To fix it, we need to add at least one keyboard event handler to support keyboard accessibility, for example:

<div 
  className="burger-menu"
  onClick={() => setShowSidebar(prev => !prev)}
  onKeyDown={() => setShowSidebar(prev => !prev)} 
>

By adding onKeyDown, we now provide a keyboard interaction that mirrors the onClick mouse interaction.
This satisfies the accessibility requirement and provides a consistent experience for mouse and keyboard users.

Let me know if this was the kind of solution that you were hoping for.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️