[TASK] Make pagetree toggle switch accessible via keyboard

This change makes the toggle button accessible via keyboard
and sets the focus manually, so that the pagetree can be toggled
via pressing space or enter on the keyboard.

Resolves: #102426
Releases: main, 12.4
Change-Id: I6916cf1f19de288e961ecb0dab85c76241097d33
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81817
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>

Build/Sources/TypeScript/backend/viewport/resizable-navigation.ts

@@ -74,23 +74,25 @@ export class ResizableNavigation extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="scaffold-content-navigation-switcher">
-        <button @mouseup="${this.toggleNavigation}" class="btn btn-default btn-borderless scaffold-content-navigation-switcher-btn scaffold-content-navigation-switcher-open" role="button" title="${lll('viewport_navigation_show')}">
+        <button @click="${this.toggleNavigation}" class="btn btn-default btn-borderless scaffold-content-navigation-switcher-btn scaffold-content-navigation-switcher-open" role="button" title="${lll('viewport_navigation_show')}">
           <typo3-backend-icon identifier="actions-chevron-right" size="small"></typo3-backend-icon>
         </button>
-        <button @mouseup="${this.toggleNavigation}" class="btn btn-default btn-borderless scaffold-content-navigation-switcher-btn scaffold-content-navigation-switcher-close" role="button" title="${lll('viewport_navigation_hide')}">
+        <button @click="${this.toggleNavigation}" class="btn btn-default btn-borderless scaffold-content-navigation-switcher-btn scaffold-content-navigation-switcher-close" role="button" title="${lll('viewport_navigation_hide')}">
           <typo3-backend-icon identifier="actions-chevron-left" size="small"></typo3-backend-icon>
         </button>
       </div>
       <div @mousedown="${this.startResizeNavigation}" class="scaffold-content-navigation-drag ${this.resizing ? 'resizing' : ''}"></div>
     `;
   }
 
-  private readonly toggleNavigation = (event: MouseEvent | TouchEvent) => {
-    if (event instanceof MouseEvent && event.button === 2) {
-      return;
-    }
+  private readonly toggleNavigation = (event: MouseEvent | TouchEvent | KeyboardEvent) => {
     event.stopPropagation();
     this.parentContainer.classList.toggle('scaffold-content-navigation-expanded');
+
+    if (event.currentTarget instanceof HTMLElement) {
+      const sibling = (event.currentTarget.nextElementSibling ?? event.currentTarget.previousElementSibling) as HTMLElement;
+      sibling.focus();
+    }
   };
 
   private readonly fallbackNavigationSizeIfNeeded = (event: UIEvent) => {