Fix style issues with MD accessibility page

chrome/browser/resources/settings/a11y_page/manage_a11y_page.html

+<link rel="import" href="chrome://resources/html/action_link.html">

[dschuyler, 2016/09/27 22:41:27]

WDYT about making a Polymer-ish control 
for action-link? I just wondered if that
would be a good place to put the styling
I mention in the next note.

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/settings_vars_css.html">
 
 <dom-module id="settings-manage-a11y-page">
+  <link rel="import" type="css" href="chrome://resources/css/action_link.css">

[dschuyler, 2016/09/27 22:41:27]

Ah, this method importing css is deprecated.
(I know there is still code doing it, but we're
trying to not add more).
Could we make any needed changes in 
settings_shared_css.html and avoid doing an
import here?

The new way to access css is either with a
<style include=""> like line 12 below. Or,
by inlining it where it's needed (like line
13 below).

The way to choose which to do is based on
whether the css is a one-off or is used 
in several settings pages.

[Dan Beam, 2016/09/27 22:51:17]

for future reference: action_link.css is used by old webui via <link
rel="stylesheet"> so it gets a free pass from this rule

also, Polymer has not yet decided when removing type="css" will happen because
many people (including those in Google) prefer to keep their css in an external
.css file instead of in an .html file like we are

   <template>
     <style include="settings-shared">
       .indented {
         -webkit-margin-start: 20px;
       }
 
       .no-top-border {
         border-top: none;
       }
 
-      h3 {
-        color: var(--settings-nav-grey);
-        font-weight: 500;
-      }
-
       .settings-box iron-icon {
         -webkit-margin-end: var(--iron-icon-spacing);
       }
 
       .settings-box settings-checkbox {
         flex-grow: 1;
       }
+
+      .list-item settings-dropdown-menu {
+        margin-left: 16px;
+      }
     </style>
     <div class="settings-box row first">
       <span>
         $i18n{a11yExplanation}
-        <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank">
+        <a href="$i18nRaw{a11yLearnMoreUrl}" target="_blank" is="action-link">

[Dan Beam, 2016/09/27 22:50:00]

Dominic: I added <a is="action-link"> for when something looks like a link but
needs to handle an action (i.e. in JS).

why are you using it here when this <a>... is already a link?  is there some
a11y benefit?  is it just for styling?

[dmazzoni, 2016/09/27 22:53:38]

I asked Hector and Dave and they said that this was the preferred way to
get the same visual style.

Should we have a css class? Or should there just be a style rule in
settings_shared_css.html that applies to all links?

[Dan Beam, 2016/09/27 22:56:02]

I think we probably just need to update this:
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/settin...

to include a:link or a[href] or maybe a (I guess)

           $i18n{learnMore}
         </a>
       </span>
     </div>
 
     <div class="settings-box block">
-      <h3>$i18n{textToSpeechHeading}</h3>
+      <h2>$i18n{textToSpeechHeading}</h2>
       <div class="settings-box first indented">
         <settings-checkbox pref="{{prefs.settings.accessibility}}"
             label="$i18n{chromeVoxLabel}">
         </settings-checkbox>
         <paper-icon-button icon="cr:settings" on-tap="onChromeVoxSettingsTap_">
         </paper-icon-button>
       </div>
       <template is="dom-if" if="[[showExperimentalFeatures_]]">
         <div class="settings-box no-top-border indented">
           <settings-checkbox pref="{{prefs.settings.a11y.select_to_speak}}"
               label="$i18n{selectToSpeakTitle}"
               sub-label="$i18n{selectToSpeakDescription}">
           </settings-checkbox>
         </div>
       </template>
 
