fix: (platform) Menu button Accessibility fix and Documentation chang…

…es. (SAP#2633) * fix:menu button style fix and docs fix * fix:tests prettify, master rebase * fix:ari-expanded removed * fix:review implementation * docs:review comments * docs:review comments
katekozlowska · Jun 29, 2020 · 630835e · 630835e
1 parent 82bf732
commit 630835e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 28 deletions.
diff --git a/...app/platform/component-docs/platform-menu-button/platform-menu-button-docs.component.html b/...app/platform/component-docs/platform-menu-button/platform-menu-button-docs.component.html
@@ -1,20 +1,25 @@
-<fd-docs-section-title [id]="'def'" [componentName]="'MenuButtonComponent'">
-    Menu Button Examples
+<fd-docs-section-title [id]="'def1'" [componentName]="'MenuButtonComponent'">
+    Cozy Menu Button States
 </fd-docs-section-title>
-
-<description>This example shows cozy MenuButton implementaion. </description>
+<description>This example shows cozy MenuButton states. </description>
 <component-example>
     <fdp-platform-menu-button-cozy-example></fdp-platform-menu-button-cozy-example>
 </component-example>
 <code-example [exampleFiles]="cozyMenuButton"></code-example>
 
-<description>This example shows compact MenuButton implementaion </description>
+<fd-docs-section-title [id]="'def2'" [componentName]="'MenuButtonComponent'">
+    Compact Menu Button States
+</fd-docs-section-title>
+<description>This example shows compact MenuButton states </description>
 <component-example>
     <fdp-platform-menu-button-compact-example></fdp-platform-menu-button-compact-example>
 </component-example>
 <code-example [exampleFiles]="compactMenuButton"></code-example>
 
-<description>This example shows MenuButton implementaion </description>
+<fd-docs-section-title [id]="'def3'" [componentName]="'MenuButtonComponent'">
+    Types of Menu Button
+</fd-docs-section-title>
+<description>This example shows different MenuButton implementaion </description>
 <component-example>
     <fdp-platform-menu-button-example></fdp-platform-menu-button-example>
 </component-example>

diff --git a/...atform-menu-button/platform-menu-button-header/platform-menu-button-header.component.html b/...atform-menu-button/platform-menu-button-header/platform-menu-button-header.component.html
@@ -1,10 +1,28 @@
 <header>Menu Button</header>
 <description>
-    Menu Button works as Dropdown.
+    The menu button is used for triggering the display of a menu.<br />
+    In <a [routerLink]="'/core'">@fundamental-ngx/core</a>, it is an extenstion of
+    <a [routerLink]="'/core/button'">@fundamental-ngx/button</a> directive, but in Platform this is a separate component
+    and it reduces the complexity to create Menu Button.
     <br />
-    It selects from Menu whichs appears on Menu button click.
+    <br />
+
+    <import module="PlatformMenuButtonModule"></import>
+    <br />
+
+    <h3>Platform specific enhancements:</h3>
+    <ul>
+        <li>Menu Button wrapped up as a component.</li>
+        <li>
+            This component is used in conjunction with the
+            <a [routerLink]="'/platform/menu'">Platform Menu Trigger</a>.
+        </li>
+        <li>
+            Menu management is made easy by abstracting the menu definition and linking it with
+            <a [routerLink]="'/platform/menu'">Menu Trigger</a>.
+        </li>
+    </ul>
 </description>
-<import module="PlatformMenuButtonModule"></import>
 
 <fd-header-tabs></fd-header-tabs>
 <router-outlet></router-outlet>
diff --git a/libs/platform/src/lib/components/menu-button/menu-button.component.html b/libs/platform/src/lib/components/menu-button/menu-button.component.html
@@ -8,8 +8,8 @@
     [disabled]="disabled"
     (click)="onButtonClick($event)"
     [fdType]="type"
+    tabindex="0"
+    [attr.title]="title"
 >
-    <span [ngStyle]="{ width: width }" (click)="onLabelClick($event)">
-        <ng-content></ng-content>
-    </span>
+    <ng-content></ng-content>
 </button>
diff --git a/libs/platform/src/lib/components/menu-button/menu-button.component.spec.ts b/libs/platform/src/lib/components/menu-button/menu-button.component.spec.ts
@@ -16,7 +16,7 @@ describe('MenuButtonComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [ButtonModule, PlatformMenuModule, IconModule],
-            declarations: [MenuButtonComponent],
+            declarations: [MenuButtonComponent]
         }).compileComponents();
     }));
 
@@ -44,7 +44,7 @@ describe('MenuButtonComponent', () => {
         <fdp-menu-button [contentDensity]="size" [disabled]="disabled" [type]="type">
             Standard Button with long text
         </fdp-menu-button>
-    `,
+    `
 })
 class DisabledMenuButtonComponent {
     @Input()
@@ -66,7 +66,7 @@ describe('Menu Button Disabled test and Type, size test', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [ButtonModule, PlatformMenuModule, IconModule],
-            declarations: [DisabledMenuButtonComponent, MenuButtonComponent],
+            declarations: [DisabledMenuButtonComponent, MenuButtonComponent]
         }).compileComponents();
     }));
 
@@ -113,7 +113,7 @@ describe('Menu Button Disabled test and Type, size test', () => {
             <fdp-menu-item (itemSelect)="onItemSelect('Second Item')">Second Item</fdp-menu-item>
             <fdp-menu-item (itemSelect)="onItemSelect('Third Item')">Third Item</fdp-menu-item>
         </fdp-menu>
-    `,
+    `
 })
 class TestMenuButtonComponent {
     @Input()
@@ -154,7 +154,7 @@ describe('Menu Button click on Item select', () => {
         TestBed.configureTestingModule({
             imports: [ButtonModule, PlatformMenuModule, IconModule],
             declarations: [TestMenuButtonComponent, MenuButtonComponent],
-            providers: [RtlService],
+            providers: [RtlService]
         }).compileComponents();
 
         inject([OverlayContainer], (overlayContainer: OverlayContainer) => {

diff --git a/libs/platform/src/lib/components/menu-button/menu-button.component.ts b/libs/platform/src/lib/components/menu-button/menu-button.component.ts
@@ -1,13 +1,27 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import {
+    Component,
+    Input,
+    Output,
+    EventEmitter,
+    ChangeDetectorRef,
+    ChangeDetectionStrategy,
+    ViewEncapsulation
+} from '@angular/core';
 import { ButtonType } from '@fundamental-ngx/core';
 import { BaseComponent } from '../base';
 
 @Component({
     selector: 'fdp-menu-button',
     templateUrl: './menu-button.component.html',
     styleUrls: ['./menu-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class MenuButtonComponent extends BaseComponent {
+    /** text for tooltip */
+    @Input()
+    title: string;
+
     /** The Sap-icon to include in the menu-button */
     @Input()
     icon: string;
@@ -29,15 +43,6 @@ export class MenuButtonComponent extends BaseComponent {
      *  Handles menu-button click
      */
     public onButtonClick($event: any) {
-        this.buttonClicked.emit();
-    }
-
-    /**
-     * Stopping click event from label on disbled status
-     */
-    public onLabelClick($event: any) {
-        if (this.disabled) {
-            event.stopPropagation();
-        }
+        this.buttonClicked.emit($event);
     }
 }