Merge pull request #13020 from craftcms/feature/dev-445-parent-child-relationship-is-not

Fix parent-child relationship not being conveyed to screen reader users

Author: brandonkelly

CHANGELOG-WIP.md

@@ -6,6 +6,7 @@
 - Image assets’ thumbnails and `<img>` tags generated via `craft\element\Asset::getImg()` no longer use the assets’ titles as `alt` fallback values. ([#12854](https://github.com/craftcms/cms/pull/12854))
 - Element index pages now have visually-hidden “Sources” headings for screen readers. ([#12961](https://github.com/craftcms/cms/pull/12961))
 - Element metadata fields now have visually-hidden “Metadata” headings for screen readers. ([#12961](https://github.com/craftcms/cms/pull/12961))
+- Structure elements within element indexes now convey their levels to screen readers. ([#13020](https://github.com/craftcms/cms/pull/13020))
 
 ### Administration
 

src/templates/_elements/tableview/elements.twig

@@ -44,6 +44,19 @@
                     {%- include '_elements/element' with {
                         autoReload: false,
                     } -%}
+
+                    {%- if structure %}
+                        {% set textAlternative = 'Level {num}'|t('app', {
+                            num: element.level,
+                        }) %}
+                        {{ tag('span', {
+                            class: 'visually-hidden',
+                            data: {
+                                'text-alternative': true,
+                            },
+                            text: textAlternative,
+                        }) }}
+                    {% endif  %}
                 </th>
             {% else %}
                 <td data-title="{{ attribute[1].label }}" data-attr="{{ attribute[0] }}">

src/translations/en/app.php

@@ -830,6 +830,7 @@
     'Let each entry choose which sites it should be saved to' => 'Let each entry choose which sites it should be saved to',
     'Letterbox' => 'Letterbox',
     'Level' => 'Level',
+    'Level {num}' => 'Level {num}',
     'License transferred.' => 'License transferred.',
     'License' => 'License',
     'Licensed' => 'Licensed',

src/web/assets/cp/CpAsset.php

@@ -213,6 +213,7 @@ private function _registerTranslations(View $view): void
             'Keep them',
             'Label',
             'Landscape',
+            'Level {num}',
             'License transferred.',
             'Limit',
             'Loading',

src/web/assets/cp/dist/cp.js

@@ -241,12 +241,21 @@ Craft.StructureTableSorter = Garnish.DragSort.extend(
             oldLevel = $draggee.data('level'),
             newLevel = oldLevel + levelDiff,
             padding = this._basePadding + this._getLevelIndent(newLevel);
+          const $structureTextAlternative = $draggee.find(
+            '[data-text-alternative]'
+          );
+          const altText = Craft.t('app', 'Level {num}', {
+            num: newLevel,
+          });
 
           $draggee.data('level', newLevel);
           $draggee.find('.element').data('level', newLevel);
           $draggee
             .children('[data-titlecell]:first')
             .css('padding-' + Craft.left, padding);
+
+          // Update text alternative
+          $structureTextAlternative.text(altText);
         }
 
         this._positionChanged = true;