Problem/Motivation

When tabledrag is enabled in the complex widget's entity table, template_preprocess_inline_entity_form_entity_table() adds an empty header cell for the drag handle column:

if ($has_tabledrag) {
  $header[] = ['data' => '', 'class' => ['ief-tabledrag-header']];
  ...
}

This renders as an empty <th></th>. Accessibility checkers flag it (axe-core empty-table-header rule, Editoria11y "Empty table header"), and screen reader users get no name for that column. This relates to WCAG 1.3.1 Info and Relationships.

Drupal core has the same problem in its multi-value field widget table: #3630425.

Steps to reproduce

  1. Add an entity reference field with unlimited cardinality to a content type, for example a User reference.
  2. Set its form widget to "Inline entity form - Complex" and allow existing entities to be referenced.
  3. Create or edit a node and add at least two referenced entities. Tabledrag is only enabled with more than one row.
  4. Inspect the entity table header: the first <th class="ief-tabledrag-header"> is empty.
  5. Run axe DevTools or Editoria11y: an empty table header is reported.

Proposed resolution

Give the drag handle column header a visually hidden label and keep its existing class:

$header[] = [
  'data' => [
    '#type' => 'html_tag',
    '#tag' => 'span',
    '#value' => t('Drag handle'),
    '#attributes' => ['class' => ['visually-hidden']],
  ],
  'class' => ['ief-tabledrag-header'],
];

Nothing changes visually, and the ief-tabledrag-header class stays for existing CSS and JS.

Remaining tasks

  • Review the approach and the label wording.
  • Add test coverage, e.g. assert the header cell is not empty in an existing complex widget functional test.
  • Create an MR.

User interface changes

No visual change. Screen readers announce the drag handle column header as "Drag handle".

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#3 180.patch1.07 KBchamilsanjeewa
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

chamilsanjeewa created an issue. See original summary.

chamilsanjeewa’s picture

StatusFileSize
new1.07 KB
chamilsanjeewa’s picture

Assigned: chamilsanjeewa » Unassigned