feat(app-switcher): add keyboard navigation (#DS-4246)

packages/components/app-switcher/app-switcher-dropdown-app.scss

@@ -9,7 +9,7 @@
     min-height: 50px;
 
     border-radius: var(--kbq-size-xs);
-    // base transparent border so the .cdk-keyboard-focused border-color renders a focus ring (matches list-item-base)
+    // transparent border to keep the box model aligned with the other list rows (matches kbq-list-item-base)
     border: var(--kbq-size-3xs) solid transparent;
 
     @include common.user-select(none);
@@ -59,12 +59,9 @@
         color: var(--kbq-list-default-text-color);
 
         &.kbq-dropdown-item_highlighted,
-        &:hover {
-            background: var(--kbq-states-background-transparent-active);
-        }
-
+        &:hover,
         &.cdk-keyboard-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
+            background: var(--kbq-states-background-transparent-active);
         }
 
         .kbq-app-switcher-dropdown-app__caption {

packages/components/app-switcher/app-switcher-dropdown-app.ts

@@ -46,7 +46,10 @@ import { KbqAppSwitcherApp } from './app-switcher';
     encapsulation: ViewEncapsulation.None,
     host: {
         class: 'kbq-app-switcher-dropdown-app',
-        '[class.kbq-dropdown-item]': 'false'
+        role: 'menuitem',
+        '[class.kbq-dropdown-item]': 'false',
+        '[attr.tabindex]': 'getTabIndex()',
+        '[attr.aria-haspopup]': "isNested ? 'menu' : null"
     },
     exportAs: 'kbqAppSwitcherDropdownApp'
 })

packages/components/app-switcher/app-switcher-dropdown-site.scss

@@ -33,12 +33,9 @@
         color: var(--kbq-list-default-text-color);
 
         &.kbq-dropdown-item_highlighted,
-        &:hover {
-            background: var(--kbq-states-background-transparent-active);
-        }
-
+        &:hover,
         &.cdk-keyboard-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
+            background: var(--kbq-states-background-transparent-active);
         }
     }
 }

packages/components/app-switcher/app-switcher-dropdown-site.ts

@@ -36,7 +36,10 @@ import { KbqAppSwitcherSite } from './app-switcher';
     encapsulation: ViewEncapsulation.None,
     host: {
         class: 'kbq-app-switcher-dropdown-site',
-        '[class.kbq-dropdown-item]': 'false'
+        role: 'menuitem',
+        '[class.kbq-dropdown-item]': 'false',
+        '[attr.tabindex]': 'getTabIndex()',
+        '[attr.aria-haspopup]': "isNested ? 'menu' : null"
     },
     exportAs: 'kbqAppSwitcherDropdownSite'
 })

packages/components/app-switcher/app-switcher.en.md

@@ -22,3 +22,18 @@ When the system has multiple platforms, the applications of the selected platfor
 Search appears when more than 7 applications are available. Results are displayed as a flat list.
 
 <!-- example(app-switcher-sites) -->
+
+### Keyboard navigation
+
+The list of applications can be operated entirely from the keyboard.
+
+| <div style="min-width: 270px;">Key</div>                                                        | Action                                                                         |
+| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| <span class="docs-hot-key-button">↑</span> / <span class="docs-hot-key-button">↓</span>         | Move focus to the previous/next item.                                          |
+| <span class="docs-hot-key-button">Home</span> / <span class="docs-hot-key-button">End</span>    | Move focus to the first/last item.                                             |
+| <span class="docs-hot-key-button">→</span>                                                      | Expand an application group, or open the flyout of another platform.           |
+| <span class="docs-hot-key-button">←</span>                                                      | Collapse a group, move from an alias to its group, or close a platform flyout. |
+| <span class="docs-hot-key-button">Enter</span> / <span class="docs-hot-key-button">Space</span> | Open the focused application, or expand/collapse a group.                      |
+| <span class="docs-hot-key-button">Esc</span>                                                    | Close the switcher.                                                            |
+
+Typing the first letters of an item jumps to it. When search is available, <span class="docs-hot-key-button">↓</span> moves focus from the search field into the list, and <span class="docs-hot-key-button">↑</span> on the first item returns focus to the search field.

