WebUI: cr-input automatically generates aria-label on <input>

This CL improves accessibility of cr-input by automatically generating
aria-label on <input>, taking a best guess based on cr-input's aria-label,
label, or placeholders.

Bug: 832177
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I6847f16fa5ddca89691aca271ea077974ff5211e
Reviewed-on: https://chromium-review.googlesource.com/1097942
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567803}

chrome/browser/resources/settings/controls/settings_textarea.html

@@ -17,7 +17,7 @@
            exceeds the bounds, it will scroll by default. No space or comments
            allowed before closing tag. -->
       <textarea id="input" autofocus="[[autofocus]]" rows="3"
-          value="{{value::input}}"></textarea>
+          value="{{value::input}}" aria-label$="[[label]]"></textarea>
       <div id="underline"></div>
     </div>
   </template>

chrome/test/data/webui/cr_elements/cr_input_test.js

@@ -29,7 +29,6 @@ suite('cr-input', function() {
     ];
 
     attributesToTest.forEach(attr => {
-      console.log(attr[0]);
       assertEquals(attr[2], input[attr[1]]);
       crInput.setAttribute(attr[0], attr[3]);
       assertEquals(attr[3], input[attr[1]]);
@@ -148,4 +147,30 @@ suite('cr-input', function() {
     assertFalse(crInput.invalid);
     assertFalse(input.checkValidity());
   });
+
+  test('ariaLabelsCorrect', function() {
+    assertFalse(!!crInput.inputElement.getAttribute('aria-label'));
+
+    /**
+     * This function assumes attributes are passed in priority order.
+     * @param {!Array<string>} attributes
+     */
+    function testAriaLabel(attributes) {
+      PolymerTest.clearBody();
+      crInput = document.createElement('cr-input');
+      attributes.forEach(attribute => {
+        // Using their name as the value out of convenience.
+        crInput.setAttribute(attribute, attribute);
+      });
+      document.body.appendChild(crInput);
+      Polymer.dom.flush();
+      // Assuming first attribute takes priority.
+      assertEquals(
+          attributes[0], crInput.inputElement.getAttribute('aria-label'));
+    }
+
+    testAriaLabel(['aria-label', 'label', 'placeholder']);
+    testAriaLabel(['label', 'placeholder']);
+    testAriaLabel(['placeholder']);
+  });
 });

chrome/test/data/webui/settings/settings_textarea_tests.js

@@ -39,5 +39,6 @@ suite('SettingsTextarea', function() {
     settingsTextarea.label = 'foobar';
     assertFalse(label.hidden);
     assertEquals('foobar', label.textContent);
+    assertEquals('foobar', textarea.getAttribute('aria-label'));
   });
 });

ui/webui/resources/cr_elements/cr_input/cr_input.js

@@ -36,6 +36,8 @@ Polymer({
   is: 'cr-input',
 
   properties: {
+    ariaLabel: String,
+
     autofocus: {
       type: Boolean,
       value: false,
@@ -120,6 +122,13 @@ Polymer({
     'input.change': 'onInputChange_',
   },
 
+  /** @override */
+  attached: function() {
+    const ariaLabel = this.ariaLabel || this.label || this.placeholder;
+    if (ariaLabel)
+      this.inputElement.setAttribute('aria-label', ariaLabel);
+  },
+
   /** @return {!HTMLInputElement} */
   get inputElement() {
     return this.$.input;