[BUGFIX] Make context menu trigger a button

The trigger to open the context menu is now a proper `button` element. Resolves: #103269 Releases: main, 12.4 Change-Id: Ia3932e4932ccd347b6816e08ee763420c70fbbba Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83202 Tested-by: core-ci <typo3@b13.com> Reviewed-by: Oliver Bartsch <bo@cedev.de> Tested-by: Oliver Bartsch <bo@cedev.de>
TYPO3 · Mar 4, 2024 · 4856074 · 4856074
1 parent 50b6c74
commit 4856074
Show file tree

Hide file tree

Showing 21 changed files with 86 additions and 67 deletions.
diff --git a/Build/Sources/TypeScript/backend/drag-uploader.ts b/Build/Sources/TypeScript/backend/drag-uploader.ts
@@ -758,9 +758,9 @@ class FileQueueItem {
       if (data.upload[0].icon) {
         this.$iconCol
           .html(
-            '<a href="#" data-contextmenu-trigger="click" data-contextmenu-uid="'
+            '<button type="button" class="btn btn-link p-0" data-contextmenu-trigger="click" data-contextmenu-uid="'
             + combinedIdentifier + '" data-contextmenu-table="sys_file">'
-            + data.upload[0].icon + '</span></a>',
+            + data.upload[0].icon + '</span></button>',
           );
       }
 

diff --git a/typo3/sysext/backend/Classes/Utility/BackendUtility.php b/typo3/sysext/backend/Classes/Utility/BackendUtility.php
@@ -2129,8 +2129,8 @@ public static function getPreviewUrl(
      */
     public static function wrapClickMenuOnIcon($content, $table, $uid = 0, $context = ''): string
     {
-        $attributes = self::getContextMenuAttributes((string)$table, $uid, (string)$context, 'click');
-        return '<a href="#" ' . GeneralUtility::implodeAttributes($attributes, true) . '>' . $content . '</a>';
+        $attributes = self::getContextMenuAttributes((string)$table, $uid, (string)$context);
+        return '<button type="button" class="btn btn-link p-0" ' . GeneralUtility::implodeAttributes($attributes, true) . '>' . $content . '</button>';
     }
 
     /**

diff --git a/typo3/sysext/backend/Resources/Private/Partials/PageLayout/RecordDefault/Header.html b/typo3/sysext/backend/Resources/Private/Partials/PageLayout/RecordDefault/Header.html
@@ -34,9 +34,10 @@
                             <core:icon identifier="actions-edit-delete" size="small" />
                         </a>
                     </f:if>
-                    <button aria-haspopup="true"
+                    <button type="button"
+                            aria-haspopup="true"
                             aria-controls="contentMenu0" aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:advancedFunctions')}"
-                            class="btn btn-default btn-borderless btn-sm"
+                            class="btn btn-link p-0"
                             data-contextmenu-trigger="click"
                             data-contextmenu-table="tt_content"
                             data-contextmenu-uid="{item.record.uid}">

diff --git a/typo3/sysext/backend/Resources/Private/Templates/Page/NewPages.html b/typo3/sysext/backend/Resources/Private/Templates/Page/NewPages.html
@@ -66,13 +66,14 @@ <h2 class="mt-4">
                                             <td>
                                                 <span class="treeline-icon treeline-icon-join{f:if(condition: '{pageIterator.isLast}', then: 'bottom')}"></span>
                                                 <span title="id={page.uid}"><f:spaceless>
-                                                    <a href="#"
+                                                    <button type="button"
+                                                        class="btn btn-link p-0"
                                                         data-contextmenu-trigger="click"
                                                         data-contextmenu-table="pages"
                                                         data-contextmenu-uid="{page.uid}"
                                                     >
                                                         <core:iconForRecord table="pages" row="{page}" />
-                                                    </a>
+                                                    </button>
                                                     {page.title -> f:format.crop(maxCharacters: maxTitleLength)}
                                                 </f:spaceless></span>
                                             </td>

diff --git a/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/RecordsOverview.html b/typo3/sysext/backend/Resources/Private/Templates/PageTsConfig/RecordsOverview.html
@@ -47,16 +47,17 @@ <h1>
                                     <tr>
                                         <td class="align-top nowrap"><f:spaceless>
                                             <span style="margin-left: {line.padding}px">
-                                                <a
-                                                    href="#"
+                                                <button
+                                                    type="button"
+                                                    class="btn btn-link p-0"
                                                     data-contextmenu-trigger="click"
                                                     data-contextmenu-table="pages"
                                                     data-contextmenu-uid="{line.title}"
                                                 >
                                                     <span title="id={line.title}">
                                                         <f:format.raw>{line.icon}</f:format.raw>
                                                     </span>
-                                                </a>
+                                                </button>
                                                 <f:format.raw>{line.pageTitle}</f:format.raw>
                                             </span>
                                         </f:spaceless></td>

diff --git a/typo3/sysext/backend/Resources/Private/Templates/SiteConfiguration/Overview.html b/typo3/sysext/backend/Resources/Private/Templates/SiteConfiguration/Overview.html
@@ -81,14 +81,15 @@ <h1><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_sitec
                             </f:for>
                             <tr>
                                 <td class="col-icon align-top">
-                                    <a href="#"
+                                    <button type="button"
+                                        class="btn btn-link p-0"
                                         data-contextmenu-trigger="click"
                                         data-contextmenu-table="pages"
                                         data-contextmenu-uid="{rootPage.uid}">
                                         <span style="margin-left: {rootLinePage.margin}px">
                                             <core:iconForRecord table="pages" row="{rootPage}" />
                                         </span>
-                                    </a>
+                                    </button>
                                 </td>
                                 <td class="align-top">
                                     {rootPage.title}

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/drag-uploader.js b/typo3/sysext/backend/Resources/Public/JavaScript/drag-uploader.js
diff --git a/typo3/sysext/beuser/Resources/Private/Partials/BackendUser/PaginatedList.html b/typo3/sysext/beuser/Resources/Private/Partials/BackendUser/PaginatedList.html
@@ -19,15 +19,16 @@
             <f:for each="{paginator.paginatedItems}" as="backendUser">
                 <tr>
                     <td class="col-avatar">
-                        <a
-                            href="#"
+                        <button
+                            type="button"
+                            class="btn btn-link p-0"
                             data-contextmenu-trigger="click"
                             data-contextmenu-table="be_users"
                             data-contextmenu-uid="{backendUser.uid}"
                             title="{f:if(condition: '{backendUser.description}', then: '{backendUser.description} ')}(id={backendUser.uid})"
                         >
                             <backend:avatar backendUser="{backendUser.uid}" showIcon="TRUE" />
-                        </a>
+                        </button>
                     </td>
                     <td class="col-title">
                         <backend:link.editRecord table="be_users" uid="{backendUser.uid}" title="edit">

diff --git a/typo3/sysext/beuser/Resources/Private/Partials/BackendUserGroup/PaginatedList.html b/typo3/sysext/beuser/Resources/Private/Partials/BackendUserGroup/PaginatedList.html
@@ -19,15 +19,16 @@
             <f:for each="{paginator.paginatedItems}" as="backendUserGroup">
                 <tr>
                     <td class="col-icon">
-                        <a
-                            href="#"
+                        <button
+                            type="button"
+                            class="btn btn-link p-0"
                             data-contextmenu-trigger="click"
                             data-contextmenu-table="be_groups"
                             data-contextmenu-uid="{backendUserGroup.uid}"
                             title="{f:if(condition: '{backendUserGroup.description}', then: '{backendUserGroup.description} ')}(id={backendUserGroup.uid})"
                         >
                             <beuser:spriteIconForRecord table="be_groups" object="{backendUserGroup}" />
-                        </a>
+                        </button>
                     </td>
                     <td class="title">
                         <backend:link.editRecord table="be_groups" uid="{backendUserGroup.uid}" title="edit">

diff --git a/typo3/sysext/beuser/Resources/Private/Partials/Compare/Information.html b/typo3/sysext/beuser/Resources/Private/Partials/Compare/Information.html
@@ -44,15 +44,16 @@
                     <f:for each="{groups.all}" as="group">
                         <tr>
                             <td class="col-title col-responsive nowrap">
-                                <a
-                                    href="#"
+                                <button
+                                    type="button"
+                                    class="btn btn-link p-0"
                                     data-contextmenu-trigger="click"
                                     data-contextmenu-table="be_groups"
                                     data-contextmenu-uid="{group.row.uid}"
                                     title="id={group.row.uid}"
                                 >
                                     <core:iconForRecord table="be_groups" row="{group.row}"/>
-                                </a>
+                                </button>
                                 <backend:link.editRecord table="be_groups" uid="{group.row.uid}">
                                     {group.row.title}
                                 </backend:link.editRecord>
@@ -74,15 +75,16 @@
                 <f:for each="{dbMounts}" as="item">
                     <tr>
                         <td class="col-icon">
-                            <a
-                                href="#"
+                            <button
+                                type="button"
+                                class="btn btn-link p-0"
                                 data-contextmenu-trigger="click"
                                 data-contextmenu-table="pages"
                                 data-contextmenu-uid="{item.uid}"
                                 title="id={item.uid}"
                             >
                                 <core:iconForRecord table="pages" row="{item}"/>
-                            </a>
+                            </button>
                         </td>
                         <td class="col-title">{item.title} <code>[{item.uid}]</code></td>
                     </tr>
@@ -99,15 +101,16 @@
                 <f:for each="{fileMounts}" as="item">
                     <tr>
                         <td class="col-icon">
-                            <a
-                                href="#"
+                            <button
+                                type="button"
+                                class="btn btn-link p-0"
                                 data-contextmenu-trigger="click"
                                 data-contextmenu-table="sys_filemounts"
                                 data-contextmenu-uid="{item.uid}"
                                 title="id={item.uid}"
                             >
                                 <core:iconForRecord table="sys_filemounts" row="{item}"/>
-                            </a>
+                            </button>
                         </td>
                         <td class="col-title">{item.title} <code>[{item.uid}]</code></td>
                     </tr>
@@ -144,15 +147,16 @@
                 <f:for each="{categories}" as="item">
                     <tr>
                         <td class="col-icon">
-                            <a
-                                href="#"
+                            <button
+                                type="button"
+                                class="btn btn-link p-0"
                                 data-contextmenu-trigger="click"
                                 data-contextmenu-table="sys_category"
                                 data-contextmenu-uid="{item.uid}"
                                 title="id={item.uid}"
                             >
                                 <core:iconForRecord table="sys_category" row="{item}"/>
-                            </a>
+                            </button>
                         </td>
                         <td class="col-title">{item.title} <code>[{item.uid}]</code></td>
                     </tr>
@@ -166,16 +170,17 @@
     <f:if condition="{workspaces}">
         <f:if condition="{workspaces.record.uid}">
             <strong><f:translate key="information.defaultWorkspace" />:</strong>
-            <a
-                href="#"
+            <button
+                type="button"
+                class="btn btn-link p-0"
                 data-contextmenu-trigger="click"
                 data-contextmenu-table="sys_workspace"
                 data-contextmenu-uid="{workspaces.record.uid}"
                 title="id={workspaces.record.uid}"
             >
                 <core:iconForRecord table="sys_workspaces" row="{workspaces.record}"/>
                 {workspaces.record.title}
-            </a>
+            </button>
         </f:if>
     </f:if>
 </f:section>

diff --git a/typo3/sysext/beuser/Resources/Private/Partials/Filemount/PaginatedList.html b/typo3/sysext/beuser/Resources/Private/Partials/Filemount/PaginatedList.html
@@ -22,15 +22,16 @@
             <f:for each="{paginator.paginatedItems}" as="fileMount">
                 <tr>
                     <td class="col-icon">
-                        <a
-                            href="#"
+                        <button
+                            type="button"
+                            class="btn btn-link p-0"
                             data-contextmenu-trigger="click"
                             data-contextmenu-table="sys_filemounts"
                             data-contextmenu-uid="{fileMount.uid}"
                             title="{f:if(condition: '{fileMount.title}', then: '{fileMount.title} ')}(id={fileMount.uid})"
                         >
                             <beuser:spriteIconForRecord table="sys_filemounts" object="{fileMount}" />
-                        </a>
+                        </button>
                     </td>
                     <td class="col-title">{fileMount.title}</td>
                     <td>{fileMount.description}</td>

diff --git a/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Compare.html b/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Compare.html
@@ -38,14 +38,15 @@ <h1><f:translate key="backendUser.compare.title" /></h1>
                     <th><f:translate key="avatar" /></th>
                     <f:for each="{compareUserList}" as="compareData">
                         <td>
-                            <a
-                                href="#"
+                            <button
+                                type="button"
+                                class="btn btn-link p-0"
                                 data-contextmenu-trigger="click"
                                 data-contextmenu-table="be_users"
                                 data-contextmenu-uid="{compareData.user.uid}"
                                 title="id={compareData.user.uid}">
                                 <backend:avatar backendUser="{compareData.user.uid}" showIcon="true" />
-                            </a>
+                            </button>
                         </td>
                     </f:for>
                 </tr>

diff --git a/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/List.html b/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/List.html
@@ -18,15 +18,16 @@ <h2>{f:translate(key: 'section.compare', default: 'Compare')}</h2>
                     <f:for each="{compareUserList}" as="compareUser">
                         <tr>
                             <td class="col-avatar">
-                                <a
-                                    href="#"
+                                <button
+                                    type="button"
+                                    class="btn btn-link p-0"
                                     data-contextmenu-trigger="click"
                                     data-contextmenu-table="be_users"
                                     data-contextmenu-uid="{compareUser.uid}"
                                     title="id={compareUser.uid}"
                                 >
                                     <backend:avatar backendUser="{compareUser.uid}" showIcon="TRUE" />
-                                </a>
+                                </button>
                             </td>
                             <td class="col-title">
                                 <backend:link.editRecord table="be_users" uid="{compareUser.uid}" title="edit">

diff --git a/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Online.html b/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Online.html
@@ -27,15 +27,16 @@ <h1><f:translate key="onlineUsers" /></h1>
                             <f:if condition="{it.isFirst}">
                                 <f:then>
                                     <td class="col-avatar">
-                                        <a
-                                            href="#"
+                                        <button
+                                            type="button"
+                                            class="btn btn-link p-0"
                                             data-contextmenu-trigger="click"
                                             data-contextmenu-table="be_users"
                                             data-contextmenu-uid="{onlineUser.backendUser.uid}"
                                             title="{f:if(condition: '{onlineUser.backendUser.description}', then: '{onlineUser.backendUser.description} ')}(id={onlineUser.backendUser.uid})"
                                         >
                                             <backend:avatar backendUser="{onlineUser.backendUser.uid}" showIcon="true" />
-                                        </a>
+                                        </button>
                                     </td>
                                     <td class="col-title">
                                         <b>{onlineUser.backendUser.userName}</b>

diff --git a/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Show.html b/typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Show.html
@@ -25,15 +25,16 @@ <h1><f:translate key="backendUser" />: {data.user.username} <code>[{data.user.ui
             <tr>
                 <th>{f:translate(key:'realName')}</th>
                 <td class="col-title">
-                    <a
-                        href="#"
+                    <button
+                        type="button"
+                        class="btn btn-link p-0"
                         data-contextmenu-trigger="click"
                         data-contextmenu-table="be_users"
                         data-contextmenu-uid="{data.user.uid}"
                         title="id={data.user.uid}"
                     >
                         <backend:avatar backendUser="{data.user.uid}" showIcon="true"/>
-                    </a>
+                    </button>
                     {data.user.realName}
                 </td>
             </tr>

diff --git a/typo3/sysext/beuser/Resources/Private/Templates/BackendUserGroup/List.html b/typo3/sysext/beuser/Resources/Private/Templates/BackendUserGroup/List.html
@@ -18,15 +18,16 @@ <h2>{f:translate(key: 'section.compare', default: 'Compare')}</h2>
                 <f:for each="{compareGroupList}" as="compareGroup">
                     <tr>
                         <td class="col-icon">
-                            <a
-                                href="#"
+                            <button
+                                type="button"
+                                class="btn btn-link p-0"
                                 data-contextmenu-trigger="click"
                                 data-contextmenu-table="be_usergroup"
                                 data-contextmenu-uid="{compareGroup.uid}"
                                 title="id={compareGroup.uid}"
                             >
                                 <core:iconForRecord table="be_groups" row="{compareGroup}"/>
-                            </a>
+                            </button>
                         </td>
                         <td class="col-title">
                             {compareGroup.title}

diff --git a/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php b/typo3/sysext/core/Tests/Acceptance/Application/Impexp/ExportCest.php
@@ -97,7 +97,7 @@ public function exportRecordDisplaysTitleOfRootPageInModuleHeader(ApplicationTes
         $rootPageTitle = 'New TYPO3 site';
         $recordPageTitle = 'elements t3editor';
         $recordTable = '#recordlist-tx_styleguide_elements_t3editor';
-        $recordIcon = 'tr:first-child a[data-contextmenu-trigger]';
+        $recordIcon = 'tr:first-child button[data-contextmenu-trigger]';
 
         $pageTree->openPath(['styleguide TCA demo']);
         $I->waitForElement($this->inPageTree . ' .node', 5);
@@ -245,7 +245,7 @@ public function exportRecord(ApplicationTester $I): void
         $rootPage = '#identifier-0_0 .node-name';
         $rootPageTitle = 'New TYPO3 site';
         $sysLanguageTable = '#recordlist-be_groups';
-        $sysLanguageIcon = 'tr:first-child a[data-contextmenu-trigger]';
+        $sysLanguageIcon = 'tr:first-child button[data-contextmenu-trigger]';
         $tabExport = 'a[href="#export-filepreset"]';
         $contentExport = '#export-filepreset';
         $buttonSaveToFile = 'tx_impexp[save_export]';