WCAG tree component

hallowelt · Apr 30, 2024 · 1a6fb01 · 1a6fb01
1 parent e5ed706
commit 1a6fb01
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 31 deletions.
diff --git a/resources/templates/tree-container.mustache b/resources/templates/tree-container.mustache
@@ -1,7 +1,5 @@
 {{#hasItems}}
-<div id="{{id}}" class="mws-tree-cnt root{{class}}" role="tree" {{#aria}} {{{.}}}{{/aria}} tabindex="0">
-	<ul class="mws-tree">
-		{{#body}}{{{.}}}{{/body}}
-	</ul>
-</div>
+<ul id="{{id}}" class="mws-tree root{{class}}" role="tree" {{#aria}} {{{.}}}{{/aria}} tabindex="0">
+	{{#body}}{{{.}}}{{/body}}
+</ul>
 {{/hasItems}}
diff --git a/resources/templates/tree-link-node.mustache b/resources/templates/tree-link-node.mustache
@@ -1,12 +1,10 @@
 <li{{#id}} id="{{.}}"{{/id}} class="mws-tree-item{{class}}" {{#role}} role="{{.}}"{{/role}}>
 	<div>
-		{{#expandBtn}}<a class="mws-tree-expander{{class}}" aria-expanded="{{expanded}}" role="button" tabindex="0" aria-label="{{text}}"{{#id}} aria-controlls="{{.}}-children"{{/id}}{{#hasChildren}} aria-haspopup="true"{{/hasChildren}}></a>{{/expandBtn}}<a id="{{labelId}}" class="mws-tree-item-label{{#isNew}} new{{/isNew}}" href="{{href}}"{{#title}} title="{{{.}}}"{{/title}}{{#rel}} rel="{{{.}}}"{{/rel}}{{#target}} target="{{{.}}}"{{/target}}>{{{text}}}</a>
+		{{#expandBtn}}<a class="mws-tree-expander{{class}}" aria-expanded="{{expanded}}" role="button" tabindex="0" aria-label="{{text}}"{{#id}} aria-controls="{{.}}-children"{{/id}}{{#hasChildren}} aria-haspopup="true"{{/hasChildren}}></a>{{/expandBtn}}<a id="{{labelId}}" class="mws-tree-item-label{{#isNew}} new{{/isNew}}" href="{{href}}"{{#title}} title="{{{.}}}"{{/title}}{{#rel}} rel="{{{.}}}"{{/rel}}{{#target}} target="{{{.}}}"{{/target}}>{{{text}}}</a>
 	</div>
 	{{#hasChildren}}
-	<div class="mws-tree-cnt{{#expanded}} show{{/expanded}}" role="tree" aria-labelledby="{{labelId}}" aria-expanded="expanded" tabindex="0">
-		<ul class="mws-tree-item-children"{{#id}} id="{{.}}-children"{{/id}}>
-			{{#children}}{{{.}}}{{/children}}
-		</ul>
-	</div>
+	<ul class="mws-tree mws-tree-item-children{{#expanded}} show{{/expanded}}"{{#id}} id="{{.}}-children"{{/id}} role="tree" aria-labelledby="{{labelId}}" aria-expanded="expanded" tabindex="0">
+		{{#children}}{{{.}}}{{/children}}
+	</ul>
 	{{/hasChildren}}
 </li>
diff --git a/resources/templates/tree-text-node.mustache b/resources/templates/tree-text-node.mustache
@@ -1,12 +1,10 @@
 <li{{#id}} id="{{.}}"{{/id}} class="mws-tree-item{{class}}" {{#role}} role="{{.}}"{{/role}}>
 	<div>
-		{{#expandBtn}}<a class="mws-tree-expander{{class}}" aria-expanded="{{expanded}}" role="button" tabindex="0" aria-label="{{text}}"{{#id}} aria-controlls="{{.}}-children"{{/id}}{{#hasChildren}} aria-haspopup="true"{{/hasChildren}}></a>{{/expandBtn}}<span id="{{labelId}}" class="mws-tree-item-label{{#isNew}} new{{/isNew}}" tabindex="0">{{text}}</span>
+		{{#expandBtn}}<a class="mws-tree-expander{{class}}" aria-expanded="{{expanded}}" role="button" tabindex="0" aria-label="{{text}}"{{#id}} aria-controls="{{.}}-children"{{/id}}{{#hasChildren}} aria-haspopup="true"{{/hasChildren}}></a>{{/expandBtn}}<span id="{{labelId}}" class="mws-tree-item-label{{#isNew}} new{{/isNew}}" tabindex="0">{{text}}</span>
 	</div>
 	{{#hasChildren}}
-	<div class="mws-tree-cnt{{#expanded}} show{{/expanded}}" role="tree" aria-labelledby="{{labelId}}" aria-expanded="expanded" tabindex="0">
-		<ul class="mws-tree-item-children"{{#id}} id="{{.}}-children"{{/id}}>
-			{{#children}}{{{.}}}{{/children}}
-		</ul>
-	</div>
+	<ul {{#id}} id="{{.}}-children"{{/id}} class="mws-tree mws-tree-item-children{{#expanded}} show{{/expanded}}" role="tree" aria-labelledby="{{labelId}}" aria-expanded="expanded" tabindex="0">
+		{{#children}}{{{.}}}{{/children}}
+	</ul>
 	{{/hasChildren}}
 </li>
diff --git a/resources/tree/tree.js b/resources/tree/tree.js
@@ -2,8 +2,8 @@
     $( d ).on( 'click', '.mws-tree-expander', function( e ) {
         stopPropagation( e );
 
-        controlls = $( this ).attr( 'aria-controlls' );
-        toggleTreeItem( this, controlls );
+        controls = $( this ).attr( 'aria-controls' );
+        toggleTreeItem( this, controls );
 
     } );
 
@@ -36,7 +36,7 @@
             stopPropagation( e );
 
             if ( $( this ).hasClass( 'expanded' ) ) {
-                $childList = $( this ).find( '> div > ul' ).first();
+                $childList = $( this ).find( '>  ul' ).first();
                 let $listItem = $childList.children().first();
                 let $focusableElementContainer = $listItem.find( '> div' ).first();
                 let focusableElement = $focusableElementContainer.children().first();
@@ -81,18 +81,18 @@
     } );
 
     $( d ).on( 'keydown', '.mws-tree-expander', function ( e ) {
-        controlls = $( this ).attr( 'aria-controlls' );
+        controls = $( this ).attr( 'aria-controls' );
 
         if ( e.keyCode === 13 ) {
             stopPropagation( e );
-            toggleTreeItem( this, controlls );
+            toggleTreeItem( this, controls );
         }
 
         //left
         if ( e.keyCode === 37 ) {
             stopPropagation( e );
             if ( isExpanded( this ) ) {
-                collapseTreeItem( this, controlls );
+                collapseTreeItem( this, controls );
             }
             else if ( this.previousElementSibling ) {
                 this.previousElementSibling.focus();
@@ -104,7 +104,7 @@
             stopPropagation( e );       
             if ( !isExpanded( this ) ) {
 
-                expandTreeItem( this, controlls );
+                expandTreeItem( this, controls );
             }
             else if ( this.nextElementSibling ) {
                 this.nextElementSibling.focus();
@@ -113,24 +113,27 @@
     } );
 
 
-    function toggleTreeItem( element, controlls ) {
+    function toggleTreeItem( element, controls ) {
         if ( $( element ).attr( 'aria-expanded' ) === 'true' ) {
-            collapseTreeItem( element, controlls );
+            collapseTreeItem( element, controls );
         } else if ( $( element ).attr( 'aria-expanded' ) === 'false' ) {
-            expandTreeItem( element, controlls);
+            expandTreeItem( element, controls);
         }
     }
 
-    function collapseTreeItem( element, controlls ) {
-        $( '#'+controlls ).parent( '.mws-tree-cnt' ).removeClass( 'show' );
+    function collapseTreeItem( element, controls ) {
+        console.log( controls );
+        $( '#'+controls ).removeClass( 'show' );
+        $( '#'+controls ).attr( 'aria-expanded', 'false' );
         $( element ).attr( 'aria-expanded', 'false' );
         $( element ).removeClass( 'expanded' );
         $( element ).addClass( 'collapsed' );
         $( element ).parents( 'li' ).first().removeClass( 'expanded' );
     }
 
-    function expandTreeItem( element, controlls ) {
-        $( '#'+controlls ).parent( '.mws-tree-cnt' ).addClass( 'show' );
+    function expandTreeItem( element, controls ) {
+        $( '#'+controls ).addClass( 'show' );
+        $( '#'+controls ).attr( 'aria-expanded', 'true' );
         $( element ).attr( 'aria-expanded', 'true' );
         $( element ).removeClass( 'collapsed' );
         $( element ).addClass( 'expanded' );