Merge pull request #14215 from craftcms/feature/acc-352-when-viewing-…

…inline-editable-matrix-blocks-with-tabs-aria match aria values
craftcms · Jan 30, 2024 · 8643da8 · 8643da8
2 parents 861b67a + 127a31e
commit 8643da8
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 1 deletion.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -54,6 +54,7 @@
 - Improved the accessibility of form alternative action menus.
 - Improved the accessibility of Matrix fields with the “inline-editable blocks” view mode. ([#14187](https://github.com/craftcms/cms/pull/14187))
 - Improved the accessibility of the global nav. ([#14240](https://github.com/craftcms/cms/pull/14240))Improved the accessibility of the global nav. ([#14240](https://github.com/craftcms/cms/pull/14240))
+- Improved the accessibility of layout tabs. ([#14215](https://github.com/craftcms/cms/pull/14215))
 
 ### Administration
 - Added the “Icon” entry type setting. ([#14169](https://github.com/craftcms/cms/pull/14169))

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Card views are once again multi-column on wider viewports. ([#14202](https://github.com/craftcms/cms/discussions/14202))
 - Added the “Show cards in a grid” Matrix field setting. ([#14202](https://github.com/craftcms/cms/discussions/14202))
 - Improved the accessibility of the global nav. ([#14240](https://github.com/craftcms/cms/pull/14240))
+- Improved the accessibility of layout tabs. ([#14215](https://github.com/craftcms/cms/pull/14215))
 - Added the `languageMenu` and `languageMenuField` form macros.
 - Added `craft\models\FieldLayout::getFieldByUid()`.
 - Added `craft\models\Site::getLanguage()`.

diff --git a/src/models/FieldLayoutForm.php b/src/models/FieldLayoutForm.php
@@ -7,6 +7,7 @@
 
 namespace craft\models;
 
+use Craft;
 use craft\base\FieldLayoutComponent;
 use craft\base\Model;
 use craft\helpers\Html;
@@ -59,6 +60,7 @@ public function render(bool $showFirst = true): string
     {
         $html = [];
         $hasMultipleTabs = count($this->tabs) > 1;
+        $view = Craft::$app->getView();
         foreach ($this->tabs as $i => $tab) {
             $show = $showFirst && $i === 0;
             $id = $this->_tabId($tab->getId());
@@ -74,7 +76,7 @@ public function render(bool $showFirst = true): string
                 ],
                 'role' => $hasMultipleTabs ? 'tabpanel' : false,
                 'aria' => [
-                    'labelledBy' => $hasMultipleTabs ? $tab->getTabId() : false,
+                    'labelledBy' => $hasMultipleTabs ? $view->namespaceInputId($tab->getTabId()) : false,
                 ],
             ]);
         }

diff --git a/src/templates/_includes/tabs.twig b/src/templates/_includes/tabs.twig
@@ -19,6 +19,7 @@
         },
     } %}
         {% for containerId, tab in tabs %}
+            {% set containerId = containerId|namespaceInputId %}
             {% tag 'a' with {
                 id: tab.tabId ?? "tab-#{containerId}",
                 class: (tab.selected ? ['sel'] : [])|merge(tab.class),
@@ -77,6 +78,7 @@
     <div id="tab-menu" class="menu menu--disclosure">
         <ul class="padded">
             {% for containerId, tab in tabs %}
+                {% set containerId = containerId|namespaceInputId %}
                 <li>
                     {% tag 'a' with {
                         class: (tab.selected ? 'sel' : null) ~ ('error' in tab.class ? ' error' : null),