From c7cdbc33c660e0740e5b824d2f62518cc51e3dbe Mon Sep 17 00:00:00 2001
From: Jens Wittmann <post@jens-wittmann.de>
Date: Thu, 12 Sep 2024 22:58:40 +0200
Subject: [PATCH] A11y: make modx-tabs focusable #16612

---
 _build/templates/default/sass/_a11y.scss        | 15 +++++++++++++++
 manager/assets/modext/widgets/core/modx.tabs.js | 10 +++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 _build/templates/default/sass/_a11y.scss

diff --git a/_build/templates/default/sass/_a11y.scss b/_build/templates/default/sass/_a11y.scss
new file mode 100644
index 00000000000..1ceb4f2d197
--- /dev/null
+++ b/_build/templates/default/sass/_a11y.scss
@@ -0,0 +1,15 @@
+.ext-webkit {
+  // #modx-header {
+    * {
+
+      &: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
index 7decfebbf64..7cfd4ee152f 100644
--- 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;