WebUI: cr-expand-button, improve a11y of control

As part of work to replace usages of paper-icon-button with
cr-expand-button in the ChromeVox options, I found that the control
needed a aria-label set when no |alt| was set. cr-expand-button was
also using aria-pressed instead of aria-expanded. After testing with
VoiceOver, aria-expanded provides a clearer description of the control.

Here is the CL to replace paper-icon-button with cr-expand-button:
https://chromium-review.googlesource.com/c/chromium/src/+/1618564

Bug: 960564
Change-Id: Ib60507ec816507ba9a6010f3bfe6d7a6a55fc116
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1622705Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#662228}

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

@@ -520,6 +520,29 @@ TEST_F('CrElementsLinkRowTest', 'All', function() {
   mocha.run();
 });
 
+/**
+ * @constructor
+ * @extends {CrElementsBrowserTest}
+ */
+function CrElementsExpandButtonTest() {}
+
+CrElementsExpandButtonTest.prototype = {
+  __proto__: CrElementsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload:
+      'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html',
+
+  /** @override */
+  extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
+    'cr_expand_button_tests.js',
+  ]),
+};
+
+TEST_F('CrElementsExpandButtonTest', 'All', function() {
+  mocha.run();
+});
+
 GEN('#if defined(OS_CHROMEOS)');
 /**
  * @constructor

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

+// Copyright 2019 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.
+
+suite('cr-expand-button', function() {
+  let button;
+
+  setup(() => {
+    PolymerTest.clearBody();
+    document.body.innerHTML = '<cr-expand-button></cr-expand-button>';
+    button = document.body.querySelector('cr-expand-button');
+  });
+
+  test('setting |alt| label', () => {
+    const iconButton = button.$.icon;
+    assertFalse(!!button.alt);
+    assertEquals('label', iconButton.getAttribute('aria-labelledby'));
+    assertEquals(null, iconButton.getAttribute('aria-label'));
+    const altLabel = 'alt label';
+    button.alt = altLabel;
+    assertEquals(null, iconButton.getAttribute('aria-labelledby'));
+    assertEquals('alt label', iconButton.getAttribute('aria-label'));
+  });
+
+  test('changing |expanded|', () => {
+    const iconButton = button.$.icon;
+    assertFalse(button.expanded);
+    assertEquals('false', iconButton.getAttribute('aria-expanded'));
+    assertEquals('cr:expand-more', iconButton.ironIcon);
+    button.expanded = true;
+    assertEquals('true', iconButton.getAttribute('aria-expanded'));
+    assertEquals('cr:expand-less', iconButton.ironIcon);
+  });
+
+  test('changing |disabled|', () => {
+    const iconButton = button.$.icon;
+    assertFalse(button.disabled);
+    assertEquals('false', iconButton.getAttribute('aria-expanded'));
+    assertFalse(iconButton.disabled);
+    button.disabled = true;
+    assertFalse(iconButton.hasAttribute('aria-expanded'));
+    assertTrue(iconButton.disabled);
+  });
+});

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

@@ -2,16 +2,15 @@
 
 <link rel="import" href="../../html/cr/ui/focus_without_ink.html">
 <link rel="import" href="../cr_icon_button/cr_icon_button.html">
-<link rel="import" href="../cr_icons_css.html">
-<link rel="import" href="../shared_style_css.html">
+<link rel="import" href="../icons.html">
 <link rel="import" href="../shared_vars_css.html">
 
 <dom-module id="cr-expand-button">
   <template>
-    <style include="cr-shared-style cr-icons">
+    <style>
       :host {
-        @apply --cr-actionable;
         align-items: center;
+        cursor: pointer;
         display: flex;
         outline: none;
       }
@@ -36,10 +35,8 @@
     </style>
 
     <div id="label"><slot></slot></div>
-    <cr-icon-button id="icon" class$="[[iconName_(expanded)]]"
-        disabled="[[disabled]]" aria-label$="[[alt]]"
-        aria-pressed$="[[getAriaPressed_(expanded)]]" tabindex="[[tabIndex]]">
-    </cr-icon-button>
+    <cr-icon-button id="icon" aria-labelledby="label" disabled="[[disabled]]"
+        tabindex="[[tabIndex]]"></cr-icon-button>
   </template>
   <script src="cr_expand_button.js"></script>
 </dom-module>

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js

@@ -19,6 +19,7 @@ Polymer({
       type: Boolean,
       value: false,
       notify: true,
+      observer: 'onExpandedChange_',
     },
 
     /**
@@ -31,7 +32,10 @@ Polymer({
     },
 
     /** A11y text descriptor for this control. */
-    alt: String,
+    alt: {
+      type: String,
+      observer: 'onAltChange_',
+    },
 
     tabIndex: {
       type: Number,
@@ -39,6 +43,10 @@ Polymer({
     },
   },
 
+  observers: [
+    'updateAriaExpanded_(disabled, expanded)',
+  ],
+
   listeners: {
     click: 'toggleExpand_',
   },
@@ -57,20 +65,20 @@ Polymer({
     this.$.icon.focus();
   },
 
-  /**
-   * @param {boolean} expanded
-   * @private
-   */
-  getAriaPressed_: function(expanded) {
-    return expanded ? 'true' : 'false';
+  /** @private */
+  onAltChange_: function() {
+    if (this.alt) {
+      this.$.icon.removeAttribute('aria-labelledby');
+      this.$.icon.setAttribute('aria-label', this.alt);
+    } else {
+      this.$.icon.removeAttribute('aria-label');
+      this.$.icon.setAttribute('aria-labelledby', 'label');
+    }
   },
 
-  /**
-   * @param {boolean} expanded
-   * @private
-   */
-  iconName_: function(expanded) {
-    return expanded ? 'icon-expand-less' : 'icon-expand-more';
+  /** @private */
+  onExpandedChange_: function() {
+    this.$.icon.ironIcon = this.expanded ? 'cr:expand-less' : 'cr:expand-more';
   },
 
   /**
@@ -87,4 +95,13 @@ Polymer({
     this.expanded = !this.expanded;
     cr.ui.focusWithoutInk(this.$.icon);
   },
+
+  /** @private */
+  updateAriaExpanded_: function() {
+    if (this.disabled) {
+      this.$.icon.removeAttribute('aria-expanded');
+    } else {
+      this.$.icon.setAttribute('aria-expanded', this.expanded);
+    }
+  },
 });