A11y: make modx-tabs focusable modxcms#16612

jenswittmann · Sep 12, 2024 · c7cdbc3 · c7cdbc3
1 parent 4ab51e3
commit c7cdbc3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/_build/templates/default/sass/_a11y.scss 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
@@ -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;