ChromeOS: Implement Accessibility Options screen of material design OOBE.

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

 <!-- Copyright 2016 The Chromium Authors. All rights reserved.
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_select.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
@@ skipping 20 matching lines @@
               on-tap="onWelcomeNextButtonClicked_">
           </oobe-next-button>
         </div>
         <div class="flex horizontal layout justified">
           <div class="buttonbox layout vertical"
               on-tap="onWelcomeSelectLanguageButtonClicked_">
             <iron-icon icon="icons:language" class="bottom-button self-center">
             </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>
             <div id="accessibilityLabel" i18n-content="accessibilityLink"></div>
           </div>
         </div>
       </div>
     </oobe-card>
     <oobe-dialog class="fit" hidden="[[!languageSelectionScreenShown]]"
         has-buttons>
@@ skipping 24 matching lines @@
             </oobe-i18n-dropdown>
           </div>
         </template>
       </div>
       <div class="bottom-buttons layout horizontal">
         <oobe-text-button inverse on-tap="closeLanguageSection_"
           i18n-content="oobeOKButtonText">
         </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>
+        <h1 class="welcome-message-hint"
+            i18n-content="accessibilitySectionHint">
+        </h1>
+      </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" i18n-content="spokenFeedbackOptionOn">
+          </span>
+          <span class="unchecked-value" i18n-content="spokenFeedbackOptionOff">
+          </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" i18n-content="largeCursorOptionOn">
+          </span>
+          <span class="unchecked-value" i18n-content="largeCursorOptionOff">
+          </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" i18n-content="highContrastOptionOn">
+          </span>
+          <span class="unchecked-value" i18n-content="highContrastOptionOff">
+          </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" i18n-content="screenMagnifierOptionOn">
+          </span>
+          <span class="unchecked-value" i18n-content="screenMagnifierOptionOff">
+          </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" i18n-content="virtualKeyboardOptionOn">
+          </span>
+          <span class="unchecked-value" i18n-content="virtualKeyboardOptionOff">
+          </span>
+        </oobe-a11y-option>
+      </div>
+      <div class="bottom-buttons layout horizontal">
+        <oobe-text-button inverse on-tap="closeAccessibilitySection_"
+            i18n-content="oobeOKButtonText">
+        </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>
       <div class="header flex layout vertical end-justified start">
         <h1 class="welcome-message" i18n-content="networkSectionTitle"></h1>
         <h1 class="welcome-message-hint" i18n-content="networkSectionHint"></h1>
       </div>
       <div class="footer flex layout vertical justified">
         <cr-network-select id="networkSelect"
             on-network-connected="onNetworkConnected_"
             on-network-item-selected="onNetworkListNetworkItemSelected_"
             on-custom-item-selected="onNetworkListCustomItemSelected_"
             custom-items="[[_getNetworkCustomItems()]]"
             max-height="280">
         </cr-network-select>
       </div>
     </oobe-dialog>
   </template>
 </dom-module>