Language settings: fix focus issues

chrome/browser/resources/settings/languages_page/add_languages_dialog.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview 'settings-add-languages-dialog' is a dialog for enabling
  * languages.
  */
 Polymer({
   is: 'settings-add-languages-dialog',
@@ skipping 16 matching lines @@
 
     /** @private */
     disableActionButton_: {
       type: Boolean,
       value: true,
     },
   },
 
   attached: function() {
     this.$.dialog.showModal();
-    // Fire iron-resize after the list initially displays to prevent flickering.
-    setTimeout(function() {
-      this.$$('iron-list').fire('iron-resize');
-    }.bind(this));
+    // To prevent flashing the Cancel button focus, "focus" the disabled Add
+    // button, so nothing has a focus state until the afterShown_ call.
+    this.$$('.action-button').focus();

[stevenjb, 2016/11/28 17:49:16]

This seems klugey. Can we just blur the cancel button instead?

[michaelpg, 2016/12/01 23:19:13]

Done. Thought I had tried that!

+    setTimeout(this.afterShown_.bind(this));
   },
 
   /**
+   * Re-initializes the dialog after it is shown.
+   * @private
+   */
+  afterShown_: function() {
+    // Only fire iron-list after the list displayed to prevent flickering.

[stevenjb, 2016/11/28 17:49:16]

'fire iron-resize' ?

[michaelpg, 2016/12/01 23:19:13]

Done.

+    this.$$('iron-list').fire('iron-resize');
+
+    // Focus the top checkbox, assuming there are languages left to enable.
+    var firstCheckbox = this.$$('iron-list paper-checkbox');
+    if (firstCheckbox)
+      firstCheckbox.focus();
+  },
+
+  /**
    * Returns the supported languages that are not yet enabled, based on
    * the LanguageHelper's enabled languages list.
    * @param {!Array<!chrome.languageSettingsPrivate.Language>}
    *     supportedLanguages
    * @param {!Object} enabledLanguagesChange Polymer change record for
    *     |enabledLanguages|.
    * @return {!Array<!chrome.languageSettingsPrivate.Language>}
    * @private
    */
   getAvailableLanguages_: function(supportedLanguages, enabledLanguagesChange) {
@@ skipping 39 matching lines @@
   /**
    * Enables the checked languages.
    * @private
    */
   onActionButtonTap_: function() {
     this.$.dialog.close();
     for (var languageCode of this.languagesToAdd_)
       this.languageHelper.enableLanguage(languageCode);
   },
 });