From 8a84257fe0ebac0dc33178b21cc4b3fae66beae6 Mon Sep 17 00:00:00 2001 From: valdrinkoshi Date: Tue, 28 Jun 2016 15:59:21 +0200 Subject: [PATCH 1/9] add iron-focusables-helper --- iron-focusables-helper.html | 135 +++++++++++++++++++++++ iron-overlay-behavior.html | 41 +------ test/index.html | 2 + test/iron-focusables-helper.html | 178 +++++++++++++++++++++++++++++++ test/iron-overlay-behavior.html | 70 +++++++----- test/test-buttons-wrapper.html | 39 +++++++ test/test-buttons.html | 17 ++- 7 files changed, 404 insertions(+), 78 deletions(-) create mode 100644 iron-focusables-helper.html create mode 100644 test/iron-focusables-helper.html create mode 100644 test/test-buttons-wrapper.html diff --git a/iron-focusables-helper.html b/iron-focusables-helper.html new file mode 100644 index 0000000..54f30b1 --- /dev/null +++ b/iron-focusables-helper.html @@ -0,0 +1,135 @@ + + + + + diff --git a/iron-overlay-behavior.html b/iron-overlay-behavior.html index 7c92333..af3be8e 100644 --- a/iron-overlay-behavior.html +++ b/iron-overlay-behavior.html @@ -12,6 +12,7 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/iron-overlay-behavior.html b/test/iron-overlay-behavior.html index 1274f7c..eacb362 100644 --- a/test/iron-overlay-behavior.html +++ b/test/iron-overlay-behavior.html @@ -561,44 +561,56 @@

Focusables (with tabindex)

