Merge pull request #12406 from craftcms/a11y/remove-tab-focus

Remove auto-focus on selected tab on page load
craftcms · Jan 11, 2023 · c030351 · c030351
2 parents 7b95b8e + 8aeb45f
commit c030351
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -16,7 +16,7 @@
 - Improved keyboard control of the Updates utility. ([#12189](https://github.com/craftcms/cms/pull/12189))
 - Improved the color contrast and keyboard control of the Customize Sources modal. ([#12233](https://github.com/craftcms/cms/pull/12233))
 - Improved info icons for screen readers. ([#12272](https://github.com/craftcms/cms/pull/12272))
-- Removed input autofocussing throughout the control panel. ([#12324](https://github.com/craftcms/cms/discussions/12324), [#12332](https://github.com/craftcms/cms/pull/12332))
+- Removed input autofocussing throughout the control panel. ([#12324](https://github.com/craftcms/cms/discussions/12324), [#12332](https://github.com/craftcms/cms/pull/12332), [#12406](https://github.com/craftcms/cms/pull/12406))
 - Improved the login screen for screen readers. ([#12386](https://github.com/craftcms/cms/pull/12386))
 
 ### Administration

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/src/js/Tabs.js b/src/web/assets/cp/src/js/Tabs.js
@@ -42,12 +42,12 @@ Craft.Tabs = Garnish.Base.extend({
         this.addListener($a, 'keydown', (ev) => {
           if ([Garnish.SPACE_KEY, Garnish.RETURN_KEY].includes(ev.keyCode)) {
             ev.preventDefault();
-            this.selectTab(ev.currentTarget);
+            this.selectTab(ev.currentTarget, true);
           }
         });
         this.addListener($a, 'click', (ev) => {
           ev.preventDefault();
-          this.selectTab(ev.currentTarget);
+          this.selectTab(ev.currentTarget, true);
         });
       }
 
@@ -108,7 +108,7 @@ Craft.Tabs = Garnish.Base.extend({
     });
   },
 
-  selectTab: function (tab) {
+  selectTab: function (tab, focusTab = false) {
     const $tab = this._getTab(tab);
 
     if ($tab[0] === this.$selectedTab[0]) {
@@ -118,7 +118,11 @@ Craft.Tabs = Garnish.Base.extend({
     this.deselectTab();
     this.$selectedTab = $tab.addClass('sel').attr('aria-selected', 'true');
     this.makeTabFocusable($tab);
-    $tab.focus();
+
+    if (focusTab) {
+      $tab.trigger('focus');
+    }
+
     this.scrollToTab($tab);
 
     this.menu.$options.removeClass('sel');