A11y: make modx-tabs focusable #16612

modxcms · Sep 13, 2024 · 5b5b2ba · 5b5b2ba
1 parent 96e2542
commit 5b5b2ba
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/_build/templates/default/sass/_a11y.scss b/_build/templates/default/sass/_a11y.scss
@@ -1,7 +1,14 @@
 .ext-webkit {
-  #modx-header {
-    *:focus-visible {
+
+  * {
+
+    &:focus-visible {
       outline: auto !important;
+      outline-offset: .1em;
+
+      &.x-form-focus {
+        outline: none !important;
+      }
     }
   }
 }
diff --git a/manager/assets/modext/widgets/core/modx.tabs.js b/manager/assets/modext/widgets/core/modx.tabs.js
@@ -45,7 +45,15 @@ MODx.Tabs = function(config = {}) {
         border: false,
         autoScroll: true,
         autoHeight: true,
-        cls: 'modx-tabs'
+        cls: 'modx-tabs',
+        itemTpl: new Ext.XTemplate(
+            '<li class="{cls}" id="{id}">',
+                '<a class="x-tab-strip-close"></a>',
+                '<a href="#">',
+                    '<span class="x-tab-strip-text">{text}</span>',
+                '</a>',
+            '</li>'
+        )
     });
     MODx.Tabs.superclass.constructor.call(this, config);
     this.config = config;