From 44beacb21d86c7b6e5c7f91eb34d555d08d7ecff Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Mon, 14 Oct 2019 16:13:32 -0700
Subject: [PATCH 1/4] dialog title -> heading

---
 demos/dialog.html                           | 18 +++++++++---------
 packages/dialog/README.md                   | 16 ++++++++--------
 packages/dialog/src/mwc-dialog-base.ts      | 12 ++++++------
 packages/dialog/src/mwc-dialog.scss         |  2 +-
 packages/dialog/src/test/mwc-dialog.test.ts |  2 +-
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/demos/dialog.html b/demos/dialog.html
index a10aba0f1..1776aa6c1 100644
--- a/demos/dialog.html
+++ b/demos/dialog.html
@@ -44,14 +44,14 @@ limitations under the License.
     <div>
 
     <mwc-button data-num="1" raised>Basic</mwc-button>
-    <mwc-dialog id="dialog1" title="Dialog header">
+    <mwc-dialog id="dialog1" heading="Dialog header">
       Dialog body text
       <mwc-button slot="primaryAction" dialogAction="ok">Action 2</mwc-button>
       <mwc-button slot="secondaryAction" dialogAction="cancel">Action 1</mwc-button>
     </mwc-dialog>
 
     <mwc-button data-num="2" raised>Actions</mwc-button>
-    <mwc-dialog id="dialog2" title="Actions">
+    <mwc-dialog id="dialog2" heading="Actions">
       <p>
         By setting the dialogAction="my-action" attribute on any element projected into
         mwc-dialog, you can close the dialog by clicking on that element. The
@@ -63,7 +63,7 @@ limitations under the License.
     </mwc-dialog>
 
     <mwc-button data-num="3" raised>Scrollable</mwc-button>
-    <mwc-dialog id="dialog3" title="My Title">
+    <mwc-dialog id="dialog3" heading="My Title">
       <p>
         Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really long text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll. Really log text will scroll.
       </p>
@@ -71,7 +71,7 @@ limitations under the License.
     </mwc-dialog>
 
     <mwc-button data-num="4" raised>Hide Actions</mwc-button>
-    <mwc-dialog id="dialog4" title="Hide Actions">
+    <mwc-dialog id="dialog4" heading="Hide Actions">
       <p>
         If you don't have actions, you may want to set the "hideActions" property.
         This property will remove extra whitespace at the bottom of this dialog.
@@ -90,7 +90,7 @@ limitations under the License.
       .styled {
         --mdc-theme-surface: #FFF;
         --mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
-        --mdc-dialog-title-ink-color: #232F34;
+        --mdc-dialog-heading-ink-color: #232F34;
         --mdc-dialog-content-ink-color: #232F34;
         --mdc-dialog-scroll-divider-color: transparent;
         --mdc-dialog-min-width: 500px;
@@ -104,12 +104,12 @@ limitations under the License.
     </style>
 
     <mwc-button data-num="5" raised>Styled</mwc-button>
-    <mwc-dialog id="dialog5" title="Styled" class="styled">
+    <mwc-dialog id="dialog5" heading="Styled" class="styled">
         <div>These are the current styles applied to this dialog</div>
         <pre>
 --mdc-theme-surface: #FFF;
 --mdc-dialog-scrim-color: rgba(35, 47, 52, .32);
---mdc-dialog-title-ink-color: #232F34;
+--mdc-dialog-heading-ink-color: #232F34;
 --mdc-dialog-content-ink-color: #232F34;
 --mdc-dialog-scroll-divider-color: transparent;
 --mdc-dialog-min-width: 500px;
@@ -126,7 +126,7 @@ limitations under the License.
     </mwc-dialog>
 
     <mwc-button data-num="6" raised>Stacked</mwc-button>
-    <mwc-dialog id="dialog6" title="Stacked" stacked>
+    <mwc-dialog id="dialog6" heading="Stacked" stacked>
       <div>
         This is what happens when you set the stacked property on mwc-dialog.
         Notice that the primary action is now on top.
@@ -140,7 +140,7 @@ limitations under the License.
     </mwc-dialog>
 
     <mwc-button data-num="7" raised>Initial Focus</mwc-button>
-    <mwc-dialog id="dialog7" title="Initial Focus">
+    <mwc-dialog id="dialog7" heading="Initial Focus">
       <div>
         In this example we set "dialogInitialFocus" on the mwc-textfield.
         When this dialog opens, it is auto-focused.
diff --git a/packages/dialog/README.md b/packages/dialog/README.md
index b920d5d08..4fd2b4ee4 100644
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -33,7 +33,7 @@ npm install @material/mwc-dialog
 
 ```html
 <mwc-dialog
-    title="Simple Dialog"
+    heading="Simple Dialog"
     open
     hideActions>
   <ul>
@@ -103,7 +103,7 @@ npm install @material/mwc-dialog
   }
 </style>
 
-<mwc-dialog title="Phone Ringtone" open>
+<mwc-dialog heading="Phone Ringtone" open>
   <div>
     <mwc-formfield label="Never Gonna Give You Up">
       <mwc-radio id="a1" name="a" checked></mwc-radio>
@@ -140,7 +140,7 @@ npm install @material/mwc-dialog
 <img src="images/scrollable.png" width="598px">
 
 ```html
-<mwc-dialog title="Privacy Policy" open>
+<mwc-dialog heading="Privacy Policy" open>
 <div>
   really large amount of text...
 </div>
@@ -172,7 +172,7 @@ npm install @material/mwc-dialog
   }
 </style>
 
