Improve Tree Component (#27)

hallowelt · Dec 9, 2022 · 93e832c · 93e832c
1 parent 691d308
commit 93e832c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/resources/templates/tree-container.mustache b/resources/templates/tree-container.mustache
@@ -1,5 +1,5 @@
 {{#hasItems}}
-<div id="{{id}}" class="mws-tree-cnt root{{class}}" role="tree" {{#aria}} {{{.}}}{{/aria}}>
+<div id="{{id}}" class="mws-tree-cnt root{{class}}" role="tree" {{#aria}} {{{.}}}{{/aria}} tabindex="0">
 	<ul class="mws-tree">
 		{{#body}}{{{.}}}{{/body}}
 	</ul>

diff --git a/resources/templates/tree-link-node.mustache b/resources/templates/tree-link-node.mustache
@@ -3,8 +3,8 @@
 		{{#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>
 	</div>
 	{{#hasChildren}}
-	<div class="mws-tree-cnt" role="tree" aria-labelledby="{{labelId}}" aria-expanded="expanded">
-		<ul class="mws-tree-item-children{{#expanded}} show{{/expanded}}"{{#id}} id="{{.}}-children"{{/id}}>
+	<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>

diff --git a/resources/templates/tree-text-node.mustache b/resources/templates/tree-text-node.mustache
@@ -3,8 +3,8 @@
 		{{#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>
 	</div>
 	{{#hasChildren}}
-	<div class="mws-tree-cnt" role="tree" aria-labelledby="{{labelId}}" aria-expanded="expanded">
-		<ul class="mws-tree-item-children{{#expanded}} show{{/expanded}}"{{#id}} id="{{.}}-children"{{/id}}>
+	<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>

diff --git a/src/Renderer/TreeContainer.php b/src/Renderer/TreeContainer.php
@@ -53,6 +53,7 @@ public function getRendererDataTreeNode( $component, $subComponentNodes ): array
 			$aria = $component->getAriaAttributes();
 			$ariaAttributesBuilder = new AriaAttributesBuilder();
 			$ariaAttributes = $ariaAttributesBuilder->toString( $aria );
+
 			$templateData = array_merge(
 				$templateData,
 				[
@@ -75,4 +76,13 @@ public function getRendererDataTreeNode( $component, $subComponentNodes ): array
 	public function getTemplatePathname() : string {
 		return $this->templateBasePath . '/tree-container.mustache';
 	}
+
+	/**
+	 * `AriaAttributesBuilder` and `DataAttributesBuilder` are already using
+	 * `Sanitizer::safeEncodeTagAttributes`
+	 * @inheritDoc
+	 */
+	protected function getHtmlArmorExcludedFields() {
+		return [ 'aria' ];
+	}
 }