Merge branch 'develop' into 3732-preburner-missing-space-between-togg…

…le-and-its-slotted-content-when-slotend-in-item

apps/cookbook/src/app/examples/menu-example/examples/advanced.ts

@@ -3,10 +3,29 @@ import { Component } from '@angular/core';
 const config = {
   selector: 'cookbook-menu-advanced-example',
   template: `<kirby-menu [closeOnSelect]="false">
-  <kirby-item (click)="actionClicked()">
+  <kirby-item>
+    <kirby-icon name="person" slot="start"></kirby-icon>
+    <kirby-checkbox slot="end">
+      <kirby-label>      
+        Friend Throw
+      </kirby-label>
+    </kirby-checkbox>
+  </kirby-item>
+  <kirby-item>
     <kirby-icon name="notification" slot="start"></kirby-icon>
-    <p class="kirby-item-title">Title</p>
-    <kirby-toggle slot="end" checked="true" (checkedChange)="toggled()"></kirby-toggle>
+    <kirby-checkbox slot="end">
+      <kirby-label>      
+        Ice Curling
+      </kirby-label>
+    </kirby-checkbox>
+  </kirby-item>
+  <kirby-item>
+    <kirby-icon name="default" slot="start"></kirby-icon>
+    <kirby-toggle slot="end">
+      <kirby-label>      
+        Allow Cheats
+      </kirby-label>
+    </kirby-toggle>
   </kirby-item>
 </kirby-menu>`,
 };
@@ -17,12 +36,4 @@ const config = {
 })
 export class MenuAdvancedExampleComponent {
   template: string = config.template;
-
-  public actionClicked(): void {
-    console.log('Action clicked');
-  }
-
-  public toggled(): void {
-    console.log('Toggle changed');
-  }
 }

apps/cookbook/src/app/examples/menu-example/examples/customButton.ts

