[BUGFIX] Enhance accessibility in recycler module

This patch addresses two key accessibility issues in the recycler
module: it adds a caption element to the table for better context
and provides labels for dropdown icons used in multi-selection,
ensuring screen reader compatibility.

Resolves: #103764
Releases: main, 12.4
Change-Id: Ia8b839cbc438396c8438969087d225c37a479bcf
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/84107


Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: core-ci <typo3@b13.com>

typo3/sysext/recycler/Resources/Private/Language/locallang.xlf

@@ -36,6 +36,9 @@
 			<trans-unit id="button.expand" resname="button.expand">
 				<source>Expand record</source>
 			</trans-unit>
+			<trans-unit id="button.dropdown.multiselect" resname="button.dropdown.multiselect">
+				<source>Open context menu for multiselect options</source>
+			</trans-unit>
 			<trans-unit id="button.undoselected" resname="button.undoselected">
 				<source>Recover {0} records</source>
 			</trans-unit>
@@ -102,6 +105,9 @@
 			<trans-unit id="flashmessage.undo.failure.plural" resname="flashmessage.undo.failure.plural">
 				<source>Could not recover %d records.</source>
 			</trans-unit>
+			<trans-unit id="table.caption.recently_deleted_records" resname="table.caption.recently_deleted_records">
+				<source>Recently deleted records</source>
+			</trans-unit>
 			<trans-unit id="table.header.uid" resname="table.header.uid">
 				<source>UID</source>
 			</trans-unit>

typo3/sysext/recycler/Resources/Private/Templates/RecyclerModule.html

@@ -42,6 +42,7 @@
         <f:render section="multiRecordSelectionActions" arguments="{allowDelete: allowDelete}"/>
         <div class="table-fit mb-0">
             <table class="table table-hover" id="itemsInRecycler">
+                <caption class="visually-hidden"><f:translate key="LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:table.caption.recently_deleted_records" /></caption>
                 <thead>
                     <tr>
                         <th class="col-checkbox"><f:render section="multiRecordSelectionCheckboxActions" /></th>
@@ -68,6 +69,7 @@
     <div class="btn-group dropdown">
         <button type="button" class="dropdown-toggle dropdown-toggle-link t3js-multi-record-selection-check-actions-toggle" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false">
             <core:icon identifier="actions-selection" size="small" />
+            <span class="visually-hidden"><f:translate id="LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.dropdown.multiselect"/></span>
         </button>
         <ul class="dropdown-menu t3js-multi-record-selection-check-actions">
             <li>