[TASK] Improve accessibility of live search button in backend toolbar

eliashaeussler · bnf · commit 40cce308a7c0 · 2025-10-16T08:55:51.000+02:00
The "live search" button in the backend toolbar opens the live search as dialog, hence it should be marked as `aria-haspopup="dialog"`. In addition, the patch converts the link to a button, streamlining the behavior across all interactive elements in the backend toolbar. Resolves: #107706 Releases: main, 13.4 Change-Id: Ia15ee932e13afb21f9b33f69ed0583ce13b35d55 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/91079 Tested-by: Michael Telgkamp <michael.telgkamp@typo3.org> Reviewed-by: Michael Telgkamp <michael.telgkamp@typo3.org> Tested-by: core-ci <typo3@b13.com> Tested-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Benjamin Franzke <ben@bnf.dev>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html b/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html
@@ -38,6 +38,7 @@
             class="topbar-button topbar-button-search t3js-topbar-button-search"
             title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.searchbarOpenClose')}"
             aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.searchbarOpenClose')}"
+            aria-haspopup="dialog"
         >
             <core:icon identifier="actions-search" alternativeMarkupIdentifier="inline" />
         </button>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/LiveSearchToolbarItem.html b/typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/LiveSearchToolbarItem.html
@@ -1,9 +1,14 @@
 <html xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers" data-namespace-typo3-fluid="true">
 
-<a href="#" class="toolbar-item-link t3js-topbar-button-search" title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.search')}">
+<button
+    class="toolbar-item-link t3js-topbar-button-search"
+    title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.search')}"
+    aria-haspopup="dialog"
+>
     <f:render partial="ToolbarItems/ToolbarItem" arguments="{
         title: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.search',
         icon: '{core:icon(identifier: \'apps-toolbar-menu-search\', size: \'small\', alternativeMarkupIdentifier: \'inline\')}'
     }" />
-</a>
+</button>
+
 </html>

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@`
`38`	`38`	`class="topbar-button topbar-button-search t3js-topbar-button-search"`
`39`	`39`	`title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.searchbarOpenClose')}"`
`40`	`40`	`aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.searchbarOpenClose')}"`
	`41`	`+ aria-haspopup="dialog"`
`41`	`42`	`>`
`42`	`43`	`<core:icon identifier="actions-search" alternativeMarkupIdentifier="inline" />`
`43`	`44`	`</button>`