Skip to content

Fix Visible, non-interactive elements with click handlers must have at least one keyboard listener. problem found by sonar #7585

@AlexeyGirin

Description

@AlexeyGirin

Problem: Visible, non-interactive elements with click handlers must have at least one keyboard listener.
Mouse events should have corresponding keyboard events
Why is this an issue?
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.
How can I fix it in JSX??
Add at least one of the following event handlers onKeyUp, onKeyDown, onKeyPress to the element when using onClick event handler. Add corresponding event handlers onfocus/onblur to the element when using onmouseover/onmouseout event handlers.

Noncompliant code example

<div onClick={() => {}} />

<div onMouseOver={ () => {}} }  />

Compliant solution

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

<div onMouseOver={ () => {} } onFocus={ () => {} } />

Problem locations:

  1. packages/ketcher-react/src/script/ui/views/modal/components/toolbox/Atom/Atom.tsx:236
  2. packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Accordion/Accordion.tsx:44
  3. packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx:44
  4. packages/ketcher-react/src/script/ui/views/modal/components/Text/Text.tsx:178
  5. packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx:86
  6. packages/ketcher-react/src/script/ui/component/view/Tabs/Tabs.jsx:51
  7. packages/ketcher-react/src/script/ui/component/form/select-list.jsx:34
  8. packages/ketcher-react/src/script/ui/component/form/colorPicker/ColorPicker.tsx:98
  9. packages/ketcher-react/src/script/ui/component/form/colorPicker/ColorPicker.tsx:93
  10. packages/ketcher-react/src/script/ui/component/form/Input/Input.tsx:191
  11. packages/ketcher-react/src/script/ui/component/actionmenu.jsx:151
  12. packages/ketcher-macromolecules/src/components/monomerLibrary/monomerLibraryItem/MonomerItem.tsx:110
  13. packages/ketcher-macromolecules/src/components/modal/Open/OpenOptions/FileDrop/FileDrop.tsx:90

Metadata

Metadata

Assignees

No one assigned

    Labels

    Priority: LowSeverity: LowLow level visibility to the userSonarBucket: Issues found by Sonar scanner

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions