update components

This commit is contained in:
Luke Pulverenti 2016-03-23 22:29:49 -04:00
parent 59c19c458f
commit 0f44fb37b3
13 changed files with 97 additions and 118 deletions

View file

@ -16,12 +16,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.1.84", "version": "1.1.85",
"_release": "1.1.84", "_release": "1.1.85",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.1.84", "tag": "1.1.85",
"commit": "f6da20976f81118f044588378a5cdaadea3063ba" "commit": "9c387d30fa985207e55bebbeeebf1a5b68bc21be"
}, },
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git", "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.1.5", "_target": "~1.1.5",

View file

@ -99,7 +99,7 @@
animateDialogOpen(dlg); animateDialogOpen(dlg);
if (dlg.getAttribute('data-autofocus') == 'true') { if (dlg.getAttribute('data-autofocus') == 'true') {
focusManager.autoFocus(dlg); autoFocus(dlg);
} }
if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) { if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) {
@ -116,6 +116,22 @@
} }
} }
function autoFocus(dlg) {
// The dialog may have just been created and webComponents may not have completed initialiazation yet.
// Without this, seeing some script errors in Firefox
var delay = browser.animate ? 0 : 500;
if (!delay) {
focusManager.autoFocus(dlg);
return;
}
setTimeout(function () {
focusManager.autoFocus(dlg);
}, delay);
}
function safeBlur(el) { function safeBlur(el) {
if (el && el.blur && el != document.body) { if (el && el.blur && el != document.body) {
el.blur(); el.blur();

View file

@ -18,10 +18,14 @@ define([], function () {
var tagName = element.tagName; var tagName = element.tagName;
if (tagName == 'PAPER-INPUT' || tagName == 'PAPER-DROPDOWN-MENU' || tagName == 'EMBY-DROPDOWN-MENU') { if (tagName == 'PAPER-INPUT' || tagName == 'PAPER-DROPDOWN-MENU' || tagName == 'EMBY-DROPDOWN-MENU') {
element = element.querySelector('input'); element = element.querySelector('input') || element;
} }
element.focus(); try {
element.focus();
} catch (err) {
console.log('Error in focusManager.autoFocus: ' + err);
}
} }
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-TEXTAREA', 'PAPER-ICON-BUTTON', 'PAPER-FAB', 'PAPER-CHECKBOX', 'PAPER-ICON-ITEM', 'PAPER-MENU-ITEM', 'PAPER-DROPDOWN-MENU', 'EMBY-DROPDOWN-MENU']; var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-TEXTAREA', 'PAPER-ICON-BUTTON', 'PAPER-FAB', 'PAPER-CHECKBOX', 'PAPER-ICON-ITEM', 'PAPER-MENU-ITEM', 'PAPER-DROPDOWN-MENU', 'EMBY-DROPDOWN-MENU'];

View file

@ -29,14 +29,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/PolymerElements/iron-behaviors", "homepage": "https://github.com/polymerelements/iron-behaviors",
"_release": "1.0.13", "_release": "1.0.13",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.13", "tag": "v1.0.13",
"commit": "a7bc3428a6da2beed21987b3a8028206826a12bc" "commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
}, },
"_source": "git://github.com/PolymerElements/iron-behaviors.git", "_source": "git://github.com/polymerelements/iron-behaviors.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors" "_originalSource": "polymerelements/iron-behaviors"
} }

View file

@ -32,14 +32,14 @@
"web-component-tester": "^4.0.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"homepage": "https://github.com/polymerelements/iron-icon", "homepage": "https://github.com/PolymerElements/iron-icon",
"_release": "1.0.8", "_release": "1.0.8",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.8", "tag": "v1.0.8",
"commit": "f36b38928849ef3853db727faa8c9ef104d611eb" "commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
}, },
"_source": "git://github.com/polymerelements/iron-icon.git", "_source": "git://github.com/PolymerElements/iron-icon.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-icon" "_originalSource": "PolymerElements/iron-icon"
} }

View file

