Make screen readers announce changes in the slides carousel. (#5892)

Fixes #5485
ampproject · Oct 28, 2016 · 90c965d · 90c965d
1 parent 97c75fe
commit 90c965d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/extensions/amp-carousel/0.1/slidescroll.js b/extensions/amp-carousel/0.1/slidescroll.js
@@ -122,6 +122,10 @@ export class AmpSlideScroll extends BaseSlides {
 
     this.slidesContainer_ = this.win.document.createElement('div');
     this.slidesContainer_.classList.add('-amp-slides-container');
+    // Let screen reader know that this is a live area and changes
+    // to it (such after pressing next) should be announced to the
+    // user.
+    this.slidesContainer_.setAttribute('aria-live', 'polite');
 
     // Workaround - https://bugs.webkit.org/show_bug.cgi?id=158821
     if (this.hasNativeSnapPoints_) {

diff --git a/extensions/amp-carousel/0.1/test/test-slidescroll.js b/extensions/amp-carousel/0.1/test/test-slidescroll.js
@@ -84,6 +84,8 @@ describe('SlideScroll', () => {
       expect(
           ampSlideScroll.getElementsByClassName('amp-carousel-slide').length)
               .to.equal(5);
+      expect(ampSlideScroll.querySelector('.-amp-slides-container')
+            .getAttribute('aria-live')).to.equal('polite');
       const impl = ampSlideScroll.implementation_;
       expect(impl.slideWrappers_[0].classList.contains(SHOW_CLASS))
           .to.be.true;