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
- Add an entity reference field with unlimited cardinality to a content type, for example a User reference.
- Set its form widget to "Inline entity form - Complex" and allow existing entities to be referenced.
- Create or edit a node and add at least two referenced entities. Tabledrag is only enabled with more than one row.
- Inspect the entity table header: the first
<th class="ief-tabledrag-header">is empty. - 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.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | 180.patch | 1.07 KB | chamilsanjeewa |
Issue fork inline_entity_form-3630503
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
Comment #3
chamilsanjeewa commentedComment #4
chamilsanjeewa commented