@ -45,7 +45,7 @@
"tag": "v1.0.11", "tag": "v1.0.11",
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5" "commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
}, },
"_source": "git://github.com/polymerelements/paper-behaviors.git", "_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/paper-behaviors" "_originalSource": "PolymerElements/paper-behaviors"
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-dialog-behavior", "name": "paper-dialog-behavior",
"version": "1.2.0", "version": "1.2.1",
"description": "Implements a behavior used for material design dialogs", "description": "Implements a behavior used for material design dialogs",
"authors": "The Polymer Authors", "authors": "The Polymer Authors",
"keywords": [ "keywords": [
@ -34,11 +34,11 @@
"web-component-tester": "^4.0.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"_release": "1.2.0", "_release": "1.2.1",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.2.0", "tag": "v1.2.1",
"commit": "a3be07d2784073d5e9e5175fb7d13f7b1f2a5558" "commit": "6fd7f85f04ca833d35fd991ba08270ce92057594"
}, },
"_source": "git://github.com/PolymerElements/paper-dialog-behavior.git", "_source": "git://github.com/PolymerElements/paper-dialog-behavior.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -0,0 +1,33 @@
<!-- Instructions: https://github.com/PolymerElements/paper-dialog-behavior/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

View file

@ -21,6 +21,5 @@ addons:
- g++-4.8 - g++-4.8
sauce_connect: true sauce_connect: true
script: script:
- xvfb-run wct -l chrome - xvfb-run wct
- xvfb-run wct -l firefox
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-dialog-behavior", "name": "paper-dialog-behavior",
"version": "1.2.0", "version": "1.2.1",
"description": "Implements a behavior used for material design dialogs", "description": "Implements a behavior used for material design dialogs",
"authors": "The Polymer Authors", "authors": "The Polymer Authors",
"keywords": [ "keywords": [

View file

@ -60,8 +60,6 @@ to override this attribute with `role="alertdialog"`.
If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element. If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element.
It will also ensure that focus remains in the dialog. It will also ensure that focus remains in the dialog.
The `aria-labelledby` attribute will be set to the header element, if one exists.
@hero hero.svg @hero hero.svg
@demo demo/index.html @demo demo/index.html
@polymerBehavior Polymer.PaperDialogBehavior @polymerBehavior Polymer.PaperDialogBehavior
@ -101,16 +99,6 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
this.__prevWithBackdrop = this.withBackdrop; this.__prevWithBackdrop = this.withBackdrop;
}, },
attached: function() {
// this._observer is used by iron-overlay-behavior
this._ariaObserver = Polymer.dom(this).observeNodes(this._updateAriaLabelledBy);
this._updateAriaLabelledBy();
},
detached: function() {
Polymer.dom(this).unobserveNodes(this._ariaObserver);
},
_modalChanged: function(modal, readied) { _modalChanged: function(modal, readied) {
if (modal) { if (modal) {
this.setAttribute('aria-modal', 'true'); this.setAttribute('aria-modal', 'true');
@ -142,27 +130,6 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
} }
}, },
_updateAriaLabelledBy: function() {
var header = Polymer.dom(this).querySelector('h2');
if (!header) {
this.removeAttribute('aria-labelledby');
return;
}
var headerId = header.getAttribute('id');
if (headerId && this.getAttribute('aria-labelledby') === headerId) {
return;
}
// set aria-describedBy to the header element
var labelledById;
if (headerId) {
labelledById = headerId;
} else {
labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds();
header.setAttribute('id', labelledById);
}
this.setAttribute('aria-labelledby', labelledById);
},
_updateClosingReasonConfirmed: function(confirmed) { _updateClosingReasonConfirmed: function(confirmed) {
this.closingReason = this.closingReason || {}; this.closingReason = this.closingReason || {};
this.closingReason.confirmed = confirmed; this.closingReason.confirmed = confirmed;

View file

@ -143,16 +143,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script> <script>
// Firefox 43 and later will keep the focus on the search bar, so we need function runAfterOpen(dialog, callback) {
// to move the focus on the document for focus-related tests. dialog.addEventListener('iron-overlay-opened', callback);
function ensureDocumentHasFocus() {
window.top && window.top.focus();
}
function runAfterOpen(dialog, cb) {
dialog.addEventListener('iron-overlay-opened', function() {
cb();
});
dialog.open(); dialog.open();
} }
@ -333,45 +325,39 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}); });
test('multiple modal dialogs opened, handle focus change', function(done) { test('multiple modal dialogs opened, handle focus change', function(done) {
ensureDocumentHasFocus();
var dialogs = fixture('multiple'); var dialogs = fixture('multiple');
var focusChange = sinon.stub();
document.body.addEventListener('focus', focusChange, true);
runAfterOpen(dialogs[0], function() { runAfterOpen(dialogs[0], function() {
// Wait 10ms to allow focus changes runAfterOpen(dialogs[1], function() {
dialogs[1].async(dialogs[1].open, 10); // Each modal dialog will trap the focus within its children.
dialogs[1].addEventListener('iron-overlay-opened', function() { // Multiple modal dialogs doing it might result in an infinite loop
// Wait 10ms to allow focus changes // dialog1 focus -> dialog2 focus -> dialog1 focus -> dialog2 focus...
setTimeout(function() { // causing a "Maximum call stack size exceeded" error.
// Wait 50ms and verify this does not happen.
Polymer.Base.async(function() {
// Should not enter in an infinite loop. // Should not enter in an infinite loop.
assert.equal(focusChange.callCount, 2, 'focus change count');
done(); done();
}, 10); }, 50);
}); });
}); });
}); });
test('multiple modal dialogs opened, handle backdrop click', function(done) { test('multiple modal dialogs opened, handle outside click', function(done) {
ensureDocumentHasFocus();
var dialogs = fixture('multiple'); var dialogs = fixture('multiple');
var focusChange = sinon.stub();
document.body.addEventListener('focus', focusChange, true);
runAfterOpen(dialogs[0], function() { runAfterOpen(dialogs[0], function() {
// Wait 10ms to allow focus changes runAfterOpen(dialogs[1], function() {
dialogs[1].async(dialogs[1].open, 10); // Click should be handled only by dialogs[1].
dialogs[1].addEventListener('iron-overlay-opened', function() {
// This will trigger click listener for both dialogs.
MockInteractions.tap(document.body); MockInteractions.tap(document.body);
// Wait 10ms to allow focus changes // Each modal dialog will trap the focus within its children.
setTimeout(function() { // Multiple modal dialogs doing it might result in an infinite loop
// dialog1 focus -> dialog2 focus -> dialog1 focus -> dialog2 focus...
// causing a "Maximum call stack size exceeded" error.
// Wait 50ms and verify this does not happen.
Polymer.Base.async(function() {
// Should not enter in an infinite loop. // Should not enter in an infinite loop.
assert.equal(focusChange.callCount, 2, 'focus change count');
done(); done();
}, 10); }, 50);
}); });
}); });
}); });
@ -424,32 +410,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.equal(dialog.getAttribute('aria-modal'), 'true', 'has aria-modal="true"'); assert.equal(dialog.getAttribute('aria-modal'), 'true', 'has aria-modal="true"');
}); });
test('dialog with header has aria-labelledby', function() {
var dialog = fixture('header');
var header = Polymer.dom(dialog).querySelector('h2');
assert.ok(header.getAttribute('id'), 'header has auto-generated id');
assert.equal(dialog.getAttribute('aria-labelledby'), header.getAttribute('id'), 'aria-labelledby is set to header id');
});
test('dialog with lazily created header has aria-labelledby', function(done) {
var dialog = fixture('basic');
var header = document.createElement('h2');
Polymer.dom(dialog).appendChild(header);
Polymer.dom.flush();
setTimeout(function() {
assert.ok(header.getAttribute('id'), 'header has auto-generated id');
assert.equal(dialog.getAttribute('aria-labelledby'), header.getAttribute('id'), 'aria-labelledby is set to header id');
done();
}, 10);
});
test('dialog with header with id preserves id and has aria-labelledby', function() {
var dialog = fixture('header-with-id');
var header = Polymer.dom(dialog).querySelector('h2');
assert.equal(header.getAttribute('id'), 'header', 'header has preset id');
assert.equal(dialog.getAttribute('aria-labelledby'), 'header', 'aria-labelledby is set to header id');
});
}); });
</script> </script>

View file

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0" "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/paper-ripple", "homepage": "https://github.com/PolymerElements/paper-ripple",
"_release": "1.0.5", "_release": "1.0.5",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.5", "tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5" "commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
}, },
"_source": "git://github.com/polymerelements/paper-ripple.git", "_source": "git://github.com/PolymerElements/paper-ripple.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/paper-ripple" "_originalSource": "PolymerElements/paper-ripple"
} }