Language settings: fix focus issues

chrome/browser/resources/settings/languages_page/languages_page.html

+<link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
@@ skipping 52 matching lines @@
       #uiLanguageItem:focus,
       #offerTranslations:focus {
         background-color: transparent;
       }
     </style>
     <settings-languages languages="{{languages}}" prefs="{{prefs}}"
         language-helper="{{languageHelper}}">
     </settings-languages>
     <settings-animated-pages id="pages" section="languages">
       <neon-animatable route-path="default">
-        <div class$="settings-box first [[getLanguageListTwoLine_()]]">
+        <div class$="settings-box first [[getLanguageListTwoLine_()]]"
+            actionable on-tap="toggleExpandButton_">
           <div class="start">
             <div>$i18n{languagesListTitle}</div>
 <if expr="chromeos or is_win">
             <div class="secondary">
               [[getProspectiveUILanguageName_(
                     languages, prefs.intl.app_locale.value)]]
             </div>
 </if>
           </div>
           <cr-expand-button expanded="{{languagesOpened_}}"
@@ skipping 32 matching lines @@
                     $i18n{restart}
                   </paper-button>
                 </template>
 </if>
                 <paper-icon-button id="more-[[item.language.code]]"
                     icon="cr:more-vert" on-tap="onDotsTap_">
                 </paper-icon-button>
               </div>
             </template>
             <div class="list-item list-button" on-tap="onAddLanguagesTap_">
-              $i18n{addLanguages}
+              <a is="action-link">$i18n{addLanguages}</a>
             </div>
           </div>
         </iron-collapse>
 <if expr="chromeos">
         <div id="manage-input-methods-subpage-trigger"
-              class="settings-box two-line">
+            class="settings-box two-line" actionable
+            on-tap="toggleExpandButton_">
           <div class="start">
             <div>$i18n{inputMethodsListTitle}</div>
             <div class="secondary">
               [[getInputMethodName_(languages.inputMethods.currentId)]]
             </div>
           </div>
           <cr-expand-button expanded="{{inputMethodsOpened_}}"
               alt="$i18n{inputMethodsExpandA11yLabel}">
           </cr-expand-button>
         </div>
         <iron-collapse id="inputMethodsCollapse"
             opened="[[inputMethodsOpened_]]">
           <div class="list-frame vertical-list">
             <template is="dom-repeat"
                 items="[[languages.inputMethods.enabled]]">
               <div class$="list-item [[getInputMethodItemClass_(
                       item.id, languages.inputMethods.currentId)]]"
-                  on-tap="onInputMethodTap_" actionable>
+                  on-tap="onInputMethodTap_" on-keypress="onInputMethodTap_"
+                  actionable tabindex="0">
                 <div class="start">
                   <div>[[item.displayName]]</div>
                   <div class="explain-selected"
                       hidden="[[!isCurrentInputMethod_(
                           item.id, languages.inputMethods.currentId)]]">
                     $i18n{inputMethodEnabled}
                   </div>
                 </div>
                 <paper-icon-button icon="cr:settings"
                     on-tap="onInputMethodOptionsTap_"
                     hidden="[[!item.hasOptionsPage]]">
                 </paper-icon-button>
               </div>
             </template>
             <div class="list-item list-button"
                 on-tap="onManageInputMethodsTap_">
-              $i18n{manageInputMethods}
+              <a is="action-link">$i18n{manageInputMethods}</a>
             </div>
           </div>
         </iron-collapse>
 </if>
 <if expr="not is_macosx">
-        <div id="spellcheck-subpage-trigger" class="settings-box two-line">
+        <div id="spellcheck-subpage-trigger"
+            class$="settings-box [[getSpellcheckListTwoLine_(

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

Note this additional change... originally I didn't want the box to change in
height if you check/uncheck spellcheck, but that's minor. It looks ugly when
it's two-line but only has one line of text, so the conditional seems worth it.

+                languages.enabled.*)]]"
+            actionable on-tap="toggleExpandButton_">
           <div class="start">
             <div>$i18n{spellCheckListTitle}</div>
             <div class="secondary">
               [[getSpellCheckSecondaryText_(languages.enabled.*)]]
             </div>
           </div>
           <cr-expand-button expanded="{{spellCheckOpened_}}"
               alt="$i18n{spellCheckExpandA11yLabel}">
           </cr-expand-button>
         </div>
         <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]">
           <div class="list-frame vertical-list">
             <template is="dom-repeat" items="[[languages.enabled]]">
               <div class="list-item">
                 <paper-checkbox
                     checked="[[item.spellCheckEnabled]]"
                     on-change="onSpellCheckChange_"
                     disabled$="[[!item.language.supportsSpellcheck]]">
                   [[item.language.displayName]]
                 </paper-checkbox>
               </label>
             </template>
             <div class="list-item list-button" on-tap="onEditDictionaryTap_">
-              $i18n{manageSpellCheck}
+              <a is="action-link">$i18n{manageSpellCheck}</a>
             </div>
           </div>
         </iron-collapse>
 </if>
         <template is="cr-lazy-render" id="menu">
           <dialog is="cr-action-menu"
               class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
 <if expr="chromeos or is_win">
             <paper-checkbox id="uiLanguageItem" class="dropdown-item"
                 checked="[[isProspectiveUILanguage_(
@@ skipping 62 matching lines @@
 </if>
     </settings-animated-pages>
     <template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp>
       <settings-add-languages-dialog languages="{{languages}}"
           language-helper="[[languageHelper]]">
       </settings-add-languages-dialog>
     </template>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>