fix: (platform) fix for menu position in menu button (#3231)

* fix:defect hunting issue fixed * fix:removed unnecessary formatting
SAP · Sep 14, 2020 · 52e1377 · 52e1377
1 parent 3376499
commit 52e1377
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 16 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
@@ -19,7 +19,7 @@
 <fd-docs-section-title [id]="'def3'" [componentName]="'MenuButtonComponent'">
     Types of Menu Button
 </fd-docs-section-title>
-<description>This example shows different MenuButton implementaion </description>
+<description>This example shows different MenuButton implementation </description>
 <component-example>
     <fdp-platform-menu-button-example></fdp-platform-menu-button-example>
 </component-example>

diff --git a/...-button/platform-menu-button-examples/platform-menu-button-compact-example.component.html b/...-button/platform-menu-button-examples/platform-menu-button-compact-example.component.html
@@ -15,6 +15,7 @@
     [icon]="'world'"
     [disabled]="false"
     [type]="'emphasized'"
+    title="This is a compact emphasized menu button"
     [fdpMenuTriggerFor]="basicMenu"
 >
     Emphasized Button

diff --git a/...enu-button/platform-menu-button-examples/platform-menu-button-cozy-example.component.html b/...enu-button/platform-menu-button-examples/platform-menu-button-cozy-example.component.html
@@ -15,6 +15,7 @@
     [icon]="'world'"
     [disabled]="false"
     [type]="'emphasized'"
+    title="This is a emphasized menu button"
     [fdpMenuTriggerFor]="basicMenu"
 >
     Emphasized Button

diff --git a/...orm-menu-button/platform-menu-button-examples/platform-menu-button-example.component.html b/...orm-menu-button/platform-menu-button-examples/platform-menu-button-example.component.html
@@ -15,6 +15,7 @@
     [contentDensity]="'cozy'"
     [icon]="'world'"
     [disabled]="true"
+    title="disabled menu button"
     [fdpMenuTriggerFor]="basicMenu"
 >
     Default Disabled Button
@@ -26,12 +27,19 @@
     [contentDensity]="'compact'"
     [icon]="'world'"
     [disabled]="true"
+    title="disabled menu button with only icon"
     [fdpMenuTriggerFor]="basicMenu"
 >
 </fdp-menu-button>
 
 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
-<fdp-menu-button [id]="'menu-button-17'" [contentDensity]="'compact'" [disabled]="true" [fdpMenuTriggerFor]="basicMenu">
+<fdp-menu-button
+    [id]="'menu-button-17'"
+    [contentDensity]="'compact'"
+    [disabled]="true"
+    [fdpMenuTriggerFor]="basicMenu"
+    title="disabled menu button without icon and text"
+>
 </fdp-menu-button>
 
 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
@@ -74,11 +82,20 @@
     [contentDensity]="'cozy'"
     [icon]="'world'"
     [disabled]="false"
+    title="menu button with icon"
+    ariaLabel="menu button with icon"
     [fdpMenuTriggerFor]="basicMenu"
 >
 </fdp-menu-button>
 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
-<fdp-menu-button [id]="'menu-button-23'" [contentDensity]="'cozy'" [disabled]="false" [fdpMenuTriggerFor]="basicMenu">
+<fdp-menu-button
+    [id]="'menu-button-23'"
+    [contentDensity]="'cozy'"
+    [disabled]="false"
+    title="menu button without icon and text"
+    ariaLabel="menu button without icon and text"
+    [fdpMenuTriggerFor]="basicMenu"
+>
 </fdp-menu-button>
 
 <br />
@@ -108,6 +125,8 @@
     [contentDensity]="'compact'"
     [icon]="'world'"
     [disabled]="false"
+    title="compact menu button with only icon"
+    ariaLabel="compact menu button with icon"
     [fdpMenuTriggerFor]="basicMenu"
 >
 </fdp-menu-button>
@@ -116,6 +135,8 @@
     [id]="'menu-button-27'"
     [contentDensity]="'compact'"
     [disabled]="false"
+    title="compact menu button without icon and text"
+    ariaLabel="compact menu button without icon and text"
     [fdpMenuTriggerFor]="basicMenu"
 >
 </fdp-menu-button>
@@ -129,12 +150,19 @@
     [icon]="'world'"
     [disabled]="false"
     [fdpMenuTriggerFor]="basicMenu"
+    title="Default menu button with icon and long text"
     [width]="'100px'"
 >
     Default Button with long text
 </fdp-menu-button>
 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
-<fdp-menu-button [contentDensity]="'cozy'" [disabled]="false" [fdpMenuTriggerFor]="basicMenu" [width]="'100px'">
+<fdp-menu-button
+    [contentDensity]="'cozy'"
+    [disabled]="false"
+    title="Default menu button with long text"
+    [fdpMenuTriggerFor]="basicMenu"
+    [width]="'100px'"
+>
     Default Button with long text
 </fdp-menu-button>
 

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,9 @@
     [disabled]="disabled"
     (click)="onButtonClick($event)"
     [fdType]="type"
-    tabindex="0"
+    [attr.tabindex]="0"
     [attr.title]="title"
+    [attr.aria-haspopup]="true"
 >
     <ng-content></ng-content>
 </button>
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,21 +1,12 @@
-import {
-    Component,
-    Input,
-    Output,
-    EventEmitter,
-    ChangeDetectorRef,
-    ChangeDetectionStrategy,
-    ViewEncapsulation
-} from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy } 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
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MenuButtonComponent extends BaseComponent {
     /** text for tooltip */