-<mwc-dialog title="Styled" class="styled" open>
+<mwc-dialog heading="Styled" class="styled" open>
     <div>
       In this dialog we have changed the button color and removed the border
       radius.
@@ -188,7 +188,7 @@ npm install @material/mwc-dialog
 <img src="images/stacked.png" width="594px">
 
 ```html
-<mwc-dialog title="Stacked" stacked>
+<mwc-dialog heading="Stacked" stacked>
   <div>
     This is what happens when you set the stacked property on mwc-dialog.
     Notice that the primary action is now on top.
@@ -219,7 +219,7 @@ npm install @material/mwc-dialog
 | `open`                  | `boolean` | Whether the dialog should open.
 | `hideActions`           | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
 | `stacked`               | `boolean` | Whether to stack the action buttons.
-| `title`                 | `string`  | Title of the dialog.
+| `heading`               | `string`  | Heading text of the dialog.
 | `scrimClickAction`      | `string`  | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked (see [actions section](#actions)).
 | `escapeKeyAction`       | `string`  | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed (see [actions section](#actions)).
 | `defaultAction`         | `string`  | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `<mwc-dialog>.open` is toggled (see [actions section](#actions)).
@@ -258,7 +258,7 @@ npm install @material/mwc-dialog
 | ----------------------------------- | --------------------- |------------
 | `--mdc-theme-surface`               | ![](images/color_fff.png) `#fff`                | Color of the dialog surface's background.
 | `--mdc-dialog-scrim-color`          | ![](images/color_0,0,0,32.png) `rgba(0, 0, 0, 0.32)` | Color of the scrim. (**Note:** setting alpha to 0 will still make scrim clickable but transparent).
