Add accessibility tests for passwords section of Chrome Settings.

Set up the GTest and Mocha-based a11y testing framework for Chrome WebUI
by defining an accessibility_browsertest.js file for a11y test fixtures
and including this file in the BUILD.gn.

The passwords section now fires an event when the settings section has
expanded--an event that is responded to in the added a11y test.

The tests are disabled and will be enabled in followup CL for easier
review.

Bug: 737739
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ief6b002d8ce17950203c917a9baee05e3ac9136c
Reviewed-on: https://chromium-review.googlesource.com/598638
Commit-Queue: Tina Quach <quacht@google.com>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#491539}

chrome/browser/resources/settings/settings_page/settings_section.js

@@ -96,6 +96,14 @@ var SettingsSectionElement = Polymer({
     }
   },
 
+  /**
+   * Calling this method fires the 'settings-section-expanded event'.
+   */
+  setExpanded_: function() {
+    this.classList.add('expanded');
+    this.fire('settings-section-expanded');
+  },
+
   /**
    * @return {boolean} True if the section is currently rendered and not
    *     already expanded or transitioning.
@@ -113,7 +121,7 @@ var SettingsSectionElement = Polymer({
     this.$.card.top = containerTop + 'px';
     this.$.card.height = 'calc(100% - ' + containerTop + 'px)';
 
-    this.classList.add('expanded');
+    this.setExpanded_();
   },
 
   /**
@@ -146,17 +154,13 @@ var SettingsSectionElement = Polymer({
 
     var animation =
         this.animateCard_('fixed', startTop, endTop, startHeight, endHeight);
-    animation.finished
-        .then(
-            () => {
-              this.classList.add('expanded');
-            },
-            function() {})
-        .then(() => {
-          // Unset these changes whether the animation finished or canceled.
-          this.classList.remove('expanding');
-          this.style.height = '';
-        });
+    // The empty onRejected function prevents the promise from skipping forward
+    // to the next then() with a rejection callback.
+    animation.finished.then(this.setExpanded_.bind(this), () => {}).then(() => {
+      // Unset these changes whether the animation finished or canceled.
+      this.classList.remove('expanding');
+      this.style.height = '';
+    });
     return animation;
   },
 

chrome/test/data/webui/BUILD.gn

@@ -43,6 +43,7 @@ js2gtest("browser_tests_js_webui") {
     "../../../browser/ui/webui/identity_internals_ui_browsertest.js",
     "../../../browser/ui/webui/sync_internals_browsertest.js",
     "../chromeos/oobe_webui_browsertest.js",
+    "//third_party/axe-core/axe.js",
     "about_invalidations_browsertest.js",
     "accessibility_audit_browsertest.js",
     "assertions.js",
@@ -76,6 +77,7 @@ js2gtest("browser_tests_js_webui") {
     "ntp4.js",
     "polymer_browser_test_base.js",
     "sandboxstatus_browsertest.js",
+    "settings/accessibility_browsertest.js",
     "settings/advanced_page_browsertest.js",
     "settings/animation_browsertest.js",
     "settings/basic_page_browsertest.js",

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

+// Copyright 2017 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.
+
+/** @fileoverview Runs the Polymer Accessibility Settings tests. */
+
+// Disable in debug and memory sanitizer modes because of timeouts.
+GEN('#if defined(NDEBUG)');
+
+/** @const {string} Path to root from chrome/test/data/webui/settings/. */
+var ROOT_PATH = '../../../../../';
+
+// Polymer BrowserTest fixture and aXe-core accessibility audit.
+GEN_INCLUDE([
+  ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js',
+  ROOT_PATH + 'third_party/axe-core/axe.js',
+]);
+
+/**
+ * @typedef {{
+ *   rules: {
+ *     'color_contrast': ({ enabled: boolean} | undefined),
+ *     'aria_valid_attr': ({ enabled: boolean} | undefined),
+ *   }
+ * }}
+ * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+ */
+function AccessibilityAuditConfig() {}
+
+/**
+ * Test fixture for Accessibility of Chrome Settings.
+ * @constructor
+ * @extends {PolymerTest}
+ */
+function SettingsAccessibilityTest() {}
+
+/**
+ * Run aXe-core accessibility audit, print console-friendly representation
+ * of violations to console, and fail the test if there are audit failures.
+ * @param {AccessibilityAuditConfig} options Dictionary disabling specific
+ *    audit rules.
+ * @return {Promise} A promise resolved if the accessibility audit completes
+ *    with no issues, or rejected if the audit finds any accessibility issues.
+ */
+SettingsAccessibilityTest.runAudit = function(options) {
+  // Ignore iron-iconset-svg elements that have duplicate ids and result in
+  // false postives from the audit.
+  var context = {exclude: ['iron-iconset-svg']};
+  options = options || {};
+
+  return new Promise(function(resolve, reject) {
+    axe.run(context, options, function(err, results) {
+      if (err)
+        reject(err);
+
+      var violationCount = results.violations.length;
+      if (violationCount) {
+        // Pretty print out the violations detected by the audit.
+        console.log(JSON.stringify(results.violations, null, 4));
+        reject('Found ' + violationCount + ' accessibility violations.');
+      } else {
+        resolve();
+      }
+    });
+  });
+};
+
+SettingsAccessibilityTest.prototype = {
+  __proto__: PolymerTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://md-settings/',
+
+  // Include files that define the mocha tests.
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH).concat([
+    'ensure_lazy_loaded.js', 'passwords_and_autofill_fake_data.js',
+    'passwords_a11y_test.js'
+  ]),
+
+  // TODO(hcarmona): Remove once ADT is not longer in the testing infrastructure
+  runAccessibilityChecks: false,
+
+  setUp: function() {
+    PolymerTest.prototype.setUp.call(this);
+    settings.ensureLazyLoaded();
+  },
+};
+
+// TODO(quacht): Enable in separate CL.
+// Test disabled since it doesn't work on all platforms.
+// TEST_F('SettingsAccessibilityTest', 'All', function() {
+//   mocha.run();
+// });
+
+GEN('#endif  // defined(NDEBUG)');
\ No newline at end of file

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

