[BUGFIX] Avoid unnecessary nesting in typo3-backend-switch-user

The web component should behave like a button, there is no need to have another button nested inside. Resolves: #100513 Releases: main Change-Id: I9ff0f64f751cdbe5968788515cff324777957dbc Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/78521 Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de> Tested-by: core-ci <typo3@b13.com> Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch> Reviewed-by: Oliver Bartsch <bo@cedev.de> Tested-by: Christian Kuhn <lolli@schwarzbu.ch> Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de> Tested-by: Oliver Bartsch <bo@cedev.de>
TYPO3 · Apr 6, 2023 · 216607b · 216607b
1 parent 918d0b4
commit 216607b
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 64 deletions.
diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss
@@ -57,7 +57,6 @@
 @import "component/recordlist";
 @import "component/resources";
 @import "component/recordsearchbox";
-@import "component/switchuser";
 
 //
 // Elements

diff --git a/Build/Sources/Sass/component/_switchuser.scss b/Build/Sources/Sass/component/_switchuser.scss
diff --git a/Build/Sources/TypeScript/backend/switch-user.ts b/Build/Sources/TypeScript/backend/switch-user.ts
@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { html, TemplateResult, LitElement } from 'lit';
+import { html, css, TemplateResult, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
@@ -26,25 +26,46 @@ enum Modes {
  * Module: @typo3/backend/switch-user
  *
  * @example
- * <typo3-switch-user targetUser="123" mode="switch">
- *   <button>Switch user</button>
+ * <typo3-switch-user class="some" targetUser="123" mode="switch">
+ *   Switch user
  * </typo3-switch-user>
  */
 @customElement('typo3-backend-switch-user')
 export class SwitchUser extends LitElement {
+  static styles = [css`:host { cursor: pointer; appearance: button; }`];
+
   @property({ type: String }) targetUser: string;
   @property({ type: Modes }) mode: Modes = Modes.switch;
 
   public constructor() {
     super();
-    this.addEventListener('click', (e: Event): void => {
-      e.preventDefault();
+    this.addEventListener('click', (event: Event): void => {
+      event.preventDefault();
       if (this.mode === Modes.switch) {
         this.handleSwitchUser();
       } else if (this.mode === Modes.exit) {
         this.handleExitSwitchUser();
       }
     });
+    this.addEventListener('keydown', (event: KeyboardEvent): void => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        if (this.mode === Modes.switch) {
+          this.handleSwitchUser();
+        } else if (this.mode === Modes.exit) {
+          this.handleExitSwitchUser();
+        }
+      }
+    });
+  }
+
+  public connectedCallback(): void {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button');
+    }
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
   }
 
   protected render(): TemplateResult {

diff --git a/typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/UserToolbarItemDropDown.html b/typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/UserToolbarItemDropDown.html
@@ -39,21 +39,20 @@ <h3 class="dropdown-headline"><f:translate key="LLL:EXT:backend/Resources/Privat
     <ul class="modulemenu-group-container">
         <f:for each="{recentUsers}" as="user">
             <li>
-                <typo3-backend-switch-user mode="switch" targetUser="{user.uid}">
-                    <button
-                        type="button"
-                        class="dropdown-item"
-                        title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:usermodule.su.tooltip', arguments: '{0: user.username}')}"
-                    >
-                        <span class="dropdown-item-columns">
-                            <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
-                                <be:avatar backendUser="{user.uid}" size="16" />
-                            </span>
-                            <span class="dropdown-item-column dropdown-item-column-title">
-                                    {f:if(condition: user.realName, then: user.realName, else: user.username)}
-                            </span>
+                <typo3-backend-switch-user
+                    class="dropdown-item"
+                    mode="switch"
+                    targetUser="{user.uid}"
+                    title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:usermodule.su.tooltip', arguments: '{0: user.username}')}"
+                >
+                    <span class="dropdown-item-columns">
+                        <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                            <be:avatar backendUser="{user.uid}" size="16" />
                         </span>
-                    </button>
+                        <span class="dropdown-item-column dropdown-item-column-title">
+                                {f:if(condition: user.realName, then: user.realName, else: user.username)}
+                        </span>
+                    </span>
                 </typo3-backend-switch-user>
             </li>
         </f:for>
@@ -62,17 +61,17 @@ <h3 class="dropdown-headline"><f:translate key="LLL:EXT:backend/Resources/Privat
 </f:if>
 <f:if condition="{switchUserMode}">
     <f:then>
-        <typo3-backend-switch-user mode="exit">
-            <button type="button" class="dropdown-item">
-                <span class="dropdown-item-columns">
-                    <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
-                        <core:icon identifier="actions-logout" size="small" alternativeMarkupIdentifier="inline"/>
-                    </span>
-                    <span class="dropdown-item-column dropdown-item-column-title">
-                        {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:buttons.exitSwitchUser')}
-                    </span>
+        <typo3-backend-switch-user
+            class="dropdown-item"
+            mode="exit">
+            <span class="dropdown-item-columns">
+                <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                    <core:icon identifier="actions-logout" size="small" alternativeMarkupIdentifier="inline"/>
                 </span>
-            </button>
+                <span class="dropdown-item-column dropdown-item-column-title">
+                    {f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:buttons.exitSwitchUser')}
+                </span>
+            </span>
         </typo3-backend-switch-user>
     </f:then>
     <f:else>

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/switch-user.js b/typo3/sysext/backend/Resources/Public/JavaScript/switch-user.js
diff --git a/typo3/sysext/beuser/Classes/ViewHelpers/SwitchUserViewHelper.php b/typo3/sysext/beuser/Classes/ViewHelpers/SwitchUserViewHelper.php
@@ -23,39 +23,30 @@
 use TYPO3\CMS\Core\Imaging\IconFactory;
 use TYPO3\CMS\Core\Localization\LanguageService;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
-use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
-use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
-use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithRenderStatic;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper;
 
 /**
  * Displays 'SwitchUser' button to change current backend user to target backend user.
  *
  * @internal
  */
-final class SwitchUserViewHelper extends AbstractViewHelper
+final class SwitchUserViewHelper extends AbstractTagBasedViewHelper
 {
-    use CompileWithRenderStatic;
-
     /**
-     * As this ViewHelper renders HTML, the output must not be escaped.
-     *
-     * @var bool
+     * @var string
      */
-    protected $escapeOutput = false;
+    protected $tagName = 'typo3-backend-switch-user';
 
     public function initializeArguments(): void
     {
+        parent::initializeArguments();
         $this->registerArgument('backendUser', BackendUser::class, 'Target backendUser to switch active session to', true);
+        $this->registerUniversalTagAttributes();
     }
 
-    /**
-     * Render link with sprite icon to change current backend user to target
-     *
-     * @param array{backendUser: BackendUser} $arguments
-     */
-    public static function renderStatic(array $arguments, \Closure $renderChildrenClosure, RenderingContextInterface $renderingContext): string
+    public function render(): string
     {
-        $targetUser = $arguments['backendUser'];
+        $targetUser = $this->arguments['backendUser'];
         $currentUser = self::getBackendUserAuthentication();
         $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
 
@@ -64,15 +55,18 @@ public static function renderStatic(array $arguments, \Closure $renderChildrenCl
             || !$currentUser->isAdmin()
             || $currentUser->getOriginalUserIdWhenInSwitchUserMode() !== null
         ) {
-            return '<span class="btn btn-default disabled">' . $iconFactory->getIcon('empty-empty', Icon::SIZE_SMALL)->render() . '</span>';
+            $this->tag->setTagName('span');
+            $this->tag->addAttribute('class', $this->tag->getAttribute('class') . ' disabled');
+            $this->tag->addAttribute('disabled', 'disabled');
+            $this->tag->setContent($iconFactory->getIcon('empty-empty', Icon::SIZE_SMALL)->render());
+        } else {
+            $this->tag->addAttribute('title', self::getLanguageService()->sL('LLL:EXT:beuser/Resources/Private/Language/locallang.xlf:switchBackMode'));
+            $this->tag->addAttribute('targetUser', (string)$targetUser->getUid());
+            $this->tag->setContent($iconFactory->getIcon('actions-system-backend-user-switch', Icon::SIZE_SMALL)->render());
         }
 
-        return '
-            <typo3-backend-switch-user targetUser="' . htmlspecialchars((string)$targetUser->getUid()) . '">
-                <button type="button" class="btn btn-default" title="' . htmlspecialchars(self::getLanguageService()->sL('LLL:EXT:beuser/Resources/Private/Language/locallang.xlf:switchBackMode')) . '">'
-                    . $iconFactory->getIcon('actions-system-backend-user-switch', Icon::SIZE_SMALL)->render() .
-                '</button>
-            </typo3-switch-user-button>';
+        $this->tag->forceClosingTag(true);
+        return $this->tag->render();
     }
 
     protected static function getBackendUserAuthentication(): BackendUserAuthentication

diff --git a/typo3/sysext/beuser/Resources/Private/Partials/BackendUser/IndexListRow.html b/typo3/sysext/beuser/Resources/Private/Partials/BackendUser/IndexListRow.html
@@ -121,7 +121,7 @@
                     </f:link.action>
                 </f:else>
             </f:if>
-            <bu:SwitchUser backendUser="{backendUser}" />
+            <bu:SwitchUser class="btn btn-default" backendUser="{backendUser}" />
         </div>
     </td>
 </tr>