https://www.drupal.org/project/gin/issues/3506302

Created on 13 February 2025, 5 months ago

Problem/Motivation

Tabbing through the table header on admin/content (it does not happen on admin/content/media), after passing the Updated column the focus outline disappears for one tab (SC 2.4.7), then the table column headers for title, content type, status and updated are in focus again but underlined not with a focus outline (check table_header_focus_order.mp4) . Claro is missing that additional lap of honor (SC2.4.3).

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

  • Tab through the table header on for example admin/content

Proposed resolution

  • Remove the lap of honor and let the user only tab through the table header one time like in Claro
  • Avoid the tab that is missing a focus outline

Remaining tasks

User interface changes

API changes

Data model changes

๐Ÿ› Bug report
Status

Active

Version

4.0

Component

User interface

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada mgifford Ottawa, Ontario
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip

    I am looking into it.

  • ๐Ÿ‡ฎ๐Ÿ‡ณ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!

  • Pipeline finished with Success
    4 months ago
    Total: 270s
    #470926
  • ๐Ÿ‡ฎ๐Ÿ‡ณ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

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sandip
  • Assigned to sandip
  • Status changed to Needs work 24 days ago
  • ๐Ÿ‡จ๐Ÿ‡ฆ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.

Production build 0.71.5 2024