fix(a11y): add keyboard listeners to clickable elements (S1082)
All checks were successful
Build & Publish / publish (push) Successful in 1m2s
All checks were successful
Build & Publish / publish (push) Successful in 1m2s
Add onKeyDown (Enter/Space) to the CommandPalette overlay backdrop div and result item divs to satisfy SonarQube S1082. RouteFlow and ProcessorTimeline already had the fixes in place. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -194,7 +194,15 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
|
||||
if (!open) return null
|
||||
|
||||
return createPortal(
|
||||
<div className={styles.overlay} onClick={onClose} data-testid="command-palette-overlay">
|
||||
<div
|
||||
className={styles.overlay}
|
||||
onClick={onClose}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClose() }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Close command palette"
|
||||
data-testid="command-palette-overlay"
|
||||
>
|
||||
<div
|
||||
className={styles.panel}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
@@ -298,6 +306,12 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
|
||||
onSelect(result)
|
||||
onClose()
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onSelect(result)
|
||||
onClose()
|
||||
}
|
||||
}}
|
||||
onMouseEnter={() => { userNavigated.current = true; setFocusedIdx(flatIdx) }}
|
||||
>
|
||||
<div className={styles.itemMain}>
|
||||
|
||||
@@ -230,6 +230,10 @@ function TreeNodeRow({
|
||||
|
||||
return (
|
||||
<li role="none">
|
||||
{/* S1082: No onKeyDown here by design — the parent <ul role="tree"> carries
|
||||
onKeyDown={handleKeyDown} which handles Enter (select) and all arrow keys
|
||||
per the WAI-ARIA tree widget pattern. Adding a duplicate handler here would
|
||||
fire the action twice. */}
|
||||
<div
|
||||
role="treeitem"
|
||||
aria-expanded={hasChildren ? isExpanded : undefined}
|
||||
|
||||
@@ -366,6 +366,10 @@ function SidebarTreeRow({
|
||||
|
||||
return (
|
||||
<li role="none">
|
||||
{/* S1082: No onKeyDown here by design — the parent <ul role="tree"> carries
|
||||
onKeyDown={handleKeyDown} which handles Enter (navigate) and all arrow keys
|
||||
per the WAI-ARIA tree widget pattern. Adding a duplicate handler here would
|
||||
fire the action twice. */}
|
||||
<div
|
||||
role="treeitem"
|
||||
aria-expanded={hasChildren ? isExpanded : undefined}
|
||||
|
||||
@@ -59,7 +59,15 @@ export function InlineEdit({ value, onSave, placeholder, disabled, className }:
|
||||
<span className={`${styles.display} ${disabled ? styles.disabled : ''} ${className ?? ''}`}>
|
||||
<span
|
||||
className={isEmpty ? styles.placeholder : styles.value}
|
||||
role="button"
|
||||
tabIndex={disabled ? undefined : 0}
|
||||
onClick={startEdit}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
startEdit()
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isEmpty ? placeholder : value}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user