Tabbing order in the table header is off

I am looking into it.

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!

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.

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

Any updates @sandip? It would be good to address the challenges that @kanchan bhogade described.

Sorry @mgifford, I totally forget about that issue. I am unassigning myself as i am not able to fix the bug.

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.

@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.

@sandip that's interesting with the sticky header, but given that the sticky isn't visible, this is still a bug.

I could replicate this in the Admin Theme

/admin/content