MD Settings: make custom UIs look "actionable"

chrome/browser/resources/settings/languages_page/languages_page.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/iron-icon/iron-icon.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-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
@@ skipping 27 matching lines @@
               [[getProspectiveUILanguageName_(
                     languages, prefs.intl.app_locale.value)]]
             </div>
           </div>
           <cr-expand-button expanded="{{languagesOpened_}}">
           </cr-expand-button>
         </div>
         <iron-collapse id="languagesCollapse" opened="[[languagesOpened_]]">
           <div class="list-frame vertical-list">
             <template is="dom-repeat" items="[[languages.enabled]]">
               <div class$="list-item [[getLanguageItemClass_(

[dpapad, 2016/06/23 22:07:45]

Similarly to menu-item, this could be done as follows,

.list-item {
 --@apply(--settings-actionable);
}

[Dan Beam, 2016/06/23 23:31:49]

there's nothing about being an item in a list that is inherently actionable, but
being a list-button is
Done.

                       item.language.code, prefs.intl.app_locale.value)]]"
-                  on-tap="onLanguageTap_">
+                  on-tap="onLanguageTap_" actionable>
 <if expr="not chromeos and not is_win">
                 <div class="start" title="[[item.language.nativeDisplayName]]">
                   [[item.language.displayName]]
                 </div>
 </if>
 <if expr="chromeos or is_win">
                 <div title="[[item.language.nativeDisplayName]]">
                   [[item.language.displayName]]
                 </div>
                 <div class="middle">
                   <iron-icon icon="settings:done"
                       hidden$="[[!isProspectiveUILanguage_(
                           item.language.code, prefs.intl.app_locale.value)]]">
                   </iron-icon>
                 </div>
 </if>
                 <paper-icon-button icon="cr:settings"
                     on-tap="onShowLanguageDetailTap_"></paper-icon-button>
               </div>
             </template>
-            <div class="list-item list-button" on-tap="onManageLanguagesTap_">
+            <div class="list-item list-button" on-tap="onManageLanguagesTap_"
+                actionable>
               $i18n{manageLanguages}
             </div>
           </div>
         </iron-collapse>
 <if expr="chromeos">
         <div class="settings-box two-line">
           <div class="start">
             <div>$i18n{inputMethodsListTitle}</div>
             <div class="secondary">
               [[getInputMethodName_(languages.inputMethods.currentId)]]
             </div>
           </div>
           <cr-expand-button expanded="{{inputMethodsOpened_}}">
           </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_">
+                  on-tap="onInputMethodTap_" actionable>
                 <div>[[item.displayName]]</div>
                 <div class="middle">
                   <iron-icon icon="settings:done"
                       hidden$="[[!isCurrentInputMethod_(
                           item.id, languages.inputMethods.currentId)]]">
                   </iron-icon>
                 </div>
                 <paper-icon-button icon="cr:settings"
                     on-tap="onInputMethodOptionsTap_"
                     hidden$="[[!item.hasOptionsPage]]">
                 </paper-icon-button>
               </div>
             </template>
-            <div class="list-item list-button"
+            <div class="list-item list-button" actionable
                 on-tap="onManageInputMethodsTap_">
               $i18n{manageInputMethods}
             </div>
           </div>
         </iron-collapse>
 </if>
 <if expr="not is_macosx">
         <div class="settings-box two-line">
           <div class="start">
             <div>$i18n{spellCheckListTitle}</div>
@@ skipping 16 matching lines @@
                 </label>
                 <paper-toggle-button
                     checked="[[item.spellCheckEnabled]]"
                     on-change="onSpellCheckChange_"
                     disabled$="[[!item.language.supportsSpellcheck]]"
                     aria-labelledby=
                         "supportsSpellCheckLabel-[[item.language.code]]">
                 </paper-toggle-button>
               </label>
             </template>
-            <div class="list-item list-button" on-tap="onEditDictionaryTap_">
+            <div class="list-item list-button" on-tap="onEditDictionaryTap_"
+                actionable>
               $i18n{manageSpellCheck}
             </div>
           </div>
         </iron-collapse>
 </if>
       </neon-animatable>
       <template is="dom-if" name="manage-languages">
         <settings-subpage page-title="$i18n{manageLanguagesPageTitle}">
           <settings-manage-languages-page
               prefs="{{prefs}}"></settings-manage-languages-page>
@@ skipping 19 matching lines @@
       <template is="dom-if" name="edit-dictionary">
         <settings-subpage page-title="$i18n{editDictionaryPageTitle}">
           <settings-edit-dictionary-page></settings-edit-dictionary-page>
         </settings-subpage>
       </template>
 </if>
     </settings-animated-pages>
   </template>
   <script src="languages_page.js"></script>
 </dom-module>