Fix use of placeholder brackets (#16)

osnard · rvogel · DvogelHallowelt · web-flow · commit 71ef80a3cd96 · 2022-04-05T11:22:39.000+02:00
* Fix use of placeholder brackets

ERM28224

* Fix "data"- and "aria"-attribute builders

* Fix use of placeholder brackets

ERM28224

* Fix placeholder for aria attributes and data attributes

ERM28224

* Add unit test for renderer Link and Badge

ERM28224

* Fix card-link rel attribute

ERM28224

* Fix class attribute for dropdown-itemlist-from-array

ERM28224

* Fix renderer LinklistGroupItem

ERM28224

* Version bump

ERM28224

Co-authored-by: rvogel &lt;vogel@hallowelt.biz&gt;
Co-authored-by: dvogel &lt;daniel.vogel@hallowelt.com&gt;
diff --git a/bootstrap.php b/bootstrap.php
@@ -8,7 +8,7 @@
 	return;
 }
 
-define( 'MWSTAKE_MEDIAWIKI_COMPONENT_COMMONUSERINTERFACE_VERSION', '3.0.1' );
+define( 'MWSTAKE_MEDIAWIKI_COMPONENT_COMMONUSERINTERFACE_VERSION', '3.0.2' );
 
 MWStake\MediaWiki\ComponentLoader\Bootstrapper::getInstance()
 ->register( 'commonuserinterface', function () {
diff --git a/resources/templates/badge.mustache b/resources/templates/badge.mustache
@@ -1 +1 @@
-<span class="badge{{#class}} class="{{{.}}}"{{/class}}>{{{text}}}</span>
+<span class="badge{{#class}} class="{{.}}"{{/class}}>{{{text}}}</span>
diff --git a/resources/templates/breadcrumb.mustache b/resources/templates/breadcrumb.mustache
@@ -1,7 +1,7 @@
-<nav class="{{#container-class}} {{{.}}}{{/container-class}} aria-label="{{nav-aria-label}}">
+<nav class="{{#container-class}} {{.}}{{/container-class}} aria-label="{{nav-aria-label}}">
 	<ol class="breadcrumb">
 		{{#breadcrumbs}}
-		<li class="breadcrumb-item{{#breadcrumb-class}} {{{.}}}{{/breadcrumb-class}}" {{#aria-current}}aria-current="{{{.}}}"{{/aria-current}}>{{{text}}}</li>
+		<li class="breadcrumb-item{{#breadcrumb-class}} {{.}}{{/breadcrumb-class}}" {{#aria-current}}aria-current="{{.}}"{{/aria-current}}>{{{text}}}</li>
 		{{/breadcrumbs}}
 	</ol>
 </nav>
diff --git a/resources/templates/button-group.mustache b/resources/templates/button-group.mustache
@@ -1,3 +1,3 @@
-<div class="btn-group{{#class}} {{{.}}}{{/class}}" role="{{role}}" aria-label="{{aria-label}}">
+<div class="btn-group{{#class}} {{.}}{{/class}}" role="{{role}}" aria-label="{{aria-label}}">
 	{{{body}}}
 </div>
diff --git a/resources/templates/card-body.mustache b/resources/templates/card-body.mustache
@@ -1,3 +1,3 @@
-<div class="card-body{{#class}} {{{.}}}{{/class}}">
+<div class="card-body{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </div>
diff --git a/resources/templates/card-footer.mustache b/resources/templates/card-footer.mustache
@@ -1,3 +1,3 @@
-<div class="card-footer{{#class}} {{{.}}}{{/class}}">
+<div class="card-footer{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </div>
diff --git a/resources/templates/card-header.mustache b/resources/templates/card-header.mustache
@@ -1,3 +1,3 @@
-<div {{#id}}id="{{{.}}}"{{/id}}class="card-header{{#class}} {{{.}}}{{/class}}">
+<div {{#id}}id="{{.}}"{{/id}}class="card-header{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </div>
diff --git a/resources/templates/card-img.mustache b/resources/templates/card-img.mustache
@@ -1 +1 @@
-<img src="{{src}}" class="card-img-{{type}}{{#class}} {{{.}}}{{/class}}" alt="{{alt}}">
+<img src="{{src}}" class="card-img-{{type}}{{#class}} {{.}}{{/class}}" alt="{{alt}}">
diff --git a/resources/templates/card-link.mustache b/resources/templates/card-link.mustache
@@ -1 +1 @@
-<a{{#id}} id="{{{.}}}"{{/id}} class="card-link{{#class}} {{{.}}}{{/class}}" href="{{{href}}}" {{#title}} title="{{{.}}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#role}} role="{{{.}}}"{{/role}}{{#rel}} role="{{{.}}}"{{/rel}}{{#aria-label}} aria-label="{{{.}}}"{{/aria-label}}>{{{text}}}</a>
+<a{{#id}} id="{{.}}"{{/id}} class="card-link{{#class}} {{.}}{{/class}}" href="{{href}}" {{#title}} title="{{.}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#role}} role="{{.}}"{{/role}}{{#rel}} rel="{{.}}"{{/rel}}{{#aria-label}} aria-label="{{.}}"{{/aria-label}}>{{{text}}}</a>
diff --git a/resources/templates/card-subtitle.mustache b/resources/templates/card-subtitle.mustache
@@ -1,3 +1,3 @@
-<h6 class="card-subtitle{{#class}} {{{.}}}{{/class}}">
+<h6 class="card-subtitle{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </h6>
diff --git a/resources/templates/card-text.mustache b/resources/templates/card-text.mustache
@@ -1,3 +1,3 @@
-<p class="card-text{{#class}} {{{.}}}{{/class}}">
+<p class="card-text{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </p>
diff --git a/resources/templates/card-title.mustache b/resources/templates/card-title.mustache
@@ -1,3 +1,3 @@
-<h5 class="card-title{{#class}} {{{.}}}{{/class}}">
+<h5 class="card-title{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </h5>
diff --git a/resources/templates/card.mustache b/resources/templates/card.mustache
@@ -1,3 +1,3 @@
-<div {{#id}}id="{{{.}}}" {{/id}}class="card{{#class}} {{{.}}}{{/class}}"{{#id}} id="{{{.}}}"{{/id}}>
+<div {{#id}}id="{{.}}" {{/id}}class="card{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </div>
diff --git a/resources/templates/collapsible-card.mustache b/resources/templates/collapsible-card.mustache
@@ -1,8 +1,8 @@
-<div class="card{{#cnt-class}} {{{.}}}{{/cnt-class}}" id="{{id}}">
-		<div class="card-header{{#header-class}} {{{.}}}{{/header-class}}">
-			<a href="#{{id}}-body" data-bs-toggle="collapse" role="button"{{#title}} title="{{{.}}}"{{/title}}{{#aria}} {{{.}}}{{/aria}} >{{{text}}}</a>
+<div class="card{{#cnt-class}} {{.}}{{/cnt-class}}" id="{{id}}">
+		<div class="card-header{{#header-class}} {{.}}{{/header-class}}">
+			<a href="#{{id}}-body" data-bs-toggle="collapse" role="button"{{#title}} title="{{.}}"{{/title}}{{#aria}} {{{.}}}{{/aria}} >{{{text}}}</a>
 		</div>
-		<div {{#body-class}}class="{{{.}}}"{{/body-class}} id="{{id}}-body">
+		<div {{#body-class}}class="{{.}}"{{/body-class}} id="{{id}}-body">
 		{{{body}}}
 		</div>
 </div>
diff --git a/resources/templates/dropdown-button.mustache b/resources/templates/dropdown-button.mustache
@@ -1,8 +1,8 @@
-<div class="dropdown{{#cnt-class}} {{{.}}}{{/cnt-class}}">
-	<button type="button" class="dropdown-toggle{{#btn-class}} {{{.}}}{{/btn-class}}"{{#id}} id={{{.}}}{{/id}} title="{{title}}" {{#data}}{{{.}}}{{/data}}data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{{btn-aria-label}}}" aria-expanded="false" aria-controls="{{{id}}}-menu"{{#disabled}} disabled{{/disabled}}>
-		<span>{{{text}}}</span>
+<div class="dropdown{{#cnt-class}} {{.}}{{/cnt-class}}">
+	<button type="button" class="dropdown-toggle{{#btn-class}} {{.}}{{/btn-class}}"{{#id}} id={{.}}{{/id}} title="{{title}}"{{#data}} {{{.}}}{{/data} }data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu"{{#disabled}} disabled{{/disabled}}>
+		<span>{{text}}</span>
 	</button>
-	<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{{.}}}{{/menu-class}}" aria-labelledby="{{id}}">
+	<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{.}}{{/menu-class}}" aria-labelledby="{{id}}">
 		{{{body}}}
 	</div>
 </div>
diff --git a/resources/templates/dropdown-icon-split-button.mustache b/resources/templates/dropdown-icon-split-button.mustache
@@ -1,11 +1,11 @@
-<div class="dropdown{{#cnt-class}} {{{.}}}{{/cnt-class}}">
-	<div class="btn-group{{#btn-group-class}} {{{.}}}{{/btn-group-class}}">
-		<a role="button" href="{{href}}" {{#btn-class}}class="{{{.}}}"{{/btn-class}}{{#id}} id={{{.}}}{{/id}} title="{{btn-title}}" {{#btn-data}}{{{.}}}{{/btn-data}} aria-haspopup="true" aria-label="{{{btn-aria-label}}}"{{#btn-disabled}} disabled{{/btn-disabled}}>
-			<i{{#icon-class}} class="{{{.}}}"{{/icon-class}}></i>
+<div class="dropdown{{#cnt-class}} {{.}}{{/cnt-class}}">
+	<div class="btn-group{{#btn-group-class}} {{.}}{{/btn-group-class}}">
+		<a role="button" href="{{href}}" {{#btn-class}}class="{{.}}"{{/btn-class}}{{#id}} id={{.}}{{/id}} title="{{btn-title}}"{{#btn-data}} {{{.}}}{{/btn-data}} aria-haspopup="true" aria-label="{{btn-aria-label}}"{{#btn-disabled}} disabled{{/btn-disabled}}>
+			<i{{#icon-class}} class="{{.}}"{{/icon-class}}></i>
 		</a>
-		<button class="dropdown-toggle{{#split-btn-class}} {{{.}}}{{/split-btn-class}}"{{#id}} id="{{{.}}}-menu-btn"{{/id}} title="{{split-btn-title}}" {{#split-btn-data}}{{{.}}}{{/split-btn-data}}data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{{split-btn-aria-label}}}" aria-expanded="false" aria-controls="{{{id}}}-menu"{{#split-btn-disabled}} disabled{{/split-btn-disabled}}>
+		<button class="dropdown-toggle{{#split-btn-class}} {{.}}{{/split-btn-class}}"{{#id}} id="{{.}}-menu-btn"{{/id}} title="{{split-btn-title}}"{{#split-btn-data}} {{{.}}}{{/split-btn-data}} data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{split-btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu"{{#split-btn-disabled}} disabled{{/split-btn-disabled}}>
 		</button>
-		<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{{.}}}{{/menu-class}}" aria-labelledby="{{id}}-menu-btn">
+		<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{.}}{{/menu-class}}" aria-labelledby="{{id}}-menu-btn">
 			{{{body}}}
 		</div>
 	</div>
diff --git a/resources/templates/dropdown-icon.mustache b/resources/templates/dropdown-icon.mustache
@@ -1,9 +1,9 @@
-<div class="dropdown{{#cnt-class}} {{{.}}}{{/cnt-class}}">
-	<a role="button" tabindex="{{{tabindex}}}" class="{{#btn-class}} {{{.}}}{{/btn-class}}"{{#id}} id="{{{.}}}"{{/id}} title="{{title}}" {{#btn-data}}{{{.}}}{{/btn-data}}data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu" href="">
-		<i{{#icon-class}} class="{{{.}}}"{{/icon-class}}></i>
+<div class="dropdown{{#cnt-class}} {{.}}{{/cnt-class}}">
+	<a role="button" tabindex="{{tabindex}}" class="{{#btn-class}} {{.}}{{/btn-class}}"{{#id}} id="{{.}}"{{/id}} title="{{title}}"{{#btn-data}} {{{.}}}{{/btn-data}} data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu" href="">
+		<i{{#icon-class}} class="{{.}}"{{/icon-class}}></i>
 	</a>
   </a>
-	<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{{.}}}{{/menu-class}}" aria-labelledby="{{id}}">
+	<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{.}}{{/menu-class}}" aria-labelledby="{{id}}">
 		{{{body}}}
 	</div>
 </div>
diff --git a/resources/templates/dropdown-itemlist-from-array.mustache b/resources/templates/dropdown-itemlist-from-array.mustache
@@ -1,5 +1,5 @@
-<ul{{#list-id}} id="{{{.}}}"{{/list-id}}{{#list-class}} id="{{{.}}}"{{/list-class}}>
+<ul{{#list-id}} id="{{.}}"{{/list-id}}{{#list-class}} class="{{.}}"{{/list-class}}>
 {{#links}}
-	<li><a{{#id}} id="{{{.}}}"{{/id}} class="dropdown-item{{#class}} {{{.}}}{{/class}}" href="{{{href}}}"{{#title}} title="{{{.}}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#aria}} {{{.}}}{{/aria}}{{#rel}} rel="{{{.}}}"{{/rel}}{{#target}} target="{{{.}}}"{{/target}}>{{{text}}}</a></li>
+	<li><a{{#id}} id="{{.}}"{{/id}} class="dropdown-item{{#class}} {{.}}{{/class}}" href="{{href}}"{{#title}} title="{{.}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#aria}} {{{.}}}{{/aria}}{{#rel}} rel="{{.}}"{{/rel}}{{#target}} target="{{.}}"{{/target}}>{{{text}}}</a></li>
 {{/links}}
 </ul>
diff --git a/resources/templates/dropdown-itemlist-item.mustache b/resources/templates/dropdown-itemlist-item.mustache
@@ -1 +1 @@
-<li {{#class}}class="{{{.}}}"{{/class}}>{{{body}}}</li>
+<li {{#class}}class="{{.}}"{{/class}}>{{{body}}}</li>
diff --git a/resources/templates/dropdown-itemlist.mustache b/resources/templates/dropdown-itemlist.mustache
@@ -1,3 +1,3 @@
-<ul{{#list-id}} id="{{{.}}}"{{/list-id}}{{#list-class}} class="{{{.}}}"{{/list-class}}>
+<ul{{#list-id}} id="{{.}}"{{/list-id}}{{#list-class}} class="{{.}}"{{/list-class}}>
 	{{{body}}}
 </ul>
diff --git a/resources/templates/dropdown-split-button.mustache b/resources/templates/dropdown-split-button.mustache
@@ -1,11 +1,11 @@
-<div class="dropdown{{#cnt-class}} {{{.}}}{{/cnt-class}}">
-	<div class="btn-group{{#btn-group-class}} {{{.}}}{{/btn-group-class}}">
-		<button {{#btn-class}}class="{{{.}}}"{{/btn-class}}{{#id}} id={{{.}}}{{/id}} title="{{btn-title}}" {{#btn-data}}{{{.}}}{{/btn-data}} aria-haspopup="true" aria-label="{{{btn-aria-label}}}"{{#btn-disabled}} disabled{{/btn-disabled}}>
-			<span>{{{btn-text}}}</span>
+<div class="dropdown{{#cnt-class}} {{.}}{{/cnt-class}}">
+	<div class="btn-group{{#btn-group-class}} {{.}}{{/btn-group-class}}">
+		<button {{#btn-class}}class="{{.}}"{{/btn-class}}{{#id}} id="{{.}}"{{/id}} title="{{btn-title}}"{{#btn-data}} {{{.}}}{{/btn-data}} aria-haspopup="true" aria-label="{{btn-aria-label}}"{{#btn-disabled}} disabled{{/btn-disabled}}>
+			<span>{{btn-text}}</span>
 		</button>
-		<button class="dropdown-toggle{{#split-btn-class}} {{{.}}}{{/split-btn-class}}"{{#id}} id="{{{.}}}-menu-btn"{{/id}} title="{{split-btn-title}}" {{#split-btn-data}}{{{.}}}{{/split-btn-data}}data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{{split-btn-aria-label}}}" aria-expanded="false" aria-controls="{{{id}}}-menu"{{#split-btn-disabled}} disabled{{/split-btn-disabled}}>
+		<button class="dropdown-toggle{{#split-btn-class}} {{.}}{{/split-btn-class}}"{{#id}} id="{{.}}-menu-btn"{{/id}} title="{{split-btn-title}}"{{#split-btn-data}} {{{.}}}{{/split-btn-data}} data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{split-btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu"{{#split-btn-disabled}} disabled{{/split-btn-disabled}}>
 		</button>
-		<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{{.}}}{{/menu-class}}" aria-labelledby="{{id}}-menu-btn">
+		<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{.}}{{/menu-class}}" aria-labelledby="{{id}}-menu-btn">
 			{{{body}}}
 		</div>
 	</div>
diff --git a/resources/templates/dropdown-split-link.mustache b/resources/templates/dropdown-split-link.mustache
@@ -1,11 +1,11 @@
-<div class="dropdown{{#cnt-class}} {{{.}}}{{/cnt-class}}">
-	<div class="btn-group{{#btn-group-class}} {{{.}}}{{/btn-group-class}}">
-		<a {{#btn-class}}class="{{{.}}}"{{/btn-class}}{{#id}} id={{{.}}}{{/id}} title="{{btn-title}}" {{#btn-data}}{{{.}}}{{/btn-data}} aria-haspopup="true" aria-label="{{{btn-aria-label}}}"{{#btn-disabled}} disabled{{/btn-disabled}} href="{{btn-href}}">
+<div class="dropdown{{#cnt-class}} {{.}}{{/cnt-class}}">
+	<div class="btn-group{{#btn-group-class}} {{.}}{{/btn-group-class}}">
+		<a {{#btn-class}}class="{{.}}"{{/btn-class}}{{#id}} id="{{.}}"{{/id}} title="{{btn-title}}"{{#btn-data}} {{{.}}}{{/btn-data}} aria-haspopup="true" aria-label="{{btn-aria-label}}"{{#btn-disabled}} disabled{{/btn-disabled}} href="{{btn-href}}">
 			{{{btn-text}}}
 		</a>
-		<a class="dropdown-toggle{{#split-btn-class}} {{{.}}}{{/split-btn-class}}"{{#id}} id="{{{.}}}-menu-btn"{{/id}} title="{{split-btn-title}}" {{#split-btn-data}}{{{.}}}{{/split-btn-data}}data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{{split-btn-aria-label}}}" aria-expanded="false" aria-controls="{{{id}}}-menu"{{#split-btn-disabled}} disabled{{/split-btn-disabled}} href="">
+		<a class="dropdown-toggle{{#split-btn-class}} {{.}}{{/split-btn-class}}"{{#id}} id="{{.}}-menu-btn"{{/id}} title="{{split-btn-title}}"{{#split-btn-data}} {{{.}}}{{/split-btn-data}} data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{split-btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu"{{#split-btn-disabled}} disabled{{/split-btn-disabled}} href="">
 		</a>
-		<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{{.}}}{{/menu-class}}" aria-labelledby="{{id}}-menu-btn">
+		<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{.}}{{/menu-class}}" aria-labelledby="{{id}}-menu-btn">
 			{{{body}}}
 		</div>
 	</div>
diff --git a/resources/templates/dropdown.mustache b/resources/templates/dropdown.mustache
@@ -1,6 +1,6 @@
-<div class="dropdown{{#cnt-class}} {{{.}}}{{/cnt-class}}">
-	<a role="button" class="dropdown-toggle{{#btn-class}} {{{.}}}{{/btn-class}}"{{#id}} id="{{{.}}}"{{/id}} title="{{title}}" {{#btn-data}}{{{.}}}{{/btn-data}}data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu" href="">{{{text}}}</a>
-	<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{{.}}}{{/menu-class}}" aria-labelledby="{{id}}">
+<div class="dropdown{{#cnt-class}} {{.}}{{/cnt-class}}">
+	<a role="button" class="dropdown-toggle{{#btn-class}} {{.}}{{/btn-class}}"{{#id}} id="{{.}}"{{/id}} title="{{title}}"{{#btn-data}} {{{.}}}{{/btn-data}} data-bs-toggle="dropdown" aria-haspopup="true" aria-label="{{btn-aria-label}}" aria-expanded="false" aria-controls="{{id}}-menu" href="">{{{text}}}</a>
+	<div id="{{id}}-menu" class="dropdown-menu{{#menu-class}} {{.}}{{/menu-class}}" aria-labelledby="{{id}}">
 		{{{body}}}
 	</div>
 </div>
diff --git a/resources/templates/link.mustache b/resources/templates/link.mustache
@@ -1 +1 @@
-<a{{#id}} id="{{{.}}}"{{/id}}{{#class}} class="{{{.}}}"{{/class}} href="{{href}}"{{#title}} title="{{.}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#role}} role="{{{.}}}"{{/role}}{{#rel}} role="{{{.}}}"{{/rel}}{{#aria}} {{{.}}}{{/aria}}{{#target}} target="{{.}}"{{/target}}>{{{body}}}</a>
+<a{{#id}} id="{{.}}"{{/id}}{{#class}} class="{{.}}"{{/class}} href="{{href}}"{{#title}} title="{{.}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#role}} role="{{.}}"{{/role}}{{#rel}} role="{{.}}"{{/rel}}{{#aria}} {{{.}}}{{/aria}}{{#target}} target="{{.}}"{{/target}}>{{{body}}}</a>
diff --git a/resources/templates/linklist-group-from-array.mustache b/resources/templates/linklist-group-from-array.mustache
@@ -1,7 +1,7 @@
-<ul {{#cnt-id}} id="{{{.}}}" {{/cnt-id}}class="list-group{{#cnt-class}} {{{.}}}{{/cnt-class}}"{{#cnt-aria}} {{{.}}}{{/cnt-aria}}>
+<ul {{#cnt-id}} id="{{.}}" {{/cnt-id}}class="list-group{{#cnt-class}} {{.}}{{/cnt-class}}"{{#cnt-aria}} {{{.}}}{{/cnt-aria}}>
 	{{#links}}
 	<li class="list-group-item">
-		<a{{#id}} id="{{{.}}}"{{/id}} {{#class}}class=" {{{.}}}"{{/class}} href="{{{href}}}" {{#title}} title="{{{.}}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#aria}} {{{.}}}{{/aria}}{{#rel}} rel="{{{.}}}"{{/rel}}{{#target}} target="{{{.}}}"{{/target}}>{{{text}}}</a>
+		<a{{#id}} id="{{.}}"{{/id}}{{#class}} class="{{.}}"{{/class}} href="{{href}}"{{#title}} title="{{.}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#aria}} {{{.}}}{{/aria}}{{#rel}} rel="{{.}}"{{/rel}}{{#target}} target="{{.}}"{{/target}}>{{{text}}}</a>
 	</li>
 	{{/links}}
 </ul>
diff --git a/resources/templates/linklist-group-item.mustache b/resources/templates/linklist-group-item.mustache
@@ -1,3 +1,3 @@
-<li class="list-group-item{{#class}} {{{.}}}{{/class}}">
+<li class="list-group-item{{#class}} {{.}}{{/class}}">
 	{{{body}}}
 </li>
diff --git a/resources/templates/linklist-group.mustache b/resources/templates/linklist-group.mustache
@@ -1,3 +1,3 @@
-<ul {{#id}}id="{{{.}}}" {{/id}}class="list-group{{#class}} {{{.}}}{{/class}}"{{#aria}} {{{.}}}{{/aria}}>
+<ul {{#id}}id="{{.}}" {{/id}}class="list-group{{#class}} {{.}}{{/class}}"{{#aria}} {{{.}}}{{/aria}}>
 	{{{body}}}
 </ul>
diff --git a/resources/templates/media-object.mustache b/resources/templates/media-object.mustache
@@ -1,8 +1,8 @@
-<div id={{id}} class="d-flex{{#container-class}} {{{.}}}{{/container-class}}">
-	<div class="{{#img-class}} {{{.}}}{{/img-class}}">
+<div id={{id}} class="d-flex{{#container-class}} {{.}}{{/container-class}}">
+	<div class="{{#img-class}} {{.}}{{/img-class}}">
 		<img src="{{src}}" alt="{{alt}}">
 	</div>
-	<div class="{{#body-class}} {{{.}}}{{/body-class}}">
+	<div class="{{#body-class}} {{.}}{{/body-class}}">
 		{{{body}}}
 	</div>
 </div>
diff --git a/resources/templates/separator.mustache b/resources/templates/separator.mustache
@@ -1 +1 @@
-<span class="separator{{#class}} {{{.}}}{{/class}}"></span>
+<span class="separator{{#class}} {{.}}{{/class}}"></span>
diff --git a/src/AriaAttributesBuilder.php b/src/AriaAttributesBuilder.php
@@ -2,10 +2,12 @@
 
 namespace MWStake\MediaWiki\Component\CommonUserInterface;
 
+use Sanitizer;
+
 class AriaAttributesBuilder {
 
 	/**
-	 * @return StdClass
+	 * @return AriaAttributesBuilder
 	 */
 	public static function factory() {
 		return new static();
@@ -19,7 +21,10 @@ public function build( $data ) : array {
 		$attribs = [];
 
 		foreach ( $data  as $key => $value ) {
-			$attrib = 'aria-' . $key . '="' . $value . '"';
+			$attrib = Sanitizer::safeEncodeTagAttributes( [
+				"aria-$key" => $value
+			] );
+			$attrib = trim( $attrib );
 			array_push( $attribs, $attrib );
 		}
 
diff --git a/src/Component/SimpleLink.php b/src/Component/SimpleLink.php
@@ -15,6 +15,7 @@ class SimpleLink extends ComponentBase implements ILink {
 	public function __construct( $options ) {
 		$this->options = array_merge(
 			[
+				'id' => 'simple-link',
 				'role' => '',
 				'classes' => [],
 				'href' => '',
diff --git a/src/DataAttributesBuilder.php b/src/DataAttributesBuilder.php
@@ -2,9 +2,11 @@
 
 namespace MWStake\MediaWiki\Component\CommonUserInterface;
 
+use Sanitizer;
+
 class DataAttributesBuilder {
 	/**
-	 * @return StdClass
+	 * @return DataAttributesBuilder
 	 */
 	public static function factory() {
 		return new static();
@@ -18,7 +20,10 @@ public function build( $data ) : array {
 		$attribs = [];
 
 		foreach ( $data  as $key => $value ) {
-			$attrib = 'data-' . $key . '="' . $value . '"';
+			$attrib = Sanitizer::safeEncodeTagAttributes( [
+				"data-$key" => $value
+			] );
+			$attrib = trim( $attrib );
 			array_push( $attribs, $attrib );
 		}
 
diff --git a/src/Renderer/Badge.php b/src/Renderer/Badge.php
@@ -49,6 +49,6 @@ public function getRendererDataTreeNode( $component, $subComponentNodes ) : arra
 	 * @return string
 	 */
 	public function getTemplatePathname() : string {
-		return $this->templateBasePath . '/card-link.mustache';
+		return $this->templateBasePath . '/badge.mustache';
 	}
 }
diff --git a/src/Renderer/LinklistGroupItem.php b/src/Renderer/LinklistGroupItem.php
@@ -31,6 +31,7 @@ public function getRendererDataTreeNode( $component, $subComponentNodes ) : arra
 		if ( $component instanceof ILinklistGroupItem ) {
 			$templateData = [
 				'cnt-id' => $component->getId(),
+				'class' => implode( ' ', $component->getClasses() ),
 				'body' => $subComponentNodes
 			];
 
@@ -55,6 +56,6 @@ public function getRendererDataTreeNode( $component, $subComponentNodes ) : arra
 	 * @return string
 	 */
 	public function getTemplatePathname() : string {
-		return $this->templateBasePath . '/linklist-group.mustache';
+		return $this->templateBasePath . '/linklist-group-item.mustache';
 	}
 }
diff --git a/tests/phpunit/AriaAttributesBuilderTest.php b/tests/phpunit/AriaAttributesBuilderTest.php
@@ -17,14 +17,15 @@ public function testBuild() {
 
 		$aria = [
 			'bs-toggle' => 'toggle-id',
-			'mw' => 'some value'
-
+			'mw' => 'some value',
+			'evil' => '" mouseover="alert(\'Should not work\');"'
 		];
 
 		$ariaAttributes = $ariaAttributesBuilder->build( $aria );
 		$ariaAttributesExpected = [
 			'aria-bs-toggle="toggle-id"',
-			'aria-mw="some value"'
+			'aria-mw="some value"',
+			'aria-evil="&quot; mouseover=&quot;alert(&#039;Should not work&#039;);&quot;"'
 		];
 
 		$this->assertEquals( $ariaAttributesExpected, $ariaAttributes );
diff --git a/tests/phpunit/DataAttributesBuilderTest.php b/tests/phpunit/DataAttributesBuilderTest.php
diff --git a/tests/phpunit/LinkConverterTest.php b/tests/phpunit/LinkConverterTest.php
diff --git a/tests/phpunit/Renderer/BadgeRendererTest.php b/tests/phpunit/Renderer/BadgeRendererTest.php
diff --git a/tests/phpunit/Renderer/LinkRendererTest.php b/tests/phpunit/Renderer/LinkRendererTest.php
diff --git a/tests/phpunit/Renderer/results/badge.html b/tests/phpunit/Renderer/results/badge.html
diff --git a/tests/phpunit/Renderer/results/link.html b/tests/phpunit/Renderer/results/link.html

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`return;`
`9`	`9`	`}`
`10`	`10`
`11`		`-define( 'MWSTAKE_MEDIAWIKI_COMPONENT_COMMONUSERINTERFACE_VERSION', '3.0.1' );`
	`11`	`+define( 'MWSTAKE_MEDIAWIKI_COMPONENT_COMMONUSERINTERFACE_VERSION', '3.0.2' );`
`12`	`12`
`13`	`13`	`MWStake\MediaWiki\ComponentLoader\Bootstrapper::getInstance()`
`14`	`14`	`->register( 'commonuserinterface', function () {`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<span class="badge{{#class}} class="{{{.}}}"{{/class}}>{{{text}}}</span>`
	`1`	`+<span class="badge{{#class}} class="{{.}}"{{/class}}>{{{text}}}</span>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<img src="{{src}}" class="card-img-{{type}}{{#class}} {{{.}}}{{/class}}" alt="{{alt}}">`
	`1`	`+<img src="{{src}}" class="card-img-{{type}}{{#class}} {{.}}{{/class}}" alt="{{alt}}">`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<a{{#id}} id="{{{.}}}"{{/id}} class="card-link{{#class}} {{{.}}}{{/class}}" href="{{{href}}}" {{#title}} title="{{{.}}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#role}} role="{{{.}}}"{{/role}}{{#rel}} role="{{{.}}}"{{/rel}}{{#aria-label}} aria-label="{{{.}}}"{{/aria-label}}>{{{text}}}</a>`
	`1`	`+<a{{#id}} id="{{.}}"{{/id}} class="card-link{{#class}} {{.}}{{/class}}" href="{{href}}" {{#title}} title="{{.}}"{{/title}}{{#data}} {{{.}}}{{/data}}{{#role}} role="{{.}}"{{/role}}{{#rel}} rel="{{.}}"{{/rel}}{{#aria-label}} aria-label="{{.}}"{{/aria-label}}>{{{text}}}</a>`