[TASK] Add meaningful title to File selector add file button

The "+" labelled button in the File selector modal was just labelled with the filename as the title which doesn't give any meaning to screenreader users. To show the purpose of the button to screenreader users the title has been changed to additionally describe the action. Also an aria-label with the same value has been added. This is not ideal, because some screenreaders will read out the title twice, but on the other hand other screenreaders ignore the title or the aria-label attribute. Resolves: #103292 Releases: main, 12.4 Change-Id: Ia53fd77623e3cbd3a63a48f1bd4edc457f453c6b Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83224 Tested-by: Michael Telgkamp <michael.telgkamp@mindscreen.de> Tested-by: core-ci <typo3@b13.com> Reviewed-by: Michael Telgkamp <michael.telgkamp@mindscreen.de> Tested-by: Oliver Bartsch <bo@cedev.de> Tested-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Oliver Bartsch <bo@cedev.de> Reviewed-by: Benjamin Franzke <ben@bnf.dev>
TYPO3 · Mar 13, 2024 · 79329c7 · 79329c7
1 parent f5a6bbb
commit 79329c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf b/typo3/sysext/core/Resources/Private/Language/locallang_core.xlf
@@ -1155,6 +1155,9 @@ Do you want to refresh it now?</source>
 			<trans-unit id="cm.select" resname="cm.select">
 				<source>Select</source>
 			</trans-unit>
+			<trans-unit id="cm.selectFile" resname="cm.selectFile">
+				<source>Select %s</source>
+			</trans-unit>
 			<trans-unit id="cm.deselect" resname="cm.deselect">
 				<source>Deselect</source>
 			</trans-unit>

diff --git a/typo3/sysext/filelist/Classes/FileList.php b/typo3/sysext/filelist/Classes/FileList.php
@@ -26,7 +26,6 @@
 use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownItem;
 use TYPO3\CMS\Backend\Template\Components\Buttons\DropDownButton;
 use TYPO3\CMS\Backend\Template\Components\Buttons\GenericButton;
-use TYPO3\CMS\Backend\Template\Components\Buttons\InputButton;
 use TYPO3\CMS\Backend\Template\Components\Buttons\LinkButton;
 use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Core\Authentication\BackendUserAuthentication;
@@ -970,10 +969,18 @@ protected function createControlSelect(ResourceView $resourceView): ?ButtonInter
             return null;
         }
 
-        $button = GeneralUtility::makeInstance(InputButton::class);
-        $button->setTitle($resourceView->getName());
+        $title = sprintf(
+            $this->getLanguageService()->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:cm.selectFile'),
+            $resourceView->getName(),
+        );
+        $button = GeneralUtility::makeInstance(GenericButton::class);
+        $button->setTitle($title);
+        $button->setAttributes([
+            'type' => 'button',
+            'data-filelist-action' => 'select',
+            'aria-label' => $title,
+        ]);
         $button->setIcon($this->iconFactory->getIcon('actions-plus', IconSize::SMALL));
-        $button->setDataAttributes(['filelist-action' => 'select']);
 
         return $button;
     }