settings-textarea: Add disabled property

Adds the ability to disable settings-textarea elements. Disabled text
areas are aria-disabled, unfocused and are not reachable by tabbing.

BUG=chromium:974145
TEST=browser_tests --gtest_filter=CrSettingsTextareaTest.*

Change-Id: I085c2a045e4d5432cc23d9b21da582fc9255c742
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1676633
Commit-Queue: Lutz Justen <ljusten@chromium.org>
Auto-Submit: Lutz Justen <ljusten@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#673357}

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

@@ -27,7 +27,7 @@
       <textarea id="input" autofocus="[[autofocus]]" rows="[[rows]]"
           value="{{value::input}}" aria-label$="[[label]]"
           on-focus="onInputFocusChange_" on-blur="onInputFocusChange_"
-          on-change="onInputChange_"></textarea>
+          on-change="onInputChange_" disabled="[[disabled]]"></textarea>
       <div id="underline"></div>
     </div>
   </template>

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

@@ -11,8 +11,8 @@ Polymer({
 
   properties: {
     /**
-       Whether the text area should automatically get focus when the page
-       loads.
+     * Whether the text area should automatically get focus when the page
+     * loads.
      */
     autofocus: {
       type: Boolean,
@@ -20,6 +20,17 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /**
+     * Whether the text area is disabled. When disabled, the text area loses
+     * focus and is not reachable by tabbing.
+     */
+    disabled: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: 'onDisabledChanged_'
+    },
+
     /** Number of rows (lines) of the text area. */
     rows: {
       type: Number,
@@ -45,10 +56,6 @@ Polymer({
     },
   },
 
-  hostAttributes: {
-    'aria-disabled': 'false',
-  },
-
   /**
    * 'change' event fires when <input> value changes and user presses 'Enter'.
    * This function helps propagate it to host since change events don't
@@ -60,13 +67,19 @@ Polymer({
     this.fire('change', {sourceEvent: e});
   },
 
-  // focused_ is used instead of :focus-within, so focus on elements within the
-  // suffix slot does not trigger a change in input styles.
+  /**@private */
   onInputFocusChange_: function() {
+    // focused_ is used instead of :focus-within, so focus on elements within
+    // the suffix slot does not trigger a change in input styles.
     if (this.shadowRoot.activeElement == this.$.input) {
       this.setAttribute('focused_', '');
     } else {
       this.removeAttribute('focused_');
     }
   },
+
+  /**@private */
+  onDisabledChanged_: function() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  },
 });

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

@@ -41,4 +41,24 @@ suite('SettingsTextarea', function() {
     assertEquals('foobar', label.textContent);
     assertEquals('foobar', textarea.getAttribute('aria-label'));
   });
+
+  test('disabledSetCorrectly', function() {
+    assertFalse(textarea.disabled);
+    assertFalse(textarea.hasAttribute('disabled'));
+    assertFalse(settingsTextarea.hasAttribute('disabled'));
+    assertEquals('false', settingsTextarea.getAttribute('aria-disabled'));
+    settingsTextarea.disabled = true;
+    assertTrue(textarea.disabled);
+    assertTrue(textarea.hasAttribute('disabled'));
+    assertTrue(settingsTextarea.hasAttribute('disabled'));
+    assertEquals('true', settingsTextarea.getAttribute('aria-disabled'));
+  });
+
+  test('rowsSetCorrectly', function() {
+    const kDefaultRows = settingsTextarea.rows;
+    const kNewRows = 42;
+    assertEquals(kDefaultRows, textarea.rows);
+    settingsTextarea.rows = kNewRows;
+    assertEquals(kNewRows, textarea.rows);
+  });
 });