diff --git a/extensions/amp-story/1.0/amp-story-share-menu.js b/extensions/amp-story/1.0/amp-story-share-menu.js index e763d4f3731e..b2dc71e08996 100644 --- a/extensions/amp-story/1.0/amp-story-share-menu.js +++ b/extensions/amp-story/1.0/amp-story-share-menu.js @@ -21,6 +21,7 @@ import { getStoreService, } from './amp-story-store-service'; import {CSS} from '../../../build/amp-story-share-menu-1.0.css'; +import {Keys} from '../../../src/utils/key-codes'; import {Services} from '../../../src/services'; import {ShareWidget} from './amp-story-share'; import {closest} from '../../../src/dom'; @@ -190,6 +191,13 @@ export class ShareMenu { this.element_.addEventListener('click', event => this.onShareMenuClick_(event) ); + + this.win_.addEventListener('keyup', event => { + if (event.key == Keys.ESCAPE) { + event.preventDefault(); + this.close_(); + } + }); } } @@ -221,13 +229,12 @@ export class ShareMenu { /** * Handles click events and maybe closes the menu for the fallback UI. * @param {!Event} event - * @return {*} TODO(#23582): Specify return type */ onShareMenuClick_(event) { const el = dev().assertElement(event.target); if (el.classList.contains('i-amphtml-story-share-menu-close-button')) { - return this.close_(); + this.close_(); } // Closes the menu if click happened outside of the menu main container. diff --git a/extensions/amp-story/1.0/test/test-amp-story-share-menu.js b/extensions/amp-story/1.0/test/test-amp-story-share-menu.js index 47adbb90822b..b99fc6896286 100644 --- a/extensions/amp-story/1.0/test/test-amp-story-share-menu.js +++ b/extensions/amp-story/1.0/test/test-amp-story-share-menu.js @@ -19,6 +19,7 @@ import { AmpStoryStoreService, StateProperty, } from '../amp-story-store-service'; +import {Keys} from '../../../../src/utils/key-codes'; import {LocalizationService} from '../../../../src/service/localization'; import {Services} from '../../../../src/services'; import {ShareMenu, VISIBLE_CLASS} from '../amp-story-share-menu'; @@ -130,6 +131,21 @@ describes.realWin('amp-story-share-menu', {amp: true}, env => { expect(shareMenu.element_).to.have.class(VISIBLE_CLASS); }); + it('should hide the share menu on escape key press', () => { + shareMenu.build(); + + const clickCallbackSpy = sandbox.spy(); + win.addEventListener('keyup', clickCallbackSpy); + + storeService.dispatch(Action.TOGGLE_SHARE_MENU, true); + // Create escape keyup event. + const keyupEvent = new Event('keyup'); + keyupEvent.keyCode = Keys.ESCAPE; + win.dispatchEvent(keyupEvent); + + expect(clickCallbackSpy).to.have.been.calledOnce; + }); + it('should render the amp-social-share button if system share', () => { isSystemShareSupported = true;