@@ -11,7 +11,13 @@ const config = {
     <kirby-icon [name]="'menu-outline'"></kirby-icon>
   </button>
   <kirby-item>
-    <p class="kirby-item-title">Action 1</p>
+    <p class="kirby-item-title">Stone</p>
+  </kirby-item>
+  <kirby-item>
+    <p class="kirby-item-title">Rick</p>
+  </kirby-item>
+  <kirby-item>
+    <p class="kirby-item-title">Gooey</p>
   </kirby-item>
 </kirby-menu>`,
 };
@@ -22,12 +28,4 @@ const config = {
 })
 export class MenuCustomButtonExampleComponent {
   template: string = config.template;
-
-  public actionClicked(): void {
-    console.log('Action clicked');
-  }
-
-  public toggled(): void {
-    console.log('Toggle changed');
-  }
 }

apps/cookbook/src/app/examples/menu-example/examples/customPlacement.ts

@@ -4,9 +4,14 @@ const config = {
   selector: 'cookbook-menu-custom-placement-example',
   template: `<kirby-menu [placement]="'bottom-end'">
   <kirby-item>
-    <p class="kirby-item-title">Action 1</p>
+    <p class="kirby-item-title">Stone</p>
+  </kirby-item>
+  <kirby-item>
+    <p class="kirby-item-title">Rick</p>
+  </kirby-item>
+  <kirby-item>
+    <p class="kirby-item-title">Gooey</p>
   </kirby-item>
-  ...
 </kirby-menu>`,
 };
 

apps/cookbook/src/app/examples/menu-example/examples/portal.ts

@@ -5,11 +5,14 @@ const config = {
   template: `<kirby-menu 
   [DOMPortalOutlet]="_outlet"
   >
-  <kirby-item [selectable]="true">
-    <p class="kirby-item-title">Action 1</p>
+  <kirby-item>
+    <p class="kirby-item-title">Stone</p>
   </kirby-item>
-  <kirby-item [selectable]="true">
-    <p class="kirby-item-title">Action 2</p>
+  <kirby-item>
+    <p class="kirby-item-title">Rick</p>
+  </kirby-item>
+  <kirby-item>
+    <p class="kirby-item-title">Gooey</p>
   </kirby-item>
 </kirby-menu>
 `,

apps/cookbook/src/app/examples/menu-example/examples/portalConfig.ts

@@ -4,11 +4,14 @@ import { OutletSelector, PortalOutletConfig } from '@kirbydesign/designsystem/sh
 const config = {
   selector: 'cookbook-menu-portal-config-example',
   template: `<kirby-menu [portalOutletConfig]="outletConfig">
-  <kirby-item [selectable]="true">
-    <p class="kirby-item-title">Action 1</p>
+  <kirby-item>
+    <p class="kirby-item-title">Stone</p>
   </kirby-item>
-  <kirby-item [selectable]="true">
-    <p class="kirby-item-title">Action 2</p>
+  <kirby-item>
+    <p class="kirby-item-title">Rick</p>
+  </kirby-item>
+  <kirby-item>
+    <p class="kirby-item-title">Gooey</p>
   </kirby-item>
 </kirby-menu>`,
   codeSnippet: `public outletConfig: PortalOutletConfig = {

apps/cookbook/src/app/examples/menu-example/examples/selectable.ts

@@ -4,11 +4,14 @@ import { ToastConfig, ToastController } from '@kirbydesign/designsystem/toast';
 const config = {
   selector: 'cookbook-menu-selectable-example',
   template: `<kirby-menu>
-  <kirby-item [selectable]="true" (click)="actionClicked('Action 1')">
-    <p class="kirby-item-title">Action 1</p>
+  <kirby-item (click)="actionClicked('Stone')">
+    <p class="kirby-item-title">Stone</p>
   </kirby-item>
-  <kirby-item [selectable]="true" (click)="actionClicked('Action 2')">
-    <p class="kirby-item-title">Action 2</p>
+  <kirby-item (click)="actionClicked('Rick')">
+    <p class="kirby-item-title">Rick</p>
+  </kirby-item>
+  <kirby-item (click)="actionClicked('Gooey')">
+    <p class="kirby-item-title">Gooey</p>
   </kirby-item>
 </kirby-menu>`,
 };
@@ -22,9 +25,9 @@ export class MenuSelectableExampleComponent {
 
   constructor(private toastController: ToastController) {}
 
-  actionClicked(action: string) {
+  actionClicked(hero: string) {
     const config: ToastConfig = {
-      message: `${action} was selected.`,
+      message: `${hero} was selected as your Hero.`,
       messageType: 'success',
       durationInMs: 1500,
     };

apps/cookbook/src/app/examples/menu-example/menu-example.component.html

@@ -1,6 +1,4 @@
 <h1>Menu</h1>
-<h2>Simple</h2>
-<cookbook-menu-default-example></cookbook-menu-default-example>
 <h2>Selectable items</h2>
 <cookbook-menu-selectable-example></cookbook-menu-selectable-example>
 <h2>Advanced item</h2>

apps/cookbook/src/app/examples/menu-example/menu-example.module.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { KirbyModule } from '@kirbydesign/designsystem';
-import { MenuDefaultExampleComponent } from './examples/default';
 import { MenuAdvancedExampleComponent } from './examples/advanced';
 import { MenuSelectableExampleComponent } from './examples/selectable';
 import { PortalInListWrapperComponent as MenuPortalInListWrapperComponent } from './examples/portal-in-list-wrapper';
@@ -13,7 +12,6 @@ import { MenuPortalConfigExampleComponent } from '~/app/examples/menu-example/ex
 
 const COMPONENT_DECLARATIONS = [
   MenuPortalInListWrapperComponent,
-  MenuDefaultExampleComponent,
   MenuAdvancedExampleComponent,
   MenuSelectableExampleComponent,
   MenuCustomButtonExampleComponent,

apps/cookbook/src/app/showcase/menu-showcase/menu-showcase.component.html

@@ -26,15 +26,6 @@
   </p>
 </div>
 <h2>Examples</h2>
-<h3>Basic</h3>
-<div class="page-example">
-  <div>
-    <cookbook-example-viewer [html]="menuDefaultExample.template">
-      <cookbook-menu-default-example #menuDefaultExample></cookbook-menu-default-example>
-    </cookbook-example-viewer>
-  </div>
-</div>
-
 <h3>Selectable items</h3>
 <p>This example demonstrates how to set custom actions on the elements in the menu.</p>
 <div class="page-example">
@@ -48,7 +39,7 @@ <h3>Selectable items</h3>
 <h3>Advanced items</h3>
 <p>
   Since the Menu accepts Items, it is possible to customize these. The example below demonstrates
-  how to add a toggle to an Item in the list.
+  how to add a checkbox and a toggle to an Item in the list.
 </p>
 <p>
   <em>
@@ -275,6 +266,72 @@ <h3>
   </div>
 </div>
 
+<h2>Accessibility</h2>
+<p>
+  The Menu implements the
+  <a
+    class="kirby-external-icon"
+    target="_blank"
+    href="https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"
+  >
+    Menu Button Pattern
+  </a>
+  and the
+  <a
+    class="kirby-external-icon"
+    target="_blank"
+    href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/"
+  >
+    Menu and Menubar Pattern
+  </a>
+  from ARIA Authoring Practices Guide.
+</p>
+<h3>Keyboard support</h3>
+<p>
+  The component has full keyboard support for opening the menu and navigating between and selecting
+  items in the menu.
+</p>
+<p>The following keys can be used to open the menu when the menu button has focus:</p>
+<!-- prettier-ignore -->
+<ul>
+  <li>
+    <kbd>Enter</kbd>, <kbd>Space</kbd> and <kbd>&#8595;</kbd> opens menu and moves focus to first menu item.
+  </li>
+  <li>
+    <kbd>&#8593;</kbd> opens menu and moves focus to last menu item.
+  </li>
+</ul>
+<p>The following keys can be used to navigate and select within the menu:</p>
+<!-- prettier-ignore -->
+<ul>
+  <li>
+    <kbd>Enter</kbd> and <kbd>Space</kbd> activates the menu item and closes the menu.
+  </li>
+  <li>
+    <kbd>Escape</kbd> closes the menu.
+  </li>
+  <li>
+    <kbd>&#8593;</kbd> moves focus to the previous menu item. If focus is on the first menu item, moves focus to the last menu item.
+  </li>
+  <li>
+    <kbd>&#8595;</kbd> moves focus to the next menu item. If focus is on the last menu item, moves focus to the first menu item.
+  </li>
+  <li>
+    <kbd>Home</kbd> moves focus to the first menu item.
+  </li>
+  <li>
+    <kbd>End</kbd> moves focus to the last menu item.
+  </li>
+  <li>
+    <kbd>A</kbd>-<kbd>Z</kbd> moves focus to the next menu item whose label starts with the typed character.
+  </li>
+  <li>
+    <kbd>Tab</kbd> closes the menu and moves focus to the next element in the tab sequence outside the control.
+  </li>
+</ul>
+
+<kirby-divider [hasMargin]="true"></kirby-divider>
+
 <h2>Properties:</h2>
 <cookbook-api-description-properties
   [properties]="properties"

apps/cookbook/src/app/showcase/menu-showcase/menu-showcase.component.scss

@@ -1,18 +1 @@
-@use '@kirbydesign/core/src/scss/utils';
-
-h2:not(:first-child) {
-  margin-top: utils.size('l');
-}
-
-cookbook-example-viewer > *:first-child {
-  display: block;
-  margin-bottom: utils.size('s');
-  max-width: 550px;
-}
-
-.page-example {
-  display: flex;
-  justify-content: space-between;
-  margin-top: utils.size('xl');
-  margin-bottom: utils.size('xl');
-}
+@use '../showcase.shared';

libs/designsystem/item/src/item.component.scss

@@ -141,6 +141,7 @@ ion-item {
 }
 
 :host-context(kirby-dropdown) ion-item,
+:host-context(kirby-menu) ion-item,
 :host-context(kirby-popover) ion-item {
   --min-height: #{utils.$dropdown-item-height};
 }

libs/designsystem/menu/src/menu.component.html

@@ -2,18 +2,23 @@
   <ng-content select="button[kirby-button]"></ng-content>
   <ng-container *ngIf="!userProvidedButton">
     <button
+      #defaultButton
+      [id]="triggerButtonId"
       kirby-button
       [size]="buttonSize"
       [disabled]="isDisabled"
       type="button"
       [attentionLevel]="attentionLevel"
-      #defaultButton
+      aria-haspopup="true"
+      [attr.aria-controls]="menuId"
+      aria-expanded="false"
     >
       <kirby-icon [name]="'more'"></kirby-icon>
     </button>
   </ng-container>
 </div>
 <kirby-card
+  [id]="menuId"
   kirbyFloating
   [strategy]="'fixed'"
   [reference]="buttonContainerElement"
@@ -27,10 +32,12 @@
   [closeOnSelect]="closeOnSelect"
   [autoPlacement]="autoPlacement"
   [shift]="shift"
-  [ngStyle]="{
-    minWidth: minWidth ? minWidth + 'px' : null
-  }"
+  [style.minWidth]="minWidth ? minWidth + 'px' : null"
   class="menu-popover"
+  (keydown)="_onKeydown($event)"
+  (displayChanged)="menuVisibilityChanged($event)"
+  role="menu"
+  [attr.aria-labelledby]="triggerButtonId"
 >
   <ng-content select="kirby-item"></ng-content>
 </kirby-card>