Buttons 4.x: Tab in collection popover always returns focus to the first item
Buttons 4.x: Tab in collection popover always returns focus to the first item
timofruehwirth
Posts: 2Questions: 0Answers: 0
Link to test case: https://datatables.net/extensions/buttons/examples/column_visibility/simple.html (Buttons 4.1.3)
Debugger code (debug.datatables.net): n/a
Error messages shown: none
Description of problem:
With the keyboard, only the first item of a collection popover (e.g. colvis) can be reached.
Steps to reproduce on the example page above:
- Tab to the "Column visibility" button and press Enter. The popover opens and focus moves to the first item ("Name").
- Press Tab (or Shift+Tab).
Expected: focus moves to the next item ("Position"), wrapping around at the end, as introduced with the focus trap in Buttons 2.2.3 (see https://datatables.net/forums/discussion/70659).
Actual: focus stays on "Name". The other items can't be reached with the keyboard at all.
Cause: in js/Buttons.ts, the keydown.dtb-collection handler checks
if (elements.get().includes(active)) {
// If current focus is not inside the popover
first.focus();
e.preventDefault();
}
Suggested fix:
if (!elements.get().includes(active)) {
The condition contradicts its comment: whenever focus is inside the popover, every Tab press sends it back to the first item. Up to Buttons 3.2.5 the check was if (elements.index(active) === -1), so it looks like the negation got lost in the 4.0.0 rewrite. Every release since 4.0.0 is affected, including 4.1.3.
Tested in Firefox.
Issue explored and articulated with the help of LLMs.
Replies
Excellent point - that was a daft mistake of mine, probably from during the TS port and I just clean missed it. Fix committed and it will be in the next patch release.
Thanks for flagging this up.
Allan
Hi Allan,
This is very good news.
Thank you for your great work.
Timo