ChromeOS: Implement Accessibility Options screen of material design OOBE.

chrome/browser/resources/chromeos/login/oobe_welcome.html

Index: chrome/browser/resources/chromeos/login/oobe_welcome.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.html b/chrome/browser/resources/chromeos/login/oobe_welcome.html
index a9c55a55d1e6abc1e7b3d5d0e4c185a1bbaf5a28..fc0a1d822f6282fa7eb02b5664091bc3c2f7f496 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.html
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.html
@@ -38,7 +38,8 @@
             </iron-icon>
             <div id="currentLanguage">[[currentLanguage]]</div>
           </div>
-          <div class="buttonbox layout vertical">
+          <div class="buttonbox layout vertical"
+              on-tap="onWelcomeAccessibilityButtonClicked_">
             <iron-icon icon="icons:accessibility"
                 class="bottom-button self-center">
             </iron-icon>
@@ -83,6 +84,56 @@
         </oobe-text-button>
       </div>
     </oobe-dialog>
+    <oobe-dialog class="fit" hidden="[[!accessibilityOptionsScreenShown]]"
+        has-buttons>
+      <iron-icon icon="icons:accessibility" class="oobe-icon"></iron-icon>
+      <div class="header flex layout vertical end-justified start">
+        <h1 class="welcome-message" i18n-content="accessibilitySectionTitle"></h1>

[michaelpg, 2016/08/09 20:33:08]

wrap

[Alexander Alekseev, 2016/08/10 04:03:46]

Done.

+        <h1 class="welcome-message-hint" i18n-content="accessibilitySectionHint"></h1>

[michaelpg, 2016/08/09 20:33:08]

wrap

[Alexander Alekseev, 2016/08/10 04:03:46]

Done.

+      </div>
+      <div class="footer layout vertical">
+        <oobe-a11y-option checked="[[a11yStatus.spokenFeedbackEnabled]]"
+            on-change="onA11yOptionChanged_"
+            chrome-message="enableSpokenFeedback">
+          <span class="title" i18n-content="spokenFeedbackOption"></span>
+          <span class="checked-value">On</span>

[michaelpg, 2016/08/09 20:33:08]

i18n for all these?

[Alexander Alekseev, 2016/08/10 04:03:46]

Sorry, I missed this.
Done.

+          <span class="unchecked-value">Off</span>
+        </oobe-a11y-option>
+        <oobe-a11y-option checked="[[a11yStatus.largeCursorEnabled]]"
+            on-change="onA11yOptionChanged_"
+            chrome-message="enableLargeCursor">
+          <span class="title" i18n-content="largeCursorOption"></span>
+          <span class="checked-value">Large</span>
+          <span class="unchecked-value">Normal</span>
+        </oobe-a11y-option>
+        <oobe-a11y-option checked="[[a11yStatus.highContrastEnabled]]"
+            on-change="onA11yOptionChanged_"
+            chrome-message="enableHighContrast">
+          <span class="title" i18n-content="highContrastOption"></span>
+          <span class="checked-value">On</span>
+          <span class="unchecked-value">Off</span>
+        </oobe-a11y-option>
+        <oobe-a11y-option checked="[[a11yStatus.screenMagnifierEnabled]]"
+            on-change="onA11yOptionChanged_"
+            chrome-message="enableScreenMagnifier">
+          <span class="title" i18n-content="screenMagnifierOption"></span>
+          <span class="checked-value">On</span>
+          <span class="unchecked-value">Off</span>
+        </oobe-a11y-option>
+        <oobe-a11y-option checked="[[a11yStatus.virtualKeyboardEnabled]]"
+            on-change="onA11yOptionChanged_"
+            chrome-message="enableVirtualKeyboard">
+          <span class="title" i18n-content="virtualKeyboardOption"></span>
+          <span class="checked-value">On</span>
+          <span class="unchecked-value">Off</span>
+        </oobe-a11y-option>
+      </div>
+      <div class="bottom-buttons layout horizontal">
+        <oobe-text-button inverse on-tap="closeAccessibilitySection_"
+          i18n-content="oobeOKButtonText">

[michaelpg, 2016/08/09 20:33:08]

4-space indent

[Alexander Alekseev, 2016/08/10 04:03:46]

Done.

+        </oobe-text-button>
+      </div>
+    </oobe-dialog>
     <oobe-dialog id="networkSection" class="fit"
         hidden="[[!networkSelectionScreenShown]]">
       <iron-icon icon="oobe-welcome:wifi" class="oobe-icon"></iron-icon>