- Issue created by @rkoller
- ๐ฎ๐ณIndia sandip
I've noticed that the extra tab through the table header occurs because two table headers are being renderedโone for the sticky header and another for the regular table header. To resolve this, I am considering keeping the tab focus on the sticky header while removing it from the regular header using the
tabindex="-1"
property when sticky value is true.I am currently working on implementing this solution but facing some challenges but will try to quickly come with the MR. If anyone has an alternative approach or suggestions, I would greatly appreciate your input. Thank you!
- Merge request !607Issue #3506338: Tabbing order in the table header is off. โ (Open) created by Unnamed author
- ๐ฎ๐ณIndia sandip
Please review the code changes. I have added a check to see if both the sticky header and normal table header are rendered. If so, Iโm setting
tabindex="-1"
on the normal header elements to avoid duplicate tab stops. Let me know if it looks good or needs changes. - ๐ฎ๐ณIndia Kanchan Bhogade
Hi
I have tested MR 307 on Drupal 11.x
MR is applied successfully...Test Result:
Tested tab key navigation for table header (admin/content), the duplicate tab is removed for header;
But When the user navigates from the header to the actual content (e.g., the table under the title section), an extra tab press is required to reach the first row. Initially, pressing the Tab key does not shift focus to the first row as expected. Only after pressing Tab again does the focus move correctly to the first row of the table.Moving to Needs works
- Assigned to sandip
- Status changed to Needs work
24 days ago 3:15pm 3 July 2025 - ๐จ๐ฆCanada mgifford Ottawa, Ontario
Any updates @sandip? It would be good to address the challenges that @kanchan bhogade described.
- ๐ฎ๐ณIndia sandip
Sorry @mgifford, I totally forget about that issue. I am unassigning myself as i am not able to fix the bug.
- ๐จ๐ฆCanada mgifford Ottawa, Ontario
Using accessibility Insights I was able to duplicate and provide a screenshot of this.
I start in the Title field to make it easier.
The first round through the table goes fine, but when you get to Updated, it gets screwed up. You can see in the numbers that it looks like it goes 1, 2, 3, 4, 10, 6, 7 , 8, 9 (although the last numbers are hard to see).
After "Updated" what I see is that it goes to an empty focus item.
Then it jumps back to the beginning of the header menu and continues on. It just does that once, but it is an extra redundant (and buggy) step.
- ๐ฎ๐ณIndia sandip
@mgifford, basically two header is rendering in the table header one is the main table header and another one is sticky header. It seems like the tab is moving twice to the header but actually the tabbing is coming for both sticky header and original header. Some how using js i tried to remove tab effect for original header but in the radio button still the tab effect is there.
I am attaching an gif to prove that the double tab wave is occuring for two table header.
- ๐จ๐ฆCanada mgifford Ottawa, Ontario
@sandip that's interesting with the sticky header, but given that the sticky isn't visible, this is still a bug.