-
Notifications
You must be signed in to change notification settings - Fork 209
Labels
Priority: LowSeverity: LowLow level visibility to the userLow level visibility to the userSonarBucket: Issues found by Sonar scannerBucket: Issues found by Sonar scanner
Milestone
Description
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:
- packages/ketcher-react/src/script/ui/views/modal/components/toolbox/Atom/Atom.tsx:236
- packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Accordion/Accordion.tsx:44
- packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx:44
- packages/ketcher-react/src/script/ui/views/modal/components/Text/Text.tsx:178
- packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx:86
- packages/ketcher-react/src/script/ui/component/view/Tabs/Tabs.jsx:51
- packages/ketcher-react/src/script/ui/component/form/select-list.jsx:34
- packages/ketcher-react/src/script/ui/component/form/colorPicker/ColorPicker.tsx:98
- packages/ketcher-react/src/script/ui/component/form/colorPicker/ColorPicker.tsx:93
- packages/ketcher-react/src/script/ui/component/form/Input/Input.tsx:191
- packages/ketcher-react/src/script/ui/component/actionmenu.jsx:151
- packages/ketcher-macromolecules/src/components/monomerLibrary/monomerLibraryItem/MonomerItem.tsx:110
- packages/ketcher-macromolecules/src/components/modal/Open/OpenOptions/FileDrop/FileDrop.tsx:90
Metadata
Metadata
Assignees
Labels
Priority: LowSeverity: LowLow level visibility to the userLow level visibility to the userSonarBucket: Issues found by Sonar scannerBucket: Issues found by Sonar scanner