+// Copyright 2017 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.
+
+/** @fileoverview Suite of accessibility tests for the passwords page. */
+
+suite('SettingsPasswordsAccessibility', function() {
+  var passwordsSection = null;
+  var passwordManager = null;
+
+  /** @type {AccessibilityAuditConfig} **/
+  // TODO(quacht): Enable these rules when the audit filter is implemented, and
+  // we can filter out specific audit violations.
+  var auditOptions = {
+    'rules': {
+      // Enable 'color-contrast' when failure is resolved.
+      // http://crbug.com/748608
+      'color-contrast': {enabled: false},
+      // http://crbug.com/748632
+      'aria-valid-attr': {enabled: false}
+    }
+  };
+
+  setup(function() {
+    return new Promise(function(resolve) {
+      // Reset to a blank page.
+      PolymerTest.clearBody();
+
+      // Set the URL to be that of specific route to load upon injecting
+      // settings-ui. Simply calling settings.navigateTo(route) prevents
+      // use of mock APIs for fake data.
+      window.history.pushState(
+          'object or string', 'Test', settings.routes.MANAGE_PASSWORDS.path);
+
+      PasswordManagerImpl.instance_ = new TestPasswordManager();
+      passwordManager = PasswordManagerImpl.instance_;
+
+      var settingsUi = document.createElement('settings-ui');
+
+      // The settings section will expand to load the MANAGE_PASSWORDS route
+      // (based on the URL set above) once the settings-ui element is attached
+      settingsUi.addEventListener('settings-section-expanded', function() {
+        // Passwords section should be loaded before setup is complete.
+        passwordsSection = settingsUi.$$('settings-main')
+                               .$$('settings-basic-page')
+                               .$$('settings-passwords-and-forms-page')
+                               .$$('passwords-section');
+
+        assertTrue(!!passwordsSection);
+
+        assertEquals(passwordManager, passwordsSection.passwordManager_);
+
+        resolve();
+      });
+
+      document.body.appendChild(settingsUi);
+    });
+  });
+
+  test('Accessible with 0 passwords', function() {
+    assertEquals(0, passwordsSection.savedPasswords.length);
+    return SettingsAccessibilityTest.runAudit(auditOptions);
+  });
+
+  test('Accessible with 100 passwords', function() {
+    var fakePasswords = [];
+    for (var i = 0; i < 100; i++) {
+      fakePasswords.push(FakeDataMaker.passwordEntry());
+    }
+
+    // Set list of passwords.
+    passwordManager.lastCallback.addSavedPasswordListChangedListener(
+        fakePasswords);
+    Polymer.dom.flush();
+
+    assertEquals(100, passwordsSection.savedPasswords.length);
+
+    return SettingsAccessibilityTest.runAudit(auditOptions);
+  });
+});
\ No newline at end of file