-| `--mdc-dialog-title-ink-color`      | ![](images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the title text.
+| `--mdc-dialog-heading-ink-color`    | ![](images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the heading text.
 | `--mdc-dialog-content-ink-color`    | ![](images/color_0,0,0,6.png) `rgba(0, 0, 0, 0.6)`  | Color applied to the projected content. (**Note:** it may also be possible to style the content via the light DOM since it is not encapsulated in a shadow root).
 | `--mdc-dialog-scroll-divider-color` | ![](images/color_0,0,0,12.png) `rgba(0, 0, 0, 0.12)` | Color of the dividers present when dialog is scrollable.
 | `--mdc-dialog-min-width`            | `280px`               | min-width ofthe dialog surface.
@@ -333,7 +333,7 @@ For example:
 <img src="images/initial-focus.png" width="597px">
 
 ```html
-<mwc-dialog title="Initial Focus" open>
+<mwc-dialog heading="Initial Focus" open>
   <div>
     In this example we set "dialogInitialFocus" on the mwc-textfield.
     When this dialog opens, it is auto-focused.
diff --git a/packages/dialog/src/mwc-dialog-base.ts b/packages/dialog/src/mwc-dialog-base.ts
index 761ada1eb..2adf0cb6f 100644
--- a/packages/dialog/src/mwc-dialog-base.ts
+++ b/packages/dialog/src/mwc-dialog-base.ts
@@ -59,7 +59,7 @@ export class DialogBase extends BaseElement {
   })
   stacked = false;
 
-  @property({type: String}) title = '';
+  @property({type: String}) heading = '';
 
   @property({type: String})
   @observer(function(this: DialogBase, newAction: string) {
@@ -180,10 +180,10 @@ export class DialogBase extends BaseElement {
       [cssClasses.STACKED]: this.stacked,
     };
 
-    let title = html``;
+    let heading = html``;
 
-    if (this.title) {
-      title = html`<h2 class="mdc-dialog__title">${this.title}</h2>`;
+    if (this.heading) {
+      heading = html`<h2 class="mdc-dialog__title">${this.heading}</h2>`;
     }
 
     const actionsClasses = {
@@ -194,11 +194,11 @@ export class DialogBase extends BaseElement {
     <div class="mdc-dialog ${classMap(classes)}"
         role="alertdialog"
         aria-modal="true"
-        aria-labelledby="my-dialog-title"
+        aria-labelledby="title"
         aria-describedby="my-dialog-content">
       <div class="mdc-dialog__container">
         <div class="mdc-dialog__surface">
-          ${title}
+          ${heading}
           <div class="mdc-dialog__content">
             <slot></slot>
           </div>
diff --git a/packages/dialog/src/mwc-dialog.scss b/packages/dialog/src/mwc-dialog.scss
index 3851bbf3f..5d72917ee 100644
--- a/packages/dialog/src/mwc-dialog.scss
+++ b/packages/dialog/src/mwc-dialog.scss
@@ -103,7 +103,7 @@ limitations under the License.
   .mdc-dialog__title {
     @include mdc-feature-targets($feat-color) {
       @include mdc-theme-prop(color, (
-        varname: --mdc-dialog-title-ink-color,
+        varname: --mdc-dialog-heading-ink-color,
         fallback: rgba(mdc-theme-prop-value($color), $opacity)
       ));
     }
diff --git a/packages/dialog/src/test/mwc-dialog.test.ts b/packages/dialog/src/test/mwc-dialog.test.ts
index 870177aee..487371d94 100644
--- a/packages/dialog/src/test/mwc-dialog.test.ts
+++ b/packages/dialog/src/test/mwc-dialog.test.ts
@@ -54,7 +54,7 @@ const opened = html`
 `;
 
 const withButtons = html`
-  <mwc-dialog title="myTitle" actionAttribute="data-dialogAction">
+  <mwc-dialog heading="myTitle" actionAttribute="data-dialogAction">
     <mwc-button
         slot="primaryAction"
         data-dialogAction="ok">

From 97028e0d7b45d0507231fc0357de42434577ab56 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Mon, 14 Oct 2019 16:13:57 -0700
Subject: [PATCH 2/4] fix aria in dialog

---
 packages/dialog/src/mwc-dialog-base.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/dialog/src/mwc-dialog-base.ts b/packages/dialog/src/mwc-dialog-base.ts
index 2adf0cb6f..ca1dded41 100644
--- a/packages/dialog/src/mwc-dialog-base.ts
+++ b/packages/dialog/src/mwc-dialog-base.ts
@@ -183,7 +183,8 @@ export class DialogBase extends BaseElement {
     let heading = html``;
 
     if (this.heading) {
-      heading = html`<h2 class="mdc-dialog__title">${this.heading}</h2>`;
+      heading = html`
+        <h2 id="title" class="mdc-dialog__title">${this.heading}</h2>`;
     }
 
     const actionsClasses = {
@@ -195,11 +196,11 @@ export class DialogBase extends BaseElement {
         role="alertdialog"
         aria-modal="true"
         aria-labelledby="title"
-        aria-describedby="my-dialog-content">
+        aria-describedby="content">
       <div class="mdc-dialog__container">
         <div class="mdc-dialog__surface">
           ${heading}
-          <div class="mdc-dialog__content">
+          <div id="content" class="mdc-dialog__content">
             <slot></slot>
           </div>
           <footer

From 3209d22993e68f89554ec479d0c33af8c4e4b852 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Mon, 14 Oct 2019 16:22:43 -0700
Subject: [PATCH 3/4] fix test title -> heading

---
 packages/dialog/src/test/mwc-dialog.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dialog/src/test/mwc-dialog.test.ts b/packages/dialog/src/test/mwc-dialog.test.ts
index 487371d94..f20d6ce58 100644
--- a/packages/dialog/src/test/mwc-dialog.test.ts
+++ b/packages/dialog/src/test/mwc-dialog.test.ts
@@ -86,7 +86,7 @@ suite('mwc-dialog:', () => {
       let titleTag = element.shadowRoot!.querySelector('.mdc-dialog__title');
       assert.isNull(titleTag);
 
-      element.title = 'This is my Title';
+      element.heading = 'This is my Title';
       await element.requestUpdate();
       titleTag = element.shadowRoot!.querySelector('.mdc-dialog__title');
       assert.notStrictEqual(titleTag, null);
@@ -128,7 +128,7 @@ suite('mwc-dialog:', () => {
       assert.strictEqual(surfaceElement.offsetWidth, 0);
       assert.strictEqual(surfaceElement.offsetHeight, 0);
 
-      element.title = 'Basic title';
+      element.heading = 'Basic title';
       element.hideActions = true;
       element.open = true;
       await openedPromise;

From 03c5e0a2a622e2cc6d88402b28f0a6fb0df6c9b6 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Mon, 14 Oct 2019 16:24:27 -0700
Subject: [PATCH 4/4] update changelog

---
 CHANGELOG.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13cbadc85..e37b08857 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+- **BREAKING** `Dialog.title` renamed to `Dialog.heading` and
+  `--mdc-dialog-title-ink-color` renamed to `--mdc-dialog-heading-ink-color` as
+  it caused clashes with `HTMLElement.prototype.title`.
 
 ## [0.10.0] - 2019-10-11