MD Settings: Update spell check section to spec

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">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="language_detail_page.html">
 <link rel="import" href="languages.html">
 <link rel="import" href="manage_languages_page.html">
 
@@ skipping 99 matching lines @@
             <div>$i18n{spellCheckListTitle}</div>
             <div class="secondary">
               [[getSpellCheckSecondaryText_(languages.enabled.*)]]
             </div>
           </div>
           <cr-expand-button expanded="{{spellCheckOpened_}}">
           </cr-expand-button>
         </div>
         <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]">
           <div class="list-frame vertical-list">
-            <template is="dom-repeat"
-                items="[[spellCheckLanguages_(languages.enabled.*)]]">
+            <template is="dom-repeat" items="[[languages.enabled]]">
               <div class="list-item">
-                <div class="start">
-                  <paper-checkbox
-                      checked="[[item.spellCheckEnabled]]"
-                      on-change="onSpellCheckChange_">
+                <label class="start"
+                    id="supportsSpellCheckLabel-[[item.language.code]]">
+                  <span disabled$="[[!item.language.supportsSpellcheck]]">

[dschuyler, 2016/06/20 22:46:31]

Can we disable the label? (Is the 
nesting into a <span> necessary)?

[michaelpg, 2016/06/20 23:09:34]

I specifically don't want to, because it's common practice to nest input
controls inside labels. In which case, we'd still have to set the disabled
attributes on Polymer elements, and the opacity styles from the label and the
Polymer element would stack.

May not be an issue in practice. LMKWYT.

[dschuyler, 2016/06/20 23:46:25]

Just an opinion, but I'd rather that it
wasn't common practice to put controls
in something called a label :) Thank
you for explaining the reason for it.

                     [[item.language.displayName]]
-                  </paper-checkbox>
-                </div>
-                <paper-icon-button icon="cr:settings"
-                    on-tap="onShowLanguageDetailTap_"></paper-icon-button>
-              </div>
+                  </span>
+                </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_">
               $i18n{manageSpellCheck}
             </div>
           </div>
         </iron-collapse>
 </if>
       </neon-animatable>
       <template is="dom-if" name="manage-languages">
         <settings-subpage page-title="$i18n{manageLanguagesPageTitle}">
@@ skipping 21 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>