-
@@ -492,6 +496,25 @@ Custom property | Description | Default
value: 'paper-drawer-toggle'
},
+ /**
+ * The CSS selector for the element that should receive focus when the drawer is open.
+ * By default, when the drawer opens, it focuses the first tabbable element. That is,
+ * the first element that can receive focus.
+ */
+ drawerFocusSelector: {
+ type: String,
+ value:
+ 'a[href]:not([tabindex="-1"]),'+
+ 'area[href]:not([tabindex="-1"]),'+
+ 'input:not([disabled]):not([tabindex="-1"]),'+
+ 'select:not([disabled]):not([tabindex="-1"]),'+
+ 'textarea:not([disabled]):not([tabindex="-1"]),'+
+ 'button:not([disabled]):not([tabindex="-1"]),'+
+ 'iframe:not([tabindex="-1"]),'+
+ '[tabindex]:not([tabindex="-1"]),'+
+ '[contentEditable=true]:not([tabindex="-1"])'
+ },
+
/**
* Whether the transition is enabled.
*/
@@ -506,13 +529,22 @@ Custom property | Description | Default
tap: '_onTap',
track: '_onTrack',
down: '_downHandler',
- up: '_upHandler'
+ up: '_upHandler',
+ transitionend: '_onTransitionEnd'
},
observers: [
- '_forceNarrowChanged(forceNarrow, defaultSelected)'
+ '_forceNarrowChanged(forceNarrow, defaultSelected)',
+ '_toggleFocusListener(selected)'
],
+ ready: function() {
+ // Avoid transition at the beginning e.g. page loads and enable
+ // transitions only after the element is rendered and ready.
+ this._transition = true;
+ this._boundFocusListener = this._didFocus.bind(this);
+ },
+
/**
* Toggles the panel open and closed.
*
@@ -544,16 +576,19 @@ Custom property | Description | Default
this.selected = 'main';
},
- ready: function() {
- // Avoid transition at the beginning e.g. page loads and enable
- // transitions only after the element is rendered and ready.
- this._transition = true;
- },
-
- _onMainTransitionEnd: function (e) {
- if (e.currentTarget === this.$.main && (e.propertyName === 'left' || e.propertyName === 'right')) {
+ _onTransitionEnd: function (e) {
+ var target = Polymer.dom(e).localTarget;
+ if (target !== this) {
+ // ignore events coming from the light dom
+ return;
+ }
+ if (e.propertyName === 'left' || e.propertyName === 'right') {
this.notifyResize();
}
+ if (e.propertyName === 'transform' && this.selected === 'drawer') {
+ var focusedChild = this._getAutoFocusedNode();
+ focusedChild && focusedChild.focus();
+ }
},
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
@@ -606,15 +641,12 @@ Custom property | Description | Default
this._trackEnd(event);
break;
}
-
},
_responsiveChange: function(narrow) {
this._setNarrow(narrow);
- if (this.narrow) {
- this.selected = this.defaultSelected;
- }
+ this.selected = this.narrow ? this.defaultSelected : null;
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', {narrow: this.narrow});
@@ -724,12 +756,6 @@ Custom property | Description | Default
}
this._setPeeking(false);
}
- var dy = event.detail.dy;
- var absDy = Math.abs(dy);
- if (absDy >= 70) {
- // Ignore trackx until we move past the edge peek.
- return;
- }
this._moveDrawer(this._translateXForDeltaX(dx));
}
@@ -743,13 +769,11 @@ Custom property | Description | Default
this._transition = true;
sharedPanel = null;
this._moveDrawer(null);
- var dx = event.detail.dx;
- var dy = event.detail.dy;
- var absDy = Math.abs(dy);
+
if (this.rightDrawer) {
- this[xDirection ? 'closeDrawer' : 'openDrawer']();
+ this[xDirection ? 'closeDrawer' : 'openDrawer']();
} else {
- this[xDirection || dx > -80 || absDy >= 70 ? 'openDrawer' : 'closeDrawer']();
+ this[xDirection ? 'openDrawer' : 'closeDrawer']();
}
}
},
@@ -758,16 +782,51 @@ Custom property | Description | Default
if (translateX === null) {
return '';
}
-
return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
'translate3d(' + translateX + 'px, 0, 0)';
},
_moveDrawer: function(translateX) {
this.transform(this._transformForTranslateX(translateX), this.$.drawer);
- }
+ },
+ _getDrawerContent: function() {
+ return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0];
+ },
+
+ _getAutoFocusedNode: function() {
+ var drawerContent = this._getDrawerContent();
+ return Polymer.dom(drawerContent).querySelector(this.drawerFocusSelector) || drawerContent;
+ },
+
+ _toggleFocusListener: function(selected) {
+ if (selected === 'drawer') {
+ document.addEventListener('focus', this._boundFocusListener, true);
+ } else {
+ document.removeEventListener('focus', this._boundFocusListener, true);
+ }
+ },
+
+ _didFocus: function(event) {
+ var path = Polymer.dom(event).path;
+ var focusedChild = path[0];
+ var drawerContent = this._getDrawerContent();
+ var focusedChildCameFromDrawer = false;
+ var autoFocusedNode = this._getAutoFocusedNode();
+
+ while (!focusedChildCameFromDrawer && path[0] && path[0].hasAttribute) {
+ focusedChildCameFromDrawer = path.shift() === drawerContent;
+ }
+ if (!focusedChildCameFromDrawer && autoFocusedNode) {
+ autoFocusedNode.focus();
+ }
+ },
+
+ _isDrawerClosed: function(narrow, selected) {
+ return !narrow || selected !== 'drawer';
+ }
});
+
}());
diff --git a/dashboard-ui/bower_components/paper-drawer-panel/test/focus.html b/dashboard-ui/bower_components/paper-drawer-panel/test/focus.html
new file mode 100644
index 000000000..5246f0e0b
--- /dev/null
+++ b/dashboard-ui/bower_components/paper-drawer-panel/test/focus.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
+
+
+
+
+