From 2b6b2d391eb98c97f35a3e0a96333f1f87269091 Mon Sep 17 00:00:00 2001
From: manuel_winkelhofer <winkelhofer.manuel@gmail.com>
Date: Thu, 22 Oct 2020 13:36:56 +0200
Subject: [PATCH] [TASK] Add aria-label atributes to topbar icons
To announce the buttons correctly when using assistive technologies
there needs to be an aria-label, as there will not be a real label
attached to the top bar buttons.
Resolves: #92667
Releases: master
Change-Id: I5cd6eae2da613ba87205835da4d1926b3076c6f0
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66320
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Michael Telgkamp <michael.telgkamp@mindscreen.de>
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Oliver Klee <typo3-coding@oliverklee.de>
Reviewed-by: Michael Telgkamp <michael.telgkamp@mindscreen.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
---
.../backend/Resources/Private/Partials/Backend/Topbar.html | 6 +++---
.../core/Resources/Private/Language/locallang_core.xlf | 6 ++++++
2 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html b/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html
index 68ba14e18462..9c3114dc314b 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html
@@ -15,10 +15,10 @@
</span>
</a>
</div>
- <button class="topbar-button topbar-button-toolbar t3js-topbar-button-toolbar">
+ <button class="topbar-button topbar-button-toolbar t3js-topbar-button-toolbar" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:toolbarItems.toolbarOpenClose')}" aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:toolbarItems.toolbarOpenClose')}">
<core:icon identifier="actions-system-extension-configure" alternativeMarkupIdentifier="inline" />
</button>
- <button class="topbar-button topbar-button-search t3js-topbar-button-search">
+ <button class="topbar-button topbar-button-search t3js-topbar-button-search" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:toolbarItems.searchbarOpenClose')}" aria-label="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:toolbarItems.searchbarOpenClose')}">
<core:icon identifier="actions-search" alternativeMarkupIdentifier="inline" />
</button>
</div>
@@ -36,7 +36,7 @@
<f:variable name="disabled" value="{f:if(condition: '!{enabled}', then: 1, else: 0)}" />
<f:variable name="disabledAttr" value="{f:if(condition: '{disabled}', then: 'disabled')}" />
- <button {disabledAttr} class="topbar-button {classes}" title="{title}">
+ <button {disabledAttr} class="topbar-button {classes}" title="{title}" aria-label="{title}">
<f:render section="Icon" arguments="{identifier: icon, disabled: disabled}" />
</button>
</f:section>
diff --git a/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf b/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
index e4263bde7529..cc480268c415 100644
--- a/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
+++ b/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
@@ -1188,6 +1188,12 @@ Do you want to refresh it now?</source>
<trans-unit id="toolbarItems.search" resname="toolbarItems.search">
<source>Search</source>
</trans-unit>
+ <trans-unit id="toolbarItems.toolbarOpenClose" resname="toolbarItems.toolbarOpenClose">
+ <source>Open/Close toolbar</source>
+ </trans-unit>
+ <trans-unit id="toolbarItems.searchbarOpenClose" resname="toolbarItems.searchbarOpenClose">
+ <source>Open/Close searchbar</source>
+ </trans-unit>
<trans-unit id="toolbarItems.workspace" resname="toolbarItems.workspace">
<source>Workspace</source>
</trans-unit>
--
GitLab