Fix the aria-hidden setting for the case when a fixed drawer is open. (#5128)

src/layout/layout.js

@@ -101,6 +101,7 @@
     HEADER_SCROLL: 'mdl-layout__header--scroll',
 
     FIXED_HEADER: 'mdl-layout--fixed-header',
+    FIXED_DRAWER: 'mdl-layout--fixed-drawer',
     OBFUSCATOR: 'mdl-layout__obfuscator',
 
     TAB_BAR: 'mdl-layout__tab-bar',
@@ -128,6 +129,17 @@
 
   };
 
+  /**
+   * Provide local version of matchMedia. This is needed in order to support
+   * monkey-patching of matchMedia in the unit tests. Due to peculiarities in
+   * PhantomJS, it doesn't work to monkey patch window.matchMedia directly.
+   *
+   * @private
+   */
+  MaterialLayout.prototype.matchMedia_ = function(query) {
+    return window.matchMedia(query);
+  };
+
   /**
    * Handles scrolling on the content.
    *
@@ -181,12 +193,20 @@
   MaterialLayout.prototype.screenSizeHandler_ = function() {
     if (this.screenSizeMediaQuery_.matches) {
       this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
+
+      if (this.drawer_) {
+        this.drawer_.setAttribute('aria-hidden', 'true');
+      }
     } else {
       this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
       // Collapse drawer (if any) when moving to a large screen size.
       if (this.drawer_) {
         this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
         this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
+
+        if (this.element_.classList.contains(this.CssClasses_.FIXED_DRAWER)) {
+          this.drawer_.setAttribute('aria-hidden', 'false');
+        }
       }
     }
   };
@@ -423,7 +443,7 @@
 
       // Keep an eye on screen size, and add/remove auxiliary class for styling
       // of small screens.
-      this.screenSizeMediaQuery_ = window.matchMedia(
+      this.screenSizeMediaQuery_ = this.matchMedia_(
           /** @type {string} */ (this.Constant_.MAX_WIDTH));
       this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
       this.screenSizeHandler_();

test/unit/layout.js

@@ -16,6 +16,33 @@
 
 describe('MaterialLayout', function () {
 
+  MockMediaQueryList = function(media) {
+    this.media = media;
+    this.listeners = [];
+  }
+
+  MockMediaQueryList.registry = {};
+
+  MockMediaQueryList.mockMatchMedia = function(query) {
+    if (! MockMediaQueryList.registry.hasOwnProperty(query)) {
+      MockMediaQueryList.registry[query] = new MockMediaQueryList(query);
+    }
+    return MockMediaQueryList.registry[query];
+  }
+
+  MockMediaQueryList.prototype.addListener = function(listener) {
+    this.listeners.push(listener);
+  }
+
+  MockMediaQueryList.prototype.triggerMatch = function(matches) {
+    this.matches = matches;
+    this.listeners.forEach(function(listener) {
+      // PhantomJS doesn't support MediaQueryListEvent() so mock the event.
+      var event = {media: this.media, matches: this.matches};
+      listener(event);
+    }.bind(this));
+  }
+
   it('should be globally available', function () {
     expect(MaterialLayout).to.be.a('function');
   });
@@ -99,13 +126,18 @@ describe('MaterialLayout', function () {
    });
 
   describe('Drawer', function () {
+    var el;
     var drawer, drawerBtn;
     var navLink;
 
     beforeEach(function() {
-      var el = document.createElement('div');
+      this.originalMatchMedia = window.MaterialLayout.prototype.matchMedia_;
+      window.MaterialLayout.prototype.matchMedia_ = MockMediaQueryList.mockMatchMedia;
+      window.patched = 'yes patched';
+
+      el = document.createElement('div');
       el.innerHTML = '<div class="mdl-layout__header"></div>' +
-        '<div class="mdl-layout__drawer" aria-hidden="true">' +
+        '<div class="mdl-layout__drawer">' +
         '   <nav class="mdl-navigation">' +
         '     <a class="mdl-navigation__link" href="">Phones</a>' +
         '     <a class="mdl-navigation__link" href="">Tablets</a>' +
@@ -124,7 +156,35 @@ describe('MaterialLayout', function () {
       navLink = el.querySelector('.mdl-layout__drawer a');
     });
 
+    afterEach(function() {
+      window.MaterialLayout.prototype.matchMedia_ = this.originalMatchMedia;
+    });
+
     it('should have attribute aria-hidden="true"', function () {
+      var screenSizeHandler = MockMediaQueryList.registry[
+          '(max-width: 1024px)'];
+
+      // Expect hidden on small screen
+      screenSizeHandler.triggerMatch(true);
+      expect($(drawer)).to.have.attr('aria-hidden', 'true');
+
+      // Expect hidden on wide screen
+      screenSizeHandler.triggerMatch(false);
+      expect($(drawer)).to.have.attr('aria-hidden', 'true');
+    });
+
+    it('should have attribute aria-hidden="false" for fixed drawer', function () {
+      $(el).addClass('mdl-layout--fixed-drawer');
+
+      var screenSizeHandler = MockMediaQueryList.registry[
+          '(max-width: 1024px)'];
+
+      // Expect hidden on small screen
+      screenSizeHandler.triggerMatch(true);
+      expect($(drawer)).to.have.attr('aria-hidden', 'true');
+
+      // Expect shown on wide screen
+      screenSizeHandler.triggerMatch(true);
       expect($(drawer)).to.have.attr('aria-hidden', 'true');
     });