diff --git a/Build/Sources/Sass/component/_treelist.scss b/Build/Sources/Sass/component/_treelist.scss
index d986bcb2bdd51b96571cbfb324a920f8705b6174..941f2b8b9373aaa5279c77850803cad810f2631a 100644
--- a/Build/Sources/Sass/component/_treelist.scss
+++ b/Build/Sources/Sass/component/_treelist.scss
@@ -205,14 +205,6 @@
typo3-backend-icon {
--icon-color-primary: var(--treelist-color);
}
-
- &[aria-expanded="true"] typo3-backend-icon[identifier="actions-chevron-right"] {
- display: none;
- }
-
- &[aria-expanded="false"] typo3-backend-icon[identifier="actions-chevron-down"] {
- display: none;
- }
}
.treelist-root {
diff --git a/Build/Sources/TypeScript/backend/tree/tree-node-toggle.ts b/Build/Sources/TypeScript/backend/tree/tree-node-toggle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45a4cebca6d395a78a68cb538b6457fb0f1f1a52
--- /dev/null
+++ b/Build/Sources/TypeScript/backend/tree/tree-node-toggle.ts
@@ -0,0 +1,31 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { customElement, property } from 'lit/decorators';
+import { html, LitElement, TemplateResult } from 'lit';
+import '@typo3/backend/element/icon-element';
+
+@customElement('typo3-backend-tree-node-toggle')
+export default class TreeNodeToggle extends LitElement {
+ @property({ type: String, reflect: true, attribute: 'aria-expanded' }) expanded: string = 'false';
+
+ public render(): TemplateResult | symbol {
+ return html`<typo3-backend-icon size="small" identifier="${this.expanded === 'true' ? 'actions-chevron-down' : 'actions-chevron-right'}"></typo3-backend-icon>`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'typo3-backend-tree-node-toggle': TreeNodeToggle;
+ }
+}
diff --git a/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Active.html b/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Active.html
index 1d6f1ecb5a45a5cb053c5286e9c7d780a0234683..944911236ff79c6da5e2ad393fca3f6d59f11f2d 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Active.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Active.html
@@ -12,7 +12,7 @@
includeJavaScriptModules="{
0: '@typo3/backend/context-menu.js',
1: '@typo3/backend/element/immediate-action-element.js',
- 2: '@typo3/backend/element/icon-element.js',
+ 2: '@typo3/backend/tree/tree-node-toggle.js',
3: '@typo3/backend/utility/collapse-state-persister.js',
4: '@typo3/backend/utility/collapse-state-search.js'
}"
@@ -361,15 +361,12 @@
</f:if>
<li>
<f:if condition="{child.children}">
- <a
+ <typo3-backend-tree-node-toggle
class="treelist-control collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-list-{child.identifier}"
- aria-expanded="false"
- >
- <typo3-backend-icon size="small" identifier="actions-chevron-right"></typo3-backend-icon>
- <typo3-backend-icon size="small" identifier="actions-chevron-down"></typo3-backend-icon>
- </a>
+ aria-expanded="false">
+ </typo3-backend-tree-node-toggle>
</f:if>
<span class="treelist-group treelist-group-monospace">
<span class="treelist-label">{child.name}</span>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Includes.html b/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Includes.html
index 70823655f610e752b3c3a6dc3e2ea4e8dcba5b76..733809b9bc5adb09709c6e70938d88f0e356d24c 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Includes.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/Includes.html
@@ -12,7 +12,7 @@
includeJavaScriptModules="{
0: '@typo3/backend/context-menu.js',
1: '@typo3/backend/element/immediate-action-element.js',
- 2: '@typo3/backend/element/icon-element.js',
+ 2: '@typo3/backend/tree/tree-node-toggle.js',
3: '@typo3/backend/utility/collapse-state-persister.js',
4: '@typo3/backend/pagetsconfig/pagetsconfig-includes.js'
}"
@@ -113,15 +113,12 @@
<f:for each="{tree.nextChild}" as="child">
<li>
<f:if condition="{child.children}">
- <a
+ <typo3-backend-tree-node-toggle
class="treelist-control treelist-control-collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-list-{child.identifier}"
- aria-expanded="false"
- >
- <typo3-backend-icon size="small" identifier="actions-chevron-down"></typo3-backend-icon>
- <typo3-backend-icon size="small" identifier="actions-chevron-right"></typo3-backend-icon>
- </a>
+ aria-expanded="false">
+ </typo3-backend-tree-node-toggle>
</f:if>
<div class="row justify-content-between">
<div class="col">
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 916fbf18b131d17682207ff77516fd610888ecd3..9ad4f9ae91b560bdb7fd4ac40a4d3641bd086a3c 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3840,8 +3840,6 @@ typo3-backend-live-search-result-item-action>* .livesearch-result-item-title .sm
.treelist-control:before,.treelist-control:target:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--treelist-control-size);height:var(--treelist-control-size);background-color:var(--treelist-bg)}
.treelist-control:active,.treelist-control:focus,.treelist-control:hover{cursor:pointer;outline:0;text-decoration:none}
.treelist-control typo3-backend-icon{--icon-color-primary:var(--treelist-color)}
-.treelist-control[aria-expanded=true] typo3-backend-icon[identifier=actions-chevron-right]{display:none}
-.treelist-control[aria-expanded=false] typo3-backend-icon[identifier=actions-chevron-down]{display:none}
.treelist-root{padding-left:0}
.treelist-root:before{display:none}
.treelist-root>li{padding-left:var(--treelist-control-size)}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/tree/tree-node-toggle.js b/typo3/sysext/backend/Resources/Public/JavaScript/tree/tree-node-toggle.js
new file mode 100644
index 0000000000000000000000000000000000000000..d486a2925111ec49efd943dd2f7aef3e4c91c0a2
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/tree/tree-node-toggle.js
@@ -0,0 +1,13 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+var __decorate=function(e,t,o,r){var n,c=arguments.length,d=c<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(d=(c<3?n(d):c>3?n(t,o,d):n(t,o))||d);return c>3&&d&&Object.defineProperty(t,o,d),d};import{customElement,property}from"lit/decorators.js";import{html,LitElement}from"lit";import"@typo3/backend/element/icon-element.js";let TreeNodeToggle=class extends LitElement{constructor(){super(...arguments),this.expanded="false"}render(){return html`<typo3-backend-icon size="small" identifier="${"true"===this.expanded?"actions-chevron-down":"actions-chevron-right"}"></typo3-backend-icon>`}};__decorate([property({type:String,reflect:!0,attribute:"aria-expanded"})],TreeNodeToggle.prototype,"expanded",void 0),TreeNodeToggle=__decorate([customElement("typo3-backend-tree-node-toggle")],TreeNodeToggle);export default TreeNodeToggle;
\ No newline at end of file
diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Template/TemplateCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Template/TemplateCest.php
index ca0210bf89d9d7592b69380abfac290a69dea902..72958ccd2fd1cf94401875b734f14e458de78274 100644
--- a/typo3/sysext/core/Tests/Acceptance/Application/Template/TemplateCest.php
+++ b/typo3/sysext/core/Tests/Acceptance/Application/Template/TemplateCest.php
@@ -108,10 +108,10 @@ final class TemplateCest
$I->waitForText('Setup');
// find and open page in tree
$I->waitForText('page = PAGE');
- $I->click('//span[@class="treelist-label"]/a[text()=\'page\']/../../../a');
+ $I->click('//span[@class="treelist-label"]/a[text()=\'page\']/../../../typo3-backend-tree-node-toggle');
// find and open page.10 in tree
$I->waitForText('10 = TEXT');
- $I->click('//span[@class="treelist-label"]/a[text()=\'page\']/../../../div/ul//span[@class="treelist-label"]/a[text()=\'10\']/../../../a');
+ $I->click('//span[@class="treelist-label"]/a[text()=\'page\']/../../../div/ul//span[@class="treelist-label"]/a[text()=\'10\']/../../../typo3-backend-tree-node-toggle');
// find and edit page.10.value in tree
$I->waitForText('value = Hello Acceptance Test!');
$I->click('//span[@class="treelist-label"]/a[text()=\'10\']/../../../div/ul//span[@class="treelist-label"]/a[text()=\'value\']');
diff --git a/typo3/sysext/lowlevel/Classes/Controller/ConfigurationController.php b/typo3/sysext/lowlevel/Classes/Controller/ConfigurationController.php
index 7c73156fcfec600e42a861d726912e26c886c2d4..cf95cd8c79eafad879cd95ee17624f246a3c55cc 100644
--- a/typo3/sysext/lowlevel/Classes/Controller/ConfigurationController.php
+++ b/typo3/sysext/lowlevel/Classes/Controller/ConfigurationController.php
@@ -101,10 +101,13 @@ final class ConfigurationController
$newIdentifier = '';
if ($isValueIterable && !empty($value)) {
$newIdentifier = hash('xxh3', $incomingIdentifier . $key);
- $html .= '<a class="treelist-control collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-list-' . $newIdentifier . '" aria-expanded="false">' .
- '<typo3-backend-icon size="small" identifier="actions-chevron-right"></typo3-backend-icon>' .
- '<typo3-backend-icon size="small" identifier="actions-chevron-down"></typo3-backend-icon>' .
- '</a>';
+ $html .= '
+ <typo3-backend-tree-node-toggle
+ class="treelist-control collapsed"
+ data-bs-toggle="collapse"
+ data-bs-target="#collapse-list-' . $newIdentifier . '"
+ aria-expanded="false">
+ </typo3-backend-tree-node-toggle>';
}
$html .= '<span class="treelist-group treelist-group-monospace">';
$html .= '<span class="treelist-label">' . htmlspecialchars((string)$key) . '</span>';
diff --git a/typo3/sysext/lowlevel/Resources/Private/Templates/Configuration.html b/typo3/sysext/lowlevel/Resources/Private/Templates/Configuration.html
index dac60a5038bce58d872e4e3f55d763cddfec37e3..6c347010ba5678da8412a0813b89a72121c44668 100644
--- a/typo3/sysext/lowlevel/Resources/Private/Templates/Configuration.html
+++ b/typo3/sysext/lowlevel/Resources/Private/Templates/Configuration.html
@@ -10,7 +10,7 @@
<f:be.pageRenderer
includeJavaScriptModules="{
- 0: '@typo3/backend/element/icon-element.js',
+ 0: '@typo3/backend/tree/tree-node-toggle.js',
1: '@typo3/backend/utility/collapse-state-persister.js',
2: '@typo3/backend/utility/collapse-state-search.js'
}"
diff --git a/typo3/sysext/tstemplate/Resources/Private/Partials/ActiveTree.html b/typo3/sysext/tstemplate/Resources/Private/Partials/ActiveTree.html
index 0f63168a145448d4add75c0480768cb348d20609..d9d3faa0658f062312bcd2ac930814e1795d5838 100644
--- a/typo3/sysext/tstemplate/Resources/Private/Partials/ActiveTree.html
+++ b/typo3/sysext/tstemplate/Resources/Private/Partials/ActiveTree.html
@@ -31,15 +31,12 @@
</f:if>
<li>
<f:if condition="{child.children}">
- <a
+ <typo3-backend-tree-node-toggle
class="treelist-control collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-list-{child.identifier}"
- aria-expanded="false"
- >
- <typo3-backend-icon size="small" identifier="actions-chevron-right"></typo3-backend-icon>
- <typo3-backend-icon size="small"identifier="actions-chevron-down"></typo3-backend-icon>
- </a>
+ aria-expanded="false">
+ </typo3-backend-tree-node-toggle>
</f:if>
<span class="treelist-group treelist-group-monospace">
diff --git a/typo3/sysext/tstemplate/Resources/Private/Partials/AnalyzerTree.html b/typo3/sysext/tstemplate/Resources/Private/Partials/AnalyzerTree.html
index 5618f9ab7e92cd130cfa138bbb974c0e875c3c47..0737c03e0e0668741cbf9cd90427921a2d1a2c6d 100644
--- a/typo3/sysext/tstemplate/Resources/Private/Partials/AnalyzerTree.html
+++ b/typo3/sysext/tstemplate/Resources/Private/Partials/AnalyzerTree.html
@@ -7,7 +7,7 @@
<f:be.pageRenderer
includeJavaScriptModules="{
- 0: '@typo3/backend/element/icon-element.js',
+ 0: '@typo3/backend/tree/tree-node-toggle.js',
1: '@typo3/backend/utility/collapse-state-persister.js'
}"
/>
@@ -18,15 +18,12 @@
<f:for each="{tree.nextChild}" as="child">
<li>
<f:if condition="{child.children}">
- <a
+ <typo3-backend-tree-node-toggle
class="treelist-control treelist-control-collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapse-list-{child.identifier}"
- aria-expanded="false"
- >
- <typo3-backend-icon size="small" identifier="actions-chevron-down"></typo3-backend-icon>
- <typo3-backend-icon size="small" identifier="actions-chevron-right"></typo3-backend-icon>
- </a>
+ aria-expanded="false">
+ </typo3-backend-tree-node-toggle>
</f:if>
<div class="row justify-content-between">
<div class="col">
diff --git a/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveMain.html b/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveMain.html
index 92ad7746e8842a0c8b3952c44a7ed73c79297ede..6110a25bcb7c6106bbbcfdd6244a9d3b49cd5645 100644
--- a/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveMain.html
+++ b/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveMain.html
@@ -10,7 +10,7 @@
includeJavaScriptModules="{
0: '@typo3/backend/context-menu.js',
1: '@typo3/backend/element/immediate-action-element.js',
- 3: '@typo3/backend/element/icon-element.js',
+ 3: '@typo3/backend/tree/tree-node-toggle.js',
4: '@typo3/backend/utility/collapse-state-persister.js',
5: '@typo3/backend/utility/collapse-state-search.js'
}"