Enable a11y audit for chrome://settings

Enabled the tests and fixed failure. Failure was due to transition obscuring elements in the UI.

Another failure was caused because there were no labels on the mic and camera drop downs.

Another failure was that there was no captions for a video element. This is used to capture a profile picture in chrome OS, so there wouldn't be any captions. This element is ignored in the a11y audit.

There was also an issue with the dispatching of events in the ensureTransitionEndEvent function that wouldn't allow the event to bubble.

BUG=311866

Committed: https://crrev.com/34a84c6d1269332cc3ae2b8a50af489230c885de
Cr-Commit-Position: refs/heads/master@{#301266}

Review URL: https://codereview.chromium.org/646853004

Cr-Commit-Position: refs/heads/master@{#305078}

10 files changed, 88 insertions, 41 deletions

diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index ff03980..3d1b107 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -441,12 +441,16 @@
       </div>
       <div>
         <div class="media-device-control">
-          <span i18n-content="mediaSelectMicLabel"></span>
-          <select id="media-select-mic" class="weakrtl"></select>
+          <span id="media-select-mic-label" i18n-content="mediaSelectMicLabel">
+          </span>
+          <select id="media-select-mic" class="weakrtl"
+                  aria-labelledby="media-select-mic-label"></select>
         </div>
         <div class="media-device-control">
-          <span i18n-content="mediaSelectCameraLabel"></span>
-          <select id="media-select-camera" class="weakrtl"></select>
+          <span id="media-select-camera-label"
+                i18n-content="mediaSelectCameraLabel"></span>
+          <select id="media-select-camera" class="weakrtl"
+                  aria-labelledby="media-select-camera-label"></select>
         </div>
         <div class="radio controlled-setting-with-label">
           <label>
diff --git a/chrome/browser/ui/webui/options/autofill_options_browsertest.js b/chrome/browser/ui/webui/options/autofill_options_browsertest.js
index 6efa92b..3316eca 100644
--- a/chrome/browser/ui/webui/options/autofill_options_browsertest.js
+++ b/chrome/browser/ui/webui/options/autofill_options_browsertest.js
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+GEN_INCLUDE(['options_browsertest_base.js']);
+
 /**
  * Returns the HTML element for the |field|.
  * @param {string} field The field name for the element.
@@ -30,10 +32,11 @@ function getListSize(list) {
 function AutofillOptionsWebUITest() {}
 
 AutofillOptionsWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /**
    * Browse to autofill options.
+   * @override
    */
   browsePreload: 'chrome://settings-frame/autofill',
 };
@@ -51,7 +54,7 @@ TEST_F('AutofillOptionsWebUITest', 'testOpenAutofillOptions', function() {
 function AutofillEditAddressWebUITest() {}
 
 AutofillEditAddressWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /** @override  */
   browsePreload: 'chrome://settings-frame/autofillEditAddress',
@@ -70,6 +73,10 @@ TEST_F('AutofillEditAddressWebUITest', 'testInitialFormLayout', function() {
 });
 
 TEST_F('AutofillEditAddressWebUITest', 'testLoadAddress', function() {
+  // Disable a11y audit on Chrome OS and Mac OSX crbug.com/434502
+  if (cr.isChromeOS || cr.isMac)
+    this.disableAccessibilityChecks();
+
   assertEquals(this.browsePreload, document.location.href);
 
   var testAddress = {
diff --git a/chrome/browser/ui/webui/options/chromeos/accounts_options_browsertest.js b/chrome/browser/ui/webui/options/chromeos/accounts_options_browsertest.js
index afa6907..838d6d0 100644
--- a/chrome/browser/ui/webui/options/chromeos/accounts_options_browsertest.js
+++ b/chrome/browser/ui/webui/options/chromeos/accounts_options_browsertest.js
@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+GEN_INCLUDE(['chrome/browser/ui/webui/options/options_browsertest_base.js']);
+
 function AccountsOptionsWebUITest() {}
 
 AccountsOptionsWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /**
    * Browse to accounts options.
diff --git a/chrome/browser/ui/webui/options/chromeos/date_time_options_browsertest.js b/chrome/browser/ui/webui/options/chromeos/date_time_options_browsertest.js
index bce9a16..937af8b 100644
--- a/chrome/browser/ui/webui/options/chromeos/date_time_options_browsertest.js
+++ b/chrome/browser/ui/webui/options/chromeos/date_time_options_browsertest.js
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+GEN_INCLUDE(['chrome/browser/ui/webui/options/options_browsertest_base.js']);
+
 GEN('#if defined(OS_CHROMEOS)');
 
 /**
@@ -12,7 +14,7 @@ GEN('#if defined(OS_CHROMEOS)');
 function DateTimeOptionsWebUITest() {}
 
 DateTimeOptionsWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /**
    * Browse to date/time options.
diff --git a/chrome/browser/ui/webui/options/content_options_browsertest.js b/chrome/browser/ui/webui/options/content_options_browsertest.js
index 1c71405..863fb28 100644
--- a/chrome/browser/ui/webui/options/content_options_browsertest.js
+++ b/chrome/browser/ui/webui/options/content_options_browsertest.js
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+GEN_INCLUDE(['options_browsertest_base.js']);
+
 /**
  * TestFixture for content options WebUI testing.
  * @extends {testing.Test}
@@ -10,10 +12,11 @@
 function ContentOptionsWebUITest() {}
 
 ContentOptionsWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /**
    * Browse to content options.
+   * @override
    */
   browsePreload: 'chrome://settings-frame/content',
 };
diff --git a/chrome/browser/ui/webui/options/language_options_browsertest.js b/chrome/browser/ui/webui/options/language_options_browsertest.js
index eedfeb6..fc5ffba 100644
--- a/chrome/browser/ui/webui/options/language_options_browsertest.js
+++ b/chrome/browser/ui/webui/options/language_options_browsertest.js
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+GEN_INCLUDE(['options_browsertest_base.js']);
+
 /**
  * TestFixture for language options WebUI testing.
  * @extends {testing.Test}
@@ -10,7 +12,7 @@
 function LanguageOptionsWebUITest() {}
 
 LanguageOptionsWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /** @override */
   browsePreload: 'chrome://settings-frame/languages',
diff --git a/chrome/browser/ui/webui/options/options_browsertest.js b/chrome/browser/ui/webui/options/options_browsertest.js
index a8c6b58..015f274 100644
--- a/chrome/browser/ui/webui/options/options_browsertest.js
+++ b/chrome/browser/ui/webui/options/options_browsertest.js
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+GEN_INCLUDE(['options_browsertest_base.js']);
 GEN('#include "chrome/browser/ui/webui/options/options_browsertest.h"');
 
 /** @const */ var SUPERVISED_USERS_PREF = 'profile.managed_users';
@@ -43,24 +44,15 @@ function waitForPopstate(afterFunction) {
 function OptionsWebUITest() {}
 
 OptionsWebUITest.prototype = {
-  __proto__: testing.Test.prototype,
-
-  /** @override */
-  accessibilityIssuesAreErrors: true,
-
-  /** @override */
-  setUp: function() {
-    // user-image-stream is a streaming video element used for capturing a
-    // user image during OOBE.
-    this.accessibilityAuditConfig.ignoreSelectors('videoWithoutCaptions',
-                                                  '.user-image-stream');
-  },
+  __proto__: OptionsBrowsertestBase.prototype,
 
   /**
    * Browse to the options page & call our preLoad().
+   * @override
    */
   browsePreload: 'chrome://settings-frame',
 
+  /** @override */
   isAsync: true,
 
   /**
@@ -89,6 +81,27 @@ OptionsWebUITest.prototype = {
   },
 };
 
+/**
+ * Wait for overlay-container-1 and overlay-container-2 to be hidden.
+ */
+function waitForOverlaysToHide() {
+  var overlay1 = $('overlay-container-1');
+  var overlay2 = $('overlay-container-2');
+
+  document.addEventListener('webkitTransitionEnd', function f(e) {
+    if ((e.target.id == overlay1.id || e.target.id == overlay2.id) &&
+        overlay1.hidden && overlay2.hidden) {
+      document.removeEventListener(f, 'webkitTransitionEnd');
+      testDone();
+    }
+  });
+
+  if (!overlay1.hidden)
+    ensureTransitionEndEvent(overlay1, 500);
+  if (!overlay2.hidden)
+    ensureTransitionEndEvent(overlay2, 500);
+}
+
 // Crashes on Mac only. See http://crbug.com/79181
 GEN('#if defined(OS_MACOSX)');
 GEN('#define MAYBE_testSetBooleanPrefTriggers ' +
@@ -363,10 +376,7 @@ GEN('#endif');  // defined(OS_CHROMEOS)
 function OptionsWebUIExtendedTest() {}
 
 OptionsWebUIExtendedTest.prototype = {
-  __proto__: testing.Test.prototype,
-
-  /** @override */
-  browsePreload: 'chrome://settings-frame',
+  __proto__: OptionsWebUITest.prototype,
 
   /** @override */
   typedefCppFixture: 'OptionsBrowserTest',
@@ -376,17 +386,6 @@ OptionsWebUIExtendedTest.prototype = {
     GEN('  ClearPref("' + SUPERVISED_USERS_PREF + '");');
   },
 
-  /** @override */
-  isAsync: true,
-
-  /** @override */
-  setUp: function() {
-      // user-image-stream is a streaming video element used for capturing a
-      // user image during OOBE.
-      this.accessibilityAuditConfig.ignoreSelectors('videoWithoutCaptions',
-                                                    '.user-image-stream');
-  },
-
   /**
    * Asserts that two non-nested arrays are equal. The arrays must contain only
    * plain data types, no nested arrays or other objects.
@@ -676,7 +675,7 @@ TEST_F('OptionsWebUIExtendedTest', 'CloseOverlay', function() {
       self.verifyOpenPages_(['settings'], '');
       self.verifyHistory_(
           ['', 'languages', 'addLanguage', 'languages', ''],
-          testDone);
+          waitForOverlaysToHide);
     });
   });
 });
@@ -708,7 +707,7 @@ TEST_F('OptionsWebUIExtendedTest', 'CloseOverlayWithHashes', function() {
       this.verifyHistory_(
           ['', 'search#1', 'languages#2', 'addLanguage#3', 'languages#2',
            'search#1'],
-          testDone);
+          waitForOverlaysToHide);
     }.bind(this));
   }.bind(this));
 });
@@ -724,7 +723,7 @@ TEST_F('OptionsWebUIExtendedTest', 'CloseOverlayNoHistory', function() {
     // Close the overlay.
     PageManager.closeOverlay();
     // Still no history changes.
-    this.verifyHistory_([''], testDone);
+    this.verifyHistory_([''], waitForOverlaysToHide);
   }.bind(this));
 });
 
diff --git a/chrome/browser/ui/webui/options/options_browsertest_base.js b/chrome/browser/ui/webui/options/options_browsertest_base.js
new file mode 100644
index 0000000..5d4b12d
--- /dev/null
+++ b/chrome/browser/ui/webui/options/options_browsertest_base.js
@@ -0,0 +1,27 @@
+// Copyright (c) 2014 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.
+
+/**
+ * @constructor
+ * @extends {testing.Test}
+ */
+function OptionsBrowsertestBase() {}
+
+OptionsBrowsertestBase.prototype = {
+  __proto__: testing.Test.prototype,
+
+  /** @override */
+  runAccessibilityChecks: true,
+
+  /** @override */
+  accessibilityIssuesAreErrors: true,
+
+  /** @override */
+  setUp: function() {
+    // user-image-stream is a streaming video element used for capturing a
+    // user image during OOBE.
+    this.accessibilityAuditConfig.ignoreSelectors('videoWithoutCaptions',
+                                                  '.user-image-stream');
+  },
+};
diff --git a/chrome/chrome_tests.gypi b/chrome/chrome_tests.gypi
index b4fe8ee..4a60e4c 100644
--- a/chrome/chrome_tests.gypi
+++ b/chrome/chrome_tests.gypi
@@ -717,6 +717,7 @@
       'browser/ui/webui/options/manage_profile_browsertest.js',
       'browser/ui/webui/options/options_browsertest.cc',
       'browser/ui/webui/options/options_browsertest.js',
+      'browser/ui/webui/options/options_browsertest_base.js',
       'browser/ui/webui/options/options_ui_browsertest.cc',
       'browser/ui/webui/options/options_ui_browsertest.h',
       'browser/ui/webui/options/password_manager_browsertest.js',
diff --git a/ui/webui/resources/js/util.js b/ui/webui/resources/js/util.js
index 03db2a2..2c40592d 100644
--- a/ui/webui/resources/js/util.js
+++ b/ui/webui/resources/js/util.js
@@ -383,7 +383,7 @@ function ensureTransitionEndEvent(el, timeOut) {
   });
   window.setTimeout(function() {
     if (!fired)
-      cr.dispatchSimpleEvent(el, 'webkitTransitionEnd');
+      cr.dispatchSimpleEvent(el, 'webkitTransitionEnd', true);
   }, timeOut);
 }