diff --git a/extensions/amp-sidebar/0.1/amp-sidebar.js b/extensions/amp-sidebar/0.1/amp-sidebar.js index 8019db715c88..55dc0ec8c2bd 100644 --- a/extensions/amp-sidebar/0.1/amp-sidebar.js +++ b/extensions/amp-sidebar/0.1/amp-sidebar.js @@ -121,10 +121,14 @@ export class AmpSidebar extends AMP.BaseElement { } }); + // Replacement label for invisible close button set value in amp sidebar + const ariaLabel = this.element.getAttribute('data-close-button-aria-label') + || 'Close the sidebar'; + // Invisible close button at the end of sidebar for screen-readers. const screenReaderCloseButton = this.document_.createElement('button'); - // TODO(aghassemi, #4146) i18n - screenReaderCloseButton.textContent = 'Close the sidebar'; + + screenReaderCloseButton.textContent = ariaLabel; screenReaderCloseButton.classList.add('i-amphtml-screen-reader'); // This is for screen-readers only, should not get a tab stop. screenReaderCloseButton.tabIndex = -1; diff --git a/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js b/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js index 7696d1a5214a..8c03ba174ff6 100644 --- a/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js +++ b/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js @@ -61,6 +61,10 @@ describes.realWin('amp-sidebar 0.1 version', { if (options.open) { ampSidebar.setAttribute('open', ''); } + if (options.closeText) { + ampSidebar.setAttribute('data-close-button-aria-label', + options.closeText); + }; ampSidebar.setAttribute('id', 'sidebar1'); ampSidebar.setAttribute('layout', 'nodisplay'); return iframe.addElement(ampSidebar).then(() => { @@ -68,6 +72,17 @@ describes.realWin('amp-sidebar 0.1 version', { return {iframe, ampSidebar}; }); }); + + it('should replace text to screen reader \ + button in data-close-button-aria-label', () => { + return getAmpSidebar({'closeText': + 'data-close-button-aria-label'}).then(obj => { + const sidebarElement = obj.ampSidebar; + const closeButton = sidebarElement.lastElementChild; + expect(closeButton.textContent) + .to.equal('data-close-button-aria-label'); + }); + }); } beforeEach(() => { @@ -122,6 +137,7 @@ describes.realWin('amp-sidebar 0.1 version', { expect(closeButton).to.exist; expect(closeButton.tagName).to.equal('BUTTON'); assertScreenReaderElement(closeButton); + expect(closeButton.textContent).to.equal('Close the sidebar'); expect(impl.close_).to.have.not.been.called; closeButton.click(); expect(impl.close_).to.be.calledOnce; diff --git a/extensions/amp-sidebar/1.0/amp-sidebar.js b/extensions/amp-sidebar/1.0/amp-sidebar.js index ebf696a60d9b..f92995e410d5 100644 --- a/extensions/amp-sidebar/1.0/amp-sidebar.js +++ b/extensions/amp-sidebar/1.0/amp-sidebar.js @@ -122,10 +122,14 @@ export class AmpSidebar extends AMP.BaseElement { } }); + // Replacement label for invisible close button set value in amp sidebar + const ariaLabel = this.element.getAttribute('data-close-button-aria-label') + || 'Close the sidebar'; + // Invisible close button at the end of sidebar for screen-readers. const screenReaderCloseButton = this.document_.createElement('button'); - // TODO(aghassemi, #4146) i18n - screenReaderCloseButton.textContent = 'Close the sidebar'; + + screenReaderCloseButton.textContent = ariaLabel; screenReaderCloseButton.classList.add('i-amphtml-screen-reader'); // This is for screen-readers only, should not get a tab stop. screenReaderCloseButton.tabIndex = -1; diff --git a/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js b/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js index 205917ac6d8d..9c4d6efa9469 100644 --- a/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js +++ b/extensions/amp-sidebar/1.0/test/test-amp-sidebar.js @@ -62,6 +62,10 @@ if (options.open) { ampSidebar.setAttribute('open', ''); } + if (options.closeText) { + ampSidebar.setAttribute('data-close-button-aria-label', + options.closeText); + }; ampSidebar.setAttribute('id', 'sidebar1'); ampSidebar.setAttribute('layout', 'nodisplay'); return iframe.addElement(ampSidebar).then(() => { @@ -69,6 +73,17 @@ return {iframe, ampSidebar}; }); }); + + it('should replace text to screen reader \ + button in data-close-button-aria-label', () => { + return getAmpSidebar({'closeText': + 'data-close-button-aria-label'}).then(obj => { + const sidebarElement = obj.ampSidebar; + const closeButton = sidebarElement.lastElementChild; + expect(closeButton.textContent) + .to.equal('data-close-button-aria-label'); + }); + }); } beforeEach(() => { @@ -124,6 +139,7 @@ expect(closeButton).to.exist; expect(closeButton.tagName).to.equal('BUTTON'); assertScreenReaderElement(closeButton); + expect(closeButton.textContent).to.equal('Close the sidebar'); expect(impl.close_).to.have.not.been.called; closeButton.click(); expect(impl.close_).to.be.calledOnce; diff --git a/extensions/amp-sidebar/amp-sidebar.md b/extensions/amp-sidebar/amp-sidebar.md index 38989658c6c1..b05b8104fa47 100644 --- a/extensions/amp-sidebar/amp-sidebar.md +++ b/extensions/amp-sidebar/amp-sidebar.md @@ -70,7 +70,7 @@ Example: ### Opening and closing the sidebar -To toggle, open, or close the sidebar when an element is tapped or clicked, set the [`on`](../../spec/amp-actions-and-events.md) action attribute on the element, and specify one of the following action methods: +To toggle, open, or close the sidebar when an element is tapped or clicked, set the [`on`](../../spec/amp-actions-and-events.md) action attribute on the element, and specify one of the following action methods: @@ -122,6 +122,10 @@ Specifies the display layout of the sidebar, which must be `nodisplay`. This attribute is present when the sidebar is open. +##### data-close-button-aria-label** + +Optional attribute used to set ARIA label for the close button added for accessibility. + ##### common attributes This element includes [common attributes](https://www.ampproject.org/docs/reference/common_attributes) extended to AMP components.