chromeos: Add settings to control power management prefs.

chrome/browser/resources/settings/device_page/power.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-power">
   <template>
     <style include="settings-shared md-select"></style>
@@ skipping 15 matching lines @@
               [[item.description]]
             </option>
           </template>
         </select>
         <span class="md-select-underline"></span>
       </div>
       <div hidden$="[[showPowerSourceDropdown_]]">
         [[powerSourceName_]]
       </div>
     </div>
+
+    <div class="settings-box">
+      <div class="start">$i18n{powerIdleLabel}</div>

[hcarmona, 2017/06/19 22:18:11]

Consider giving this element and ID and using aria-labelledby in #idleSelect.
This will use the same label for both elements giving better context for screen
readers.

[Daniel Erat, 2017/06/19 23:11:21]

i've tried this (see next patch set), but i always get errors from the checker:

---

Accessibility issues found on chrome://md-settings/power
*** Begin accessibility audit results ***
An accessibility audit found 
Errors:
Error: AX_ARIA_04 (ARIA state and property values must be valid) failed on the
following elements (1 - 2 of 2):
#idleSelect
#lidClosedSelect
See
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rule...
for more information.

Error: AX_ARIA_02 (ARIA attributes which refer to other elements by ID should
refer to elements which exist in the DOM) failed on the following elements (1 -
2 of 2):
#idleSelect
#lidClosedSelect
See
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rule...
for more information.

---

any ideas? the errors disappear if i use aria-label on the two <select>s instead
of aria-labelledby.

+      <template is="dom-if" if="[[idleControlled_]]" restamp>
+        <cr-policy-indicator id="idleControlledIndicator"

[hcarmona, 2017/06/19 22:18:11]

Please set the icon-aria-label property for a11y.
Reusing $i18n{powerIdleLabel} should be good.

Unfortunately aria-lablelledby doesn't go across the shadow dom, so it can't be
used here and the label text must be reused.

[Daniel Erat, 2017/06/19 23:11:21]

Done.

+            indicator-type="devicePolicy">
+        </cr-policy-indicator>
+      </template>
+      <div class="md-select-wrapper">
+        <select id="idleSelect" class="md-select"
+            on-change="onIdleSelectChange_" aria-label="$i18n{powerIdleLabel}"
+            disabled="[[idleControlled_]]">
+          <template is="dom-repeat" items="[[idleOptions_]]">
+            <option value="[[item.value]]">[[item.name]]</option>
+          </template>
+        </select>
+        <span class="md-select-underline"></span>
+      </div>
+    </div>
+
+    <div id="lidClosedRow" class="settings-box continuation"

[hcarmona, 2017/06/19 22:18:11]

Same a11y suggestions for the children of this element as above.

[Daniel Erat, 2017/06/19 23:11:21]

Done.

+         hidden$="[[!hasLid_]]">

[michaelpg, 2017/06/19 22:38:06]

nit: 4-space indent

[Daniel Erat, 2017/06/19 23:11:21]

Done.

+      <div class="start">$i18n{powerLidClosedLabel}</div>
+      <template is="dom-if" if="[[lidClosedControlled_]]" restamp>
+        <cr-policy-indicator id="lidClosedControlledIndicator"
+            indicator-type="devicePolicy">
+        </cr-policy-indicator>
+      </template>
+      <div class="md-select-wrapper">
+        <select id="lidClosedSelect" class="md-select"
+            on-change="onLidClosedSelectChange_"
+            aria-label="$i18n{powerLidClosedLabel}"
+            disabled="[[lidClosedControlled_]]">
+          <template is="dom-repeat" items="[[lidClosedOptions_]]">
+            <option value="[[item.value]]">[[item.name]]</option>
+          </template>
+        </select>
+        <span class="md-select-underline"></span>
+      </div>
+    </div>
   </template>
   <script src="power.js"></script>
 </dom-module>