packages/components/app-switcher/app-switcher.html

@@ -7,7 +7,6 @@
                 autocomplete="off"
                 kbqInput
                 [formControl]="searchControl"
-                (keydown.escape)="escapeHandler()"
             />
             <kbq-cleaner />
         </kbq-form-field>
@@ -16,7 +15,7 @@
     <kbq-divider />
 }
 
-<div kbq-scrollbar>
+<div kbq-scrollbar role="menu" aria-orientation="vertical">
     @if (!searchControl.getRawValue()) {
         <div class="kbq-app-switcher__app-container" (mouseenter)="otherSites()?.close()">
             @if (trigger.sitesMode) {
@@ -53,8 +52,8 @@
                                 @for (alias of app.aliases; track alias) {
                                     <a
                                         href="{{ alias.link }}"
-                                        class="kbq-app-switcher-site_nested"
                                         kbq-app-switcher-list-item
+                                        [class]="nestedAliasClass"
                                         [class.kbq-selected]="alias.id === trigger.selectedApp?.id"
                                         [app]="alias"
                                     ></a>
@@ -79,10 +78,13 @@
                         @for (site of trigger.sites; track site) {
                             @if (site.id !== trigger.selectedSite?.id) {
                                 <div
+                                    #siteFlyoutTrigger="kbqDropdownTrigger"
                                     [kbq-app-switcher-dropdown-site]="site"
                                     [kbqDropdownTriggerFor]="dropdownWithSelectedSite"
                                     [offsetX]="0"
+                                    [attr.aria-expanded]="siteFlyoutTrigger.opened"
                                     (mouseenter)="activeSite = site"
+                                    (focus)="activeSite = site"
                                 ></div>
                             }
                         }
@@ -99,7 +101,9 @@
                             [kbqDropdownTriggerFor]="dropdownWithGroupedApps"
                             [offsetX]="0"
                             [class.kbq-pressed]="dropdownWithGroupedAppsTrigger.opened"
+                            [attr.aria-expanded]="dropdownWithGroupedAppsTrigger.opened"
                             (mouseenter)="activeApp = app"
+                            (focus)="activeApp = app"
                         ></div>
                     } @else {
                         <a

packages/components/app-switcher/app-switcher.ru.md

@@ -22,3 +22,18 @@ npm install overlayscrollbars@2.7.3
 Поиск появляется, если доступно больше 7 приложений. Результаты представлены в виде плоского списка.
 
 <!-- example(app-switcher-sites) -->
+
+### Управление с клавиатуры
+
+Список приложений полностью доступен для управления с клавиатуры.
+
+| <div style="min-width: 270px;">Клавиша</div>                                                    | Действие                                                                      |
+| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| <span class="docs-hot-key-button">↑</span> / <span class="docs-hot-key-button">↓</span>         | Переместить фокус на предыдущий/следующий элемент.                            |
+| <span class="docs-hot-key-button">Home</span> / <span class="docs-hot-key-button">End</span>    | Переместить фокус на первый/последний элемент.                                |
+| <span class="docs-hot-key-button">→</span>                                                      | Развернуть группу приложений или открыть подменю другой площадки.             |
+| <span class="docs-hot-key-button">←</span>                                                      | Свернуть группу, перейти от алиаса к его группе или закрыть подменю площадки. |
+| <span class="docs-hot-key-button">Enter</span> / <span class="docs-hot-key-button">Space</span> | Открыть приложение в фокусе или развернуть/свернуть группу.                   |
+| <span class="docs-hot-key-button">Esc</span>                                                    | Закрыть переключатель.                                                        |
+
+Ввод первых букв названия переходит к соответствующему элементу. Когда доступен поиск, <span class="docs-hot-key-button">↓</span> перемещает фокус из поля поиска в список, а <span class="docs-hot-key-button">↑</span> на первом элементе возвращает фокус в поле поиска.