diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss index 22c69d9ec0cf..dbd9ca607ee9 100644 --- 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 deleted file mode 100644 index 5483e3d92372..000000000000 --- a/Build/Sources/Sass/component/_switchuser.scss +++ /dev/null @@ -1,7 +0,0 @@ -// -// Switch User -// -.btn-group typo3-backend-switch-user .btn { - margin-left: -1px; - display: initial; -} diff --git a/Build/Sources/TypeScript/backend/switch-user.ts b/Build/Sources/TypeScript/backend/switch-user.ts index 612710614abc..207242fb9032 100644 --- 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 - * - * + * + * 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 index bc7451d4525a..f477a588e4be 100644 --- a/typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/UserToolbarItemDropDown.html +++ b/typo3/sysext/backend/Resources/Private/Templates/ToolbarItems/UserToolbarItemDropDown.html @@ -39,21 +39,20 @@