Repository navigation
Accessibility fixes: text editor, resize handle, reduced motion - #4246
Conversation
… and motion - Text editor: name the input after the column, and raise the border and placeholder contrast in light mode to 3.23:1 and 4.54:1 - Group toggle: render a native button instead of a focusable span, so it has a role and Enter/Space activation; the group row keeps aria-expanded - Resize handle: limit touch-action: none to the handle, so the header can be scrolled by touch - Only animate the sort and group carets without a reduced motion preference Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4246 +/- ##
==========================================
- Coverage 99.27% 99.23% -0.05%
==========================================
Files 44 44
Lines 2216 2221 +5
Branches 974 975 +1
==========================================
+ Hits 2200 2204 +4
- Misses 16 17 +1
🚀 New features to boost your workflow:
|
|
|
||
| return ( | ||
| <span className={groupCellContentClassname} tabIndex={tabIndex} onKeyDown={handleKeyDown}> | ||
| <button |
There was a problem hiding this comment.
The button does not cover the entire cell, could this be an accessibility issue?
There was a problem hiding this comment.
No longer applies: the button is reverted. The cell already toggles on a click anywhere in it, and with #4274 the toggle content isn't focusable anymore, so the focus target is the whole row or cell.
| const caretClassname = `rdg-caret ${caret}`; | ||
|
|
||
| function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) { | ||
| // Shift + Space selects the row, so prevent it from activating the button |
There was a problem hiding this comment.
When the row is selected instead of the cell, we don't de/select the row, is that expected?
There was a problem hiding this comment.
That already happens on main: Shift+Space only selects when a cell is active, not a row (handleCellInput checks activePositionIsCellInViewport). The button only blocked Shift+Space from activating it. Worth fixing, but separately from this PR.
| function handleClick(event: React.MouseEvent<HTMLButtonElement>) { | ||
| // the group cell also toggles the group on click | ||
| event.stopPropagation(); | ||
| toggleGroup(); |
There was a problem hiding this comment.
- click on button
- toggles the group
- press space
- toggles the group
- arrow up + arrow down, back on the same row
- press space
- grid scrolls
The behavior is unexpected since visually it's the row that's focused, not the button.
Should we handle this on the cell itself?
Then we wouldn't need a button at all.
There was a problem hiding this comment.
Good points. I will create a separate PR for toggle functionality. Reverted the changes for now
There was a problem hiding this comment.
Good catch. Clicking the button put the active position on the row, but focus stayed on the button, so Space toggled. After moving away and back, the row had focus, and Space scrolled. I agree we should handle it in the grid instead, so I reverted the button here (f430dd0) and moved the toggle to #4274: Enter now toggles the group when the row or its group cell is focused, and the content is no longer focusable.
# Conflicts: # src/cellRenderers/renderToggleGroup.tsx
The toggle will move to the row in a separate PR. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
amanmahajan7
changed the title
Summary
Small accessibility fixes from an audit of the grid against Chrome's Modern Web Guidance accessibility guides. None of them change public APIs.
The group toggle changes that were in earlier commits are reverted. The toggle will move to the group row in a separate PR.
Changes
Text editor (
renderTextEditor)Accessible name: the input had none. It's now labeled with the column's
namewhen that name is a string. Columns with a React element as their name still get no label, since there's no text to use.Contrast in light mode:
#ccc, 1.61:1#8f8f8f, 3.23:1#999, 2.85:1#767676, 4.54:1Dark mode keeps
#cccfor the border (already 10:1) and#999for the placeholder (already 5.65:1), usinglight-dark().Resize handle
touch-action: noneon the whole resizable header cell, so the grid couldn't be scrolled by touch from those headers.::afterpseudo-element of the header cell. Today the handle is its own element with its own pointer handlers.Reduced motion
transition: d 0.1s) now run only under@media (prefers-reduced-motion: no-preference).Testing
vp checkandvp run typecheckpass.renderTextEditor.test.tsx.TreeDataGrid,renderTextEditorandresizablepass.touch-actionmove and the reduced-motion rules, which are CSS-only.🤖 Generated with Claude Code