Two keyboard-navigation problems in src/components/table/useKeyboardNav.ts, both present on current main. I have been carrying local patches for them in a vendored copy of the grid and they seem worth reporting properly. I will follow up with a PR.
1. Interactive content inside a cell cannot be used from the keyboard
handleKeyDown runs for every keydown that reaches the grid, and calls preventDefault() before deciding whether the key was meant for the grid at all. The bound keys are j, k, the arrows, PageUp/PageDown, Home, End, Enter, Space and Escape.
Because j and k are bare letters, a text <input> inside a cell cannot be typed into — pressing "j" moves the row selection instead of entering a character. Enter on an in-cell link activates the row rather than following the link. Space and Home/End are taken the same way.
Mouse users never encounter any of this, which is what makes it specifically an accessibility problem. It is also the case lessons/component-policy.md is pointing at with "Keyboard navigation must work (Tab, Enter, Escape where appropriate)."
To reproduce you need a cell that renders an anchor or an input, then tab to it and press Enter or type "j". Note the demo harness has no fixture with interactive cell content, so reproducing it in this repo means adding one.
2. On a page with more than one grid, arrow keys scroll the wrong grid
scrollActiveRowIntoView resolves the target row with document.querySelector('[data-row-num="N"]'). Row numbers restart at 0 in every grid, so the lookup returns the first match in document order rather than the grid that actually has focus. On a page with three grids this is very visible: you navigate one table and a different one scrolls under you.
Context
Both surfaced using the grid through @mieweb/ui/datavis in a compliance dashboard at MIE, where cells carry links through to employee and case detail, and one page renders three grids side by side. Both fixes are small and stay inside useKeyboardNav.ts, plus one line at the call site in PlainTable.tsx.
Two keyboard-navigation problems in
src/components/table/useKeyboardNav.ts, both present on currentmain. I have been carrying local patches for them in a vendored copy of the grid and they seem worth reporting properly. I will follow up with a PR.1. Interactive content inside a cell cannot be used from the keyboard
handleKeyDownruns for every keydown that reaches the grid, and callspreventDefault()before deciding whether the key was meant for the grid at all. The bound keys arej,k, the arrows, PageUp/PageDown, Home, End, Enter, Space and Escape.Because
jandkare bare letters, a text<input>inside a cell cannot be typed into — pressing "j" moves the row selection instead of entering a character. Enter on an in-cell link activates the row rather than following the link. Space and Home/End are taken the same way.Mouse users never encounter any of this, which is what makes it specifically an accessibility problem. It is also the case
lessons/component-policy.mdis pointing at with "Keyboard navigation must work (Tab, Enter, Escape where appropriate)."To reproduce you need a cell that renders an anchor or an input, then tab to it and press Enter or type "j". Note the demo harness has no fixture with interactive cell content, so reproducing it in this repo means adding one.
2. On a page with more than one grid, arrow keys scroll the wrong grid
scrollActiveRowIntoViewresolves the target row withdocument.querySelector('[data-row-num="N"]'). Row numbers restart at 0 in every grid, so the lookup returns the first match in document order rather than the grid that actually has focus. On a page with three grids this is very visible: you navigate one table and a different one scrolls under you.Context
Both surfaced using the grid through
@mieweb/ui/datavisin a compliance dashboard at MIE, where cells carry links through to employee and case detail, and one page renders three grids side by side. Both fixes are small and stay insideuseKeyboardNav.ts, plus one line at the call site inPlainTable.tsx.