feat(dialog): Support reporting action in ancestor element (#3572)

packages/mdc-dialog/README.md

@@ -277,7 +277,7 @@ Method Signature | Description
 `releaseFocus() => void` | Removes any effects of focus trapping on the dialog surface (see [Handling Focus Trapping](#handling-focus-trapping) below for more details).
 `isContentScrollable() => boolean` | Returns `true` if `mdc-dialog__content` can be scrolled by the user, otherwise `false`.
 `areButtonsStacked() => boolean` | Returns `true` if `mdc-dialog__action` buttons (`mdc-dialog__button`) are stacked vertically, otherwise `false` if they are side-by-side.
-`getActionFromEvent(event: !Event) => ?string` | Retrieves the value of the `data-mdc-dialog-action` attribute from the given event's target.
+`getActionFromEvent(event: !Event) => ?string` | Retrieves the value of the `data-mdc-dialog-action` attribute from the given event's target, or an ancestor of the target.
 `notifyOpening() => void` | Broadcasts an event denoting that the dialog has just started to open.
 `notifyOpened() => void` | Broadcasts an event denoting that the dialog has finished opening.
 `notifyClosing(action: string) {}` | Broadcasts an event denoting that the dialog has just started closing. If a non-empty `action` is passed, the event's `detail` object should include its value in the `action` property.

packages/mdc-dialog/foundation.js

@@ -196,11 +196,14 @@ class MDCDialogFoundation extends MDCFoundation {
    * @private
    */
   handleClick(evt) {
-    const action = this.adapter_.getActionFromEvent(evt);
-    if (action) {
-      this.close(action);
-    } else if (this.adapter_.eventTargetHasClass(evt.target, cssClasses.SCRIM) && this.scrimClickAction_) {
+    // Check for scrim click first since it doesn't require querying ancestors
+    if (this.adapter_.eventTargetHasClass(evt.target, cssClasses.SCRIM) && this.scrimClickAction_ !== '') {
       this.close(this.scrimClickAction_);
+    } else {
+      const action = this.adapter_.getActionFromEvent(evt);
+      if (action) {
+        this.close(action);
+      }
     }
   }
 
@@ -209,7 +212,7 @@ class MDCDialogFoundation extends MDCFoundation {
    * @private
    */
   handleDocumentKeydown(evt) {
-    if ((evt.key === 'Escape' || evt.keyCode === 27) && this.escapeKeyAction_) {
+    if ((evt.key === 'Escape' || evt.keyCode === 27) && this.escapeKeyAction_ !== '') {
       this.close(this.escapeKeyAction_);
     }
   }

packages/mdc-dialog/index.js

@@ -26,6 +26,7 @@ import {MDCRipple} from '@material/ripple/index';
 
 import MDCDialogFoundation from './foundation';
 import * as util from './util';
+import {closest} from '@material/dom/ponyfill';
 
 import createFocusTrap from 'focus-trap';
 
@@ -171,7 +172,10 @@ class MDCDialog extends MDCComponent {
       releaseFocus: () => this.focusTrap_.deactivate(),
       isContentScrollable: () => !!this.content_ && util.isScrollable(/** @type {!Element} */ (this.content_)),
       areButtonsStacked: () => util.areTopsMisaligned(this.buttons_),
-      getActionFromEvent: (event) => event.target.getAttribute(strings.ACTION_ATTRIBUTE),
+      getActionFromEvent: (event) => {
+        const element = closest(event.target, `[${strings.ACTION_ATTRIBUTE}]`);
+        return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
+      },
       notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
       notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
       notifyClosing: (action) => this.emit(strings.CLOSING_EVENT, action ? {action} : {}),

packages/mdc-dialog/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@material/animation": "^0.39.0",
     "@material/base": "^0.39.0",
+    "@material/dom": "^0.0.0",
     "@material/elevation": "^0.39.1",
     "@material/ripple": "^0.39.3",
     "@material/rtl": "^0.39.1",

test/unit/mdc-dialog/mdc-dialog.test.js

@@ -387,12 +387,20 @@ test('adapter#areButtonsStacked returns result of util.areTopsMisaligned', () =>
     util.areTopsMisaligned([yesButton, noButton, cancelButton]));
 });
 
-test('adapter#getActionFromEvent returns attribute value', () => {
+test('adapter#getActionFromEvent returns attribute value on event target', () => {
   const {component, yesButton} = setupTest();
   const action = component.getDefaultFoundation().adapter_.getActionFromEvent({target: yesButton});
   assert.equal(action, 'yes');
 });
 
+test('adapter#getActionFromEvent returns attribute value on parent of event target', () => {
+  const {component, yesButton} = setupTest();
+  const childEl = bel`<span></span>`;
+  yesButton.appendChild(childEl);
+  const action = component.getDefaultFoundation().adapter_.getActionFromEvent({target: childEl});
+  assert.equal(action, 'yes');
+});
+
 test('adapter#getActionFromEvent returns null when attribute is not present', () => {
   const {component, title} = setupTest();
   const action = component.getDefaultFoundation().adapter_.getActionFromEvent({target: title});