A11y: add skiplinks and correct tabindex order #16612

modxcms · Sep 18, 2024 · aac69f5 · aac69f5
1 parent f903a73
commit aac69f5
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git a/_build/templates/default/sass/_a11y.scss b/_build/templates/default/sass/_a11y.scss
@@ -20,3 +20,25 @@
     }
   }
 }
+
+// skiplinks
+.skiplinks {
+  position: fixed;
+  top: -100rem;
+  left: -100rem;
+  z-index: 99999;
+  width: 0;
+  height: 0;
+
+  a {
+    &:focus,
+    &:active {
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 1rem;
+      margin: 1rem;
+      background-color: white;
+    }
+  }
+}
diff --git a/_build/templates/default/sass/_dashboard.scss b/_build/templates/default/sass/_dashboard.scss
@@ -174,7 +174,8 @@
       }
     }
 
-    &:hover {
+    &:hover,
+    &:focus-within {
       .action-buttons {
         button {
           opacity: 1;

diff --git a/_build/templates/default/sass/_tree.scss b/_build/templates/default/sass/_tree.scss
@@ -334,7 +334,8 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     .modx-tree-node-btn-create {
       opacity: 1.0;
     }

diff --git a/manager/assets/modext/util/utilities.js b/manager/assets/modext/util/utilities.js
@@ -345,7 +345,7 @@ Ext.override(Ext.tree.TreeNodeUI,{
                 elbowMarkup,
                 iconMarkup,
                 cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
-                '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
+                '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="0" ',
                 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',renderer(a),"</span></a></div>",
                 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                 "</li>"].join('');
@@ -493,8 +493,8 @@ MODx.util.Format = {
     },
     /**
      * Trim a set of characters from the beginning and/or ending of a string
-     * @param {String} string 
-     * @param {String} charList 
+     * @param {String} string
+     * @param {String} charList
      */
     trimCharacters: function(string, charList = '', direction = 'both') {
         if (charList.length) {

diff --git a/manager/templates/default/header.tpl b/manager/templates/default/header.tpl
@@ -77,6 +77,14 @@
 </head>
 <body id="modx-body-tag">
 
+<section aria-label="skip links">
+    <ul class="skiplinks">
+        <li><a href="#modx-home-dashboard">skip to main navigation</a></li>
+        <li><a href="#modx-leftbar">skip to sidebar</a></li>
+        <li><a href="#modx-content">skip to main content</a></li>
+    </ul>
+</section>
+
 <div id="modx-browser"></div>
 <div id="modx-container">
     <section id="modx-header" aria-label="Navigation">