Merge pull request #16424 from craftcms/feature/pt-2384-in-the-asset-…

…field-theres-a-visually-hidden-focusable Rework fieldset/legend markup to fix duplicate actions button issue, …
craftcms · Jan 14, 2025 · bfa5ccb · bfa5ccb
2 parents 96938fa + 5ded8a7
commit bfa5ccb
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 20 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -181,4 +181,5 @@
 - Fixed a bug where Craft wasn’t auto-rotating or flipping images uploaded with a mirrored EXIF orientation.
 - Fixed a bug where embedded element index filter HUDs were including condition rules for fields that weren’t applicable to the nested elements. ([#16289](https://github.com/craftcms/cms/discussions/16289))
 - Fixed a bug where element queries were ignoring params for custom fields that weren’t involved with the query, rather than returning zero results.
-- Fixed a bug where opening heads-up displays could cause the page to scroll to the focused element. 
+- Fixed a bug where opening heads-up displays could cause the page to scroll to the focused element.
+- Fixed a bug where field labels weren’t being read by screen readers. ([#16424](https://github.com/craftcms/cms/pull/16424))
diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -1541,27 +1541,21 @@ public static function fieldHtml(string|callable $input, array $config = []): st
             $labelHtml = '';
         }
 
-        $containerTag = $fieldset ? 'fieldset' : 'div';
-
         return
-            Html::beginTag($containerTag, ArrayHelper::merge(
+            Html::beginTag('div', ArrayHelper::merge(
                 [
                     'class' => $fieldClass,
                     'id' => $fieldId,
+                    'aria' => [
+                        'labelledby' => $fieldset ? $labelId : null,
+                    ],
+                    'role' => $fieldset ? 'group' : null,
                     'data' => [
-                            'attribute' => $attribute,
-                        ] + $data,
+                        'attribute' => $attribute,
+                    ] + $data,
                 ],
                 $config['fieldAttributes'] ?? []
             )) .
-            (($label && $fieldset)
-                ? Html::tag('legend', $labelHtml, [
-                    'class' => ['visually-hidden'],
-                    'data' => [
-                        'label' => $label,
-                    ],
-                ])
-                : '') .
             ($status
                 ? Html::beginTag('div', [
                     'id' => $statusId,
@@ -1583,9 +1577,6 @@ public static function fieldHtml(string|callable $input, array $config = []): st
                             'id' => $labelId,
                             'class' => $config['labelClass'] ?? null,
                             'for' => !$fieldset ? $id : null,
-                            'aria' => [
-                                'hidden' => $fieldset ? 'true' : null,
-                            ],
                         ], $config['labelAttributes'] ?? []))
                         : '') .
                     ($showLabelExtra
@@ -1628,7 +1619,7 @@ public static function fieldHtml(string|callable $input, array $config = []): st
                     'errors' => $errors,
                 ])
                 : '') .
-            Html::endTag($containerTag);
+            Html::endTag('div');
     }
 
     /**

diff --git a/tests/unit/helpers/CpHelperTest.php b/tests/unit/helpers/CpHelperTest.php
@@ -141,8 +141,8 @@ public function testFieldHtml(): void
         });
         // fieldset + legend
         $fieldset = Cp::fieldHtml('<input>', ['fieldset' => 'true', 'label' => 'Label']);
-        self::assertStringContainsString('<fieldset', $fieldset);
-        self::assertStringContainsString('<legend', $fieldset);
+        self::assertStringContainsString('aria-labelledby="', $fieldset);
+        self::assertStringContainsString('role="group"', $fieldset);
         // translatable
         self::assertStringContainsString('class="t9n-indicator"', Cp::fieldHtml('<input>', ['label' => 'Label', 'translatable' => true]));
         // instructions