From 93e832c6f05fdb009b6afea87499a03a98a83664 Mon Sep 17 00:00:00 2001
From: DvogelHallowelt <32163064+DvogelHallowelt@users.noreply.github.com>
Date: Fri, 9 Dec 2022 11:05:27 +0100
Subject: [PATCH] Improve Tree Component (#27)

---
 resources/templates/tree-container.mustache |  2 +-
 resources/templates/tree-link-node.mustache |  4 ++--
 resources/templates/tree-text-node.mustache |  4 ++--
 src/Renderer/TreeContainer.php              | 10 ++++++++++
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/resources/templates/tree-container.mustache b/resources/templates/tree-container.mustache
index 3d9acf0..6a38536 100644
--- 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
index 2fabcfb..a18cd06 100644
--- 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
index 82e3f45..ad173eb 100644
--- 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
index 146d62e..5b97252 100644
--- 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' ];
+	}
 }