-      <h3>$i18n{displayHeading}</h3>
+      <h2>$i18n{displayHeading}</h2>
       <div class="settings-box block first indented">
         <settings-checkbox label="$i18n{highContrastLabel}"
             pref="{{prefs.settings.a11y.high_contrast_enabled}}">
         </settings-checkbox>
         <settings-checkbox label="$i18n{screenMagnifierLabel}"
             pref="{{prefs.settings.a11y.screen_magnifier}}">
         </settings-checkbox>
       </div>
       <div class="settings-box two-line indented" on-tap="onDisplayTap_"
           actionable>
         <iron-icon icon="settings:desktop-windows"></iron-icon>
         <div class="start">
           <div>$i18n{displaySettingsTitle}</div>
           <div class="secondary">$i18n{displaySettingsDescription}</div>
         </div>
       </div>
       <div class="settings-box two-line indented" on-tap="onAppearanceTap_"
           actionable>
         <iron-icon icon="settings:text-format"></iron-icon>
         <div class="start">
           <div>$i18n{appearanceSettingsTitle}</div>
           <div class="secondary">$i18n{appearanceSettingsDescription}</div>
         </div>
       </div>
 
-      <h3>$i18n{keyboardHeading}</h3>
+      <h2>$i18n{keyboardHeading}</h2>
       <div class="settings-box block first indented">
         <settings-checkbox
             pref="{{prefs.settings.a11y.sticky_keys_enabled}}"
             label="$i18n{stickyKeysLabel}">
         </settings-checkbox>
         <settings-checkbox pref="{{prefs.settings.a11y.virtual_keyboard}}"
             label="$i18n{onScreenKeyboardLabel}">
         </settings-checkbox>
         <settings-checkbox pref="{{prefs.settings.a11y.focus_highlight}}"
             label="$i18n{focusHighlightLabel}">
         </settings-checkbox>
         <settings-checkbox pref="{{prefs.settings.a11y.caret_highlight}}"
             label="$i18n{caretHighlightLabel}">
         </settings-checkbox>
         <template is="dom-if" if="[[showExperimentalFeatures_]]">
           <settings-checkbox pref="{{prefs.settings.a11y.switch_access}}"
               label="$i18n{switchAccessLabel}">
           </settings-checkbox>
         </template>
       </div>
       <div class="settings-box two-line indented" on-tap="onKeyboardTap_"
           actionable>
         <iron-icon icon="settings:keyboard"></iron-icon>
         <div class="start">
           <div>$i18n{keyboardSettingsTitle}</div>
           <div class="secondary">$i18n{keyboardSettingsDescription}</div>
         </div>
       </div>
 
-      <h3>$i18n{mouseAndTouchpadHeading}</h3>
+      <h2>$i18n{mouseAndTouchpadHeading}</h2>
       <div class="settings-box block first indented">
         <settings-checkbox label="$i18n{clickOnStopLabel}"
             pref="{{prefs.settings.a11y.autoclick}}">
         </settings-checkbox>
         <div class="list-item settings-checkbox-spacer">
           <div>$i18n{delayBeforeClickLabel}</div>
           <settings-dropdown-menu
               pref="{{prefs.settings.a11y.autoclick_delay_ms}}"
               menu-options="[[autoClickDelayOptions_]]">
           </settings-dropdown-menu>
@@ skipping 10 matching lines @@
       </div>
       <div class="settings-box two-line indented" on-tap="onMouseTap_"
           actionable>
         <iron-icon icon="settings:mouse"></iron-icon>
         <div class="start">
           <div>$i18n{mouseSettingsTitle}</div>
           <div class="secondary">$i18n{mouseSettingsDescription}</div>
         </div>
       </div>
 
-      <h3>$i18n{audioHeading}</h3>
+      <h2>$i18n{audioHeading}</h2>
       <div class="settings-box block first indented">
         <settings-checkbox pref="{{prefs.settings.a11y.mono_audio}}"
             label="$i18n{monoAudioLabel}">
         </settings-checkbox>
       </div>
     </div>
 
     <div class="settings-box two-line" on-tap="onMoreFeaturesTap_" actionable>
       <div class="start">
         <div>$i18n{additionalFeaturesTitle}</div>
         <div class="secondary">$i18n{additionalFeaturesDescription}</div>
       </div>
     </div>
   </template>
   <script src="manage_a11y_page.js"></script>
 </dom-module>