From 5e02aef3a7cf60b1569e44a282fee5d0c6f31d8c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 15 Sep 2017 01:59:20 +0200
Subject: [PATCH] demo(tooltip): add accessibility demo for tooltip (#7058)

Adds an accessibility demo page for the tooltip.

Fixes #6499.
---
 src/demo-app/a11y/a11y-module.ts            |  2 +
 src/demo-app/a11y/a11y.ts                   |  1 +
 src/demo-app/a11y/routes.ts                 |  2 +
 src/demo-app/a11y/tooltip/tooltip-a11y.html | 45 +++++++++++++++++++++
 src/demo-app/a11y/tooltip/tooltip-a11y.ts   |  8 ++++
 5 files changed, 58 insertions(+)
 create mode 100644 src/demo-app/a11y/tooltip/tooltip-a11y.html
 create mode 100644 src/demo-app/a11y/tooltip/tooltip-a11y.ts

diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 79835975bcd..81c854a3ec0 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -39,6 +39,7 @@ import {
   RainyTabContent,
   FoggyTabContent,
 } from './tabs/tabs-a11y';
+import {TooltipAccessibilityDemo} from './tooltip/tooltip-a11y';
 
 
 @NgModule({
@@ -91,6 +92,7 @@ export class AccessibilityRoutingModule {}
     SunnyTabContent,
     RainyTabContent,
     FoggyTabContent,
+    TooltipAccessibilityDemo,
   ],
   entryComponents: [
     DialogAccessibilityDemo,
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 214d77fddbb..64443039988 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -40,6 +40,7 @@ export class AccessibilityDemo {
     {name: 'Select', route: 'select'},
     {name: 'Tabs', route: 'tabs'},
     {name: 'Toolbar', route: 'toolbar'},
+    {name: 'Tooltip', route: 'tooltip'},
   ];
 
   skipNavigation() {
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index 3220a0a8a0f..a9d82c0e668 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -22,6 +22,7 @@ import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
 import {TabsAccessibilityDemo} from './tabs/tabs-a11y';
 import {TABS_DEMO_ROUTES} from './tabs/routes';
+import {TooltipAccessibilityDemo} from './tooltip/tooltip-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -46,4 +47,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'select', component: SelectAccessibilityDemo},
   {path: 'tabs', component: TabsAccessibilityDemo, children: TABS_DEMO_ROUTES},
   {path: 'toolbar', component: ToolbarAccessibilityDemo},
+  {path: 'tooltip', component: TooltipAccessibilityDemo},
 ];
diff --git a/src/demo-app/a11y/tooltip/tooltip-a11y.html b/src/demo-app/a11y/tooltip/tooltip-a11y.html
new file mode 100644
index 00000000000..14c2307cd09
--- /dev/null
+++ b/src/demo-app/a11y/tooltip/tooltip-a11y.html
@@ -0,0 +1,45 @@
+<section>
+  <h2>Mouse over or tab to trigger a tooltip</h2>
+  <p>Mouse over or focus the button to show and hide the tooltip</p>
+  <button md-raised-button mdTooltip="This is an example of a tooltip">What is this?</button>
+</section>
+
+
+<section>
+  <h2>Click to trigger a tooltip</h2>
+  <button md-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
+  <button md-raised-button mdTooltip="This is a tooltip that shows on click" #tooltip="mdTooltip">I have a tooltip</button>
+</section>
+
+
+<section>
+  <h2>Different tooltip positions</h2>
+
+  <button
+    md-raised-button
+    mdTooltip="This tooltip appears below the trigger"
+    mdTooltipPosition="below">Below</button>
+
+  <button
+    md-raised-button
+    mdTooltip="This tooltip appears above the trigger"
+    mdTooltipPosition="above">Above</button>
+
+  <button
+    md-raised-button
+    mdTooltip="This tooltip appears to the left of the trigger"
+    mdTooltipPosition="left">Left</button>
+
+  <button
+    md-raised-button
+    mdTooltip="This tooltip appears to the right of the trigger"
+    mdTooltipPosition="right">Right</button>
+</section>
+
+<section>
+  <h2>Delayed tooltip</h2>
+  <button
+    md-raised-button
+    mdTooltip="This tooltip will show up after a delay"
+    [mdTooltipShowDelay]="2000">What is this?</button>
+</section>
diff --git a/src/demo-app/a11y/tooltip/tooltip-a11y.ts b/src/demo-app/a11y/tooltip/tooltip-a11y.ts
new file mode 100644
index 00000000000..b613fb3ac10
--- /dev/null
+++ b/src/demo-app/a11y/tooltip/tooltip-a11y.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'tooltip-a11y',
+  templateUrl: 'tooltip-a11y.html',
+})
+export class TooltipAccessibilityDemo {}