overlayFocusableNodes = f[2]; }); - test('_focusableNodes returns nodes that are focusable', function() { - var focusableNodes = overlay._focusableNodes; - assert.equal(focusableNodes.length, 3, '3 nodes are focusable'); - assert.equal(focusableNodes[0], Polymer.dom(overlay).querySelector('.focusable1')); - assert.equal(focusableNodes[1], Polymer.dom(overlay).querySelector('.focusable2')); - assert.equal(focusableNodes[2], Polymer.dom(overlay).querySelector('.focusable3')); + test('_focusableNodes returns nodes that are focusable', function(done) { + runAfterOpen(overlay, function() { + var focusableNodes = overlay._focusableNodes; + assert.equal(focusableNodes.length, 3, '3 nodes are focusable'); + assert.equal(focusableNodes[0], Polymer.dom(overlay).querySelector('.focusable1')); + assert.equal(focusableNodes[1], Polymer.dom(overlay).querySelector('.focusable2')); + assert.equal(focusableNodes[2], Polymer.dom(overlay).querySelector('.focusable3')); + done(); + }); }); - test('_focusableNodes includes overlay if it has a valid tabindex', function() { - overlay.setAttribute('tabindex', '0'); - var focusableNodes = overlay._focusableNodes; - assert.equal(focusableNodes.length, 4, '4 focusable nodes'); - assert.notEqual(focusableNodes.indexOf(overlay), -1, 'overlay is included'); + test('_focusableNodes includes overlay if it has a valid tabindex', function(done) { + runAfterOpen(overlay, function() { + overlay.setAttribute('tabindex', '0'); + var focusableNodes = overlay._focusableNodes; + assert.equal(focusableNodes.length, 4, '4 focusable nodes'); + assert.notEqual(focusableNodes.indexOf(overlay), -1, 'overlay is included'); + done(); + }); }); - test('_focusableNodes respects the tabindex order', function() { - var focusableNodes = overlayWithTabIndex._focusableNodes; - assert.equal(focusableNodes.length, 6, '6 nodes are focusable'); - assert.equal(focusableNodes[0], Polymer.dom(overlayWithTabIndex).querySelector('.focusable1')); - assert.equal(focusableNodes[1], Polymer.dom(overlayWithTabIndex).querySelector('.focusable2')); - assert.equal(focusableNodes[2], Polymer.dom(overlayWithTabIndex).querySelector('.focusable3')); - assert.equal(focusableNodes[3], Polymer.dom(overlayWithTabIndex).querySelector('.focusable4')); - assert.equal(focusableNodes[4], Polymer.dom(overlayWithTabIndex).querySelector('.focusable5')); - assert.equal(focusableNodes[5], Polymer.dom(overlayWithTabIndex).querySelector('.focusable6')); + test('_focusableNodes respects the tabindex order', function(done) { + runAfterOpen(overlayWithTabIndex, function() { + var focusableNodes = overlayWithTabIndex._focusableNodes; + assert.equal(focusableNodes.length, 6, '6 nodes are focusable'); + assert.equal(focusableNodes[0], Polymer.dom(overlayWithTabIndex).querySelector('.focusable1')); + assert.equal(focusableNodes[1], Polymer.dom(overlayWithTabIndex).querySelector('.focusable2')); + assert.equal(focusableNodes[2], Polymer.dom(overlayWithTabIndex).querySelector('.focusable3')); + assert.equal(focusableNodes[3], Polymer.dom(overlayWithTabIndex).querySelector('.focusable4')); + assert.equal(focusableNodes[4], Polymer.dom(overlayWithTabIndex).querySelector('.focusable5')); + assert.equal(focusableNodes[5], Polymer.dom(overlayWithTabIndex).querySelector('.focusable6')); + done(); + }); }); - test('_focusableNodes can be overridden', function() { - // It has 1 focusable in the light dom, and 2 in the shadow dom. - var focusableNodes = overlayFocusableNodes._focusableNodes; - assert.equal(focusableNodes.length, 2, 'length ok'); - assert.equal(focusableNodes[0], overlayFocusableNodes.$.first, 'first ok'); - assert.equal(focusableNodes[1], overlayFocusableNodes.$.last, 'last ok'); + test('_focusableNodes can be overridden', function(done) { + runAfterOpen(overlayFocusableNodes, function() { + // It has 1 focusable in the light dom, and 2 in the shadow dom. + var focusableNodes = overlayFocusableNodes._focusableNodes; + assert.equal(focusableNodes.length, 2, 'length ok'); + assert.equal(focusableNodes[0], overlayFocusableNodes.$.first, 'first ok'); + assert.equal(focusableNodes[1], overlayFocusableNodes.$.last, 'last ok'); + done(); + }); }); test('with-backdrop: TAB & Shift+TAB wrap focus', function(done) { overlay.withBackdrop = true; - var focusableNodes = overlay._focusableNodes; runAfterOpen(overlay, function() { + var focusableNodes = overlay._focusableNodes; // 1ms timeout needed by IE10 to have proper focus switching. Polymer.Base.async(function() { // Go to last element. @@ -625,8 +637,8 @@

Focusables (with tabindex)

test('with-backdrop: TAB & Shift+TAB wrap focus respecting tabindex', function(done) { overlayWithTabIndex.withBackdrop = true; - var focusableNodes = overlayWithTabIndex._focusableNodes; runAfterOpen(overlayWithTabIndex, function() { + var focusableNodes = overlayWithTabIndex._focusableNodes; // 1ms timeout needed by IE10 to have proper focus switching. Polymer.Base.async(function() { // Go to last element. @@ -644,8 +656,8 @@

Focusables (with tabindex)

test('with-backdrop: Shift+TAB after open wrap focus', function(done) { overlay.withBackdrop = true; - var focusableNodes = overlay._focusableNodes; runAfterOpen(overlay, function() { + var focusableNodes = overlay._focusableNodes; // 1ms timeout needed by IE10 to have proper focus switching. Polymer.Base.async(function() { // Spy keydown. diff --git a/test/test-buttons-wrapper.html b/test/test-buttons-wrapper.html new file mode 100644 index 0000000..4e669ab --- /dev/null +++ b/test/test-buttons-wrapper.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + diff --git a/test/test-buttons.html b/test/test-buttons.html index 9ed1fbe..05434a0 100644 --- a/test/test-buttons.html +++ b/test/test-buttons.html @@ -14,6 +14,7 @@