Merge "Restores a11y tabbing behavior to gr-reply-dialog"

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js

@@ -268,7 +268,7 @@
 
     _handleReplyTap: function(e) {
       e.preventDefault();
-      this.$.replyOverlay.open();
+      this._openReplyDialog();
     },
 
     _handleDownloadTap: function(e) {
@@ -285,7 +285,7 @@
       var quoteStr = msg.split('\n').map(
           function(line) { return '> ' + line; }).join('\n') + '\n\n';
       this.$.replyDialog.draft += quoteStr;
-      this.$.replyOverlay.open();
+      this._openReplyDialog();
     },
 
     _handleReplyOverlayOpen: function(e) {
@@ -350,7 +350,7 @@
         if (!loggedIn) { return; }
 
         if (this.viewState.showReplyDialog) {
-          this.$.replyOverlay.open();
+          this._openReplyDialog();
           this.async(function() { this.$.replyOverlay.center(); }, 1);
           this.set('viewState.showReplyDialog', false);
         }
@@ -471,7 +471,7 @@
           if (!this._loggedIn) { return; }
 
           e.preventDefault();
-          this.$.replyOverlay.open();
+          this._openReplyDialog();
           break;
         case 85:  // 'u'
           e.preventDefault();
@@ -480,6 +480,12 @@
       }
     },
 
+    _openReplyDialog: function() {
+      this.$.replyOverlay.open().then(function() {
+        this.$.replyOverlay.setFocusStops(this.$.replyDialog.getFocusStops());
+      }.bind(this));
+    },
+
     _handleReloadChange: function() {
       page.show(this.changePath(this._changeNum));
     },

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -148,7 +148,10 @@ limitations under the License.
       </section>
       <section class="actionsContainer">
         <gr-button primary class="action send" on-tap="_sendTapHandler">Send</gr-button>
-        <gr-button class="action cancel" on-tap="_cancelTapHandler">Cancel</gr-button>
+        <gr-button
+            id="cancelButton"
+            class="action cancel"
+            on-tap="_cancelTapHandler">Cancel</gr-button>
       </section>
     </div>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js

@@ -65,6 +65,13 @@
       }.bind(this));
     },
 
+    getFocusStops: function() {
+      return {
+        start: this.$.textarea.$.textarea,
+        end: this.$.cancelButton,
+      };
+    },
+
     _computeShowLabels: function(patchNum, revisions) {
       var num = parseInt(patchNum, 10);
       for (var rev in revisions) {

polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.js

@@ -14,6 +14,9 @@
 (function() {
   'use strict';
 
+  var AWAIT_MAX_ITERS = 10;
+  var AWAIT_STEP = 5;
+
   Polymer({
     is: 'gr-overlay',
 
@@ -27,8 +30,11 @@
     },
 
     open: function() {
-      Gerrit.KeyboardShortcutBehavior.enabled = false;
-      Polymer.IronOverlayBehaviorImpl.open.apply(this, arguments);
+      return new Promise(function(resolve) {
+        Gerrit.KeyboardShortcutBehavior.enabled = false;
+        Polymer.IronOverlayBehaviorImpl.open.apply(this, arguments);
+        this._awaitOpen(resolve);
+      }.bind(this));
     },
 
     close: function() {
@@ -40,5 +46,31 @@
       Gerrit.KeyboardShortcutBehavior.enabled = true;
       Polymer.IronOverlayBehaviorImpl.cancel.apply(this, arguments);
     },
+
+    /**
+     * Override the focus stops that iron-overlay-behavior tries to find.
+     */
+    setFocusStops: function(stops) {
+      this.__firstFocusableNode = stops.start;
+      this.__lastFocusableNode = stops.end;
+    },
+
+    /**
+     * NOTE: (wyatta) Slightly hacky way to listen to the overlay actually
+     * opening. Eventually replace with a direct way to listen to the overlay.
+     */
+    _awaitOpen: function(fn) {
+      var iters = 0;
+      function step() {
+        this.async(function() {
+          if (this.style.display !== 'none') {
+            fn.call(this);
+          } else if (iters++ < AWAIT_MAX_ITERS) {
+            step.call(this);
+          }
+        }.bind(this), AWAIT_STEP);
+      };
+      step.call(this);
+    },
   });
 })();