Fix the aria-hidden setting for the case when a fixed drawer is open. (#5128)
parent
4109256f1b
commit
046356689b
|
@ -101,6 +101,7 @@
|
||||||
HEADER_SCROLL: 'mdl-layout__header--scroll',
|
HEADER_SCROLL: 'mdl-layout__header--scroll',
|
||||||
|
|
||||||
FIXED_HEADER: 'mdl-layout--fixed-header',
|
FIXED_HEADER: 'mdl-layout--fixed-header',
|
||||||
|
FIXED_DRAWER: 'mdl-layout--fixed-drawer',
|
||||||
OBFUSCATOR: 'mdl-layout__obfuscator',
|
OBFUSCATOR: 'mdl-layout__obfuscator',
|
||||||
|
|
||||||
TAB_BAR: 'mdl-layout__tab-bar',
|
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.
|
* Handles scrolling on the content.
|
||||||
*
|
*
|
||||||
|
@ -181,12 +193,20 @@
|
||||||
MaterialLayout.prototype.screenSizeHandler_ = function() {
|
MaterialLayout.prototype.screenSizeHandler_ = function() {
|
||||||
if (this.screenSizeMediaQuery_.matches) {
|
if (this.screenSizeMediaQuery_.matches) {
|
||||||
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
|
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
|
||||||
|
|
||||||
|
if (this.drawer_) {
|
||||||
|
this.drawer_.setAttribute('aria-hidden', 'true');
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
|
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
|
||||||
// Collapse drawer (if any) when moving to a large screen size.
|
// Collapse drawer (if any) when moving to a large screen size.
|
||||||
if (this.drawer_) {
|
if (this.drawer_) {
|
||||||
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
|
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
|
||||||
this.obfuscator_.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
|
// Keep an eye on screen size, and add/remove auxiliary class for styling
|
||||||
// of small screens.
|
// of small screens.
|
||||||
this.screenSizeMediaQuery_ = window.matchMedia(
|
this.screenSizeMediaQuery_ = this.matchMedia_(
|
||||||
/** @type {string} */ (this.Constant_.MAX_WIDTH));
|
/** @type {string} */ (this.Constant_.MAX_WIDTH));
|
||||||
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
|
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
|
||||||
this.screenSizeHandler_();
|
this.screenSizeHandler_();
|
||||||
|
|
|
@ -16,6 +16,33 @@
|
||||||
|
|
||||||
describe('MaterialLayout', function () {
|
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 () {
|
it('should be globally available', function () {
|
||||||
expect(MaterialLayout).to.be.a('function');
|
expect(MaterialLayout).to.be.a('function');
|
||||||
});
|
});
|
||||||
|
@ -99,13 +126,18 @@ describe('MaterialLayout', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Drawer', function () {
|
describe('Drawer', function () {
|
||||||
|
var el;
|
||||||
var drawer, drawerBtn;
|
var drawer, drawerBtn;
|
||||||
var navLink;
|
var navLink;
|
||||||
|
|
||||||
beforeEach(function() {
|
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>' +
|
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">' +
|
' <nav class="mdl-navigation">' +
|
||||||
' <a class="mdl-navigation__link" href="">Phones</a>' +
|
' <a class="mdl-navigation__link" href="">Phones</a>' +
|
||||||
' <a class="mdl-navigation__link" href="">Tablets</a>' +
|
' <a class="mdl-navigation__link" href="">Tablets</a>' +
|
||||||
|
@ -124,7 +156,35 @@ describe('MaterialLayout', function () {
|
||||||
navLink = el.querySelector('.mdl-layout__drawer a');
|
navLink = el.querySelector('.mdl-layout__drawer a');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
window.MaterialLayout.prototype.matchMedia_ = this.originalMatchMedia;
|
||||||
|
});
|
||||||
|
|
||||||
it('should have attribute aria-hidden="true"', function () {
|
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');
|
expect($(drawer)).to.have.attr('aria-hidden', 'true');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue