Fix style issues with MD accessibility page

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

Index: chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
diff --git a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
index c55a60df3147242972f4721c6b43cf9538a1eebc..c423fc4fa97508e88f00c3c216e16b115336658d 100644
--- a/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
+++ b/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html
@@ -1,3 +1,4 @@
+<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">
@@ -6,6 +7,7 @@
 <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 {
@@ -16,11 +18,6 @@
         border-top: none;
       }
 
-      h3 {
-        color: var(--settings-nav-grey);
-        font-weight: 500;
-      }
-
       .settings-box iron-icon {
         -webkit-margin-end: var(--iron-icon-spacing);
       }
@@ -28,18 +25,22 @@
       .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}">
@@ -56,7 +57,7 @@
         </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}}">
@@ -82,7 +83,7 @@
         </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}}"
@@ -112,7 +113,7 @@
         </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}}">
@@ -143,7 +144,7 @@
         </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}">