Component under review
Table, specifically the column resize handle.
Review scope
Findings
| # |
Severity |
Category |
Summary |
Decision |
| 1 |
High |
a11y |
The column resize handle cannot be reached or operated by keyboard. It has no role, no tabindex and no key handler, so resizing is mouse only |
|
| 2 |
Medium |
bug |
Resizing is wired to mousedown with mousemove and mouseup listeners on document, so touch and pen input never start a drag |
|
| 3 |
Low |
a11y |
The svelte-ignore a11y_no_static_element_interactions on that element hides the warning that was reporting finding 1 |
|
Evidence
Reproduced by running code rather than by reading it.
Attributes on the handle, next to the equivalent control in Resizable:
Table resize handle : {"role":null,"tabindex":null,"ariaLabel":null,"ariaValueNow":null}
focusable : false
Resizable separator : {"role":"separator","tabindex":"0","ariaLabel":"Resize panes","ariaValueNow":"50"}
focusable : true
Behaviour, with a mouse drag as the control case that proves the probe works:
column width : 150
after 3 arrow presses : 150 (unchanged)
after an 80px drag : 230 (changed, so the mouse path works)
Touch and pen:
after a touch pointer drag : 150 (unchanged)
after touchstart : 150 (unchanged)
handle has touch-none : true
The touch-none class suggests touch was intended. As it stands the class blocks scrolling that starts on the handle without offering anything in return.
Tab order, starting from a button placed immediately above the table:
Tab 1 -> div role="separator" "Resize panes"
One press jumps past the whole table into the next component. The table contributes no keyboard stop for resizing at all.
Proposed direction
Resizable already solves the same problem in this repo, and usePointerDrag is already used by both Resizable and ColorPicker. The handle should follow that pattern: role="separator" with aria-orientation, aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext, a tabindex, arrow key handling with a larger step while shift is held, and the drag moved onto the shared hook so pointer input of every kind works. The svelte-ignore can then be removed rather than left masking the warning.
Component under review
Table, specifically the column resize handle.
Review scope
aria-*, keyboard)Findings
mousedownwithmousemoveandmouseuplisteners ondocument, so touch and pen input never start a dragsvelte-ignore a11y_no_static_element_interactionson that element hides the warning that was reporting finding 1Evidence
Reproduced by running code rather than by reading it.
Attributes on the handle, next to the equivalent control in
Resizable:Behaviour, with a mouse drag as the control case that proves the probe works:
Touch and pen:
The
touch-noneclass suggests touch was intended. As it stands the class blocks scrolling that starts on the handle without offering anything in return.Tab order, starting from a button placed immediately above the table:
One press jumps past the whole table into the next component. The table contributes no keyboard stop for resizing at all.
Proposed direction
Resizablealready solves the same problem in this repo, andusePointerDragis already used by bothResizableandColorPicker. The handle should follow that pattern:role="separator"witharia-orientation,aria-valuenow,aria-valuemin,aria-valuemaxandaria-valuetext, a tabindex, arrow key handling with a larger step while shift is held, and the drag moved onto the shared hook so pointer input of every kind works. Thesvelte-ignorecan then be removed rather than left masking the warning.