std-switch: Use a11y-related properties of ElementInternals

Bug: 996844
Change-Id: I904e23d2f70e9d0691b27cf2b05aa0fd03a47f0f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1767445Reviewed-by: Rakina Zata Amni <rakina@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689808}

third_party/blink/renderer/core/script/resources/layered_api/elements/switch/index.mjs

@@ -46,9 +46,12 @@ export class StdSwitchElement extends HTMLElement {
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (attrName === STATE_ATTR) {
       this[_track].value = newValue !== null;
-      // TODO(tkent): We should not add aria-checked attribute.
-      // https://github.com/WICG/aom/issues/127
-      this.setAttribute('aria-checked', newValue !== null ? 'true' : 'false');
+      if (this[_internals].ariaChecked !== undefined) {
+        this[_internals].ariaChecked = newValue !== null ? 'true' : 'false';
+      } else {
+        // TODO(tkent): Remove this when we ship AOM.
+        this.setAttribute('aria-checked', newValue !== null ? 'true' : 'false');
+      }
       if (!this.#inUserAction) {
         for (const element of this[_containerElement].querySelectorAll('*')) {
           style.unmarkTransition(element);
@@ -64,10 +67,13 @@ export class StdSwitchElement extends HTMLElement {
       this.setAttribute('tabindex', '0');
     }
 
-    // TODO(tkent): We should not add role attribute.
-    // https://github.com/WICG/aom/issues/127
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'switch');
+    if (this[_internals].role !== undefined) {
+      this[_internals].role = 'switch';
+    } else {
+      // TODO(tkent): Remove this when we ship AOM.
+      if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'switch');
+      }
     }
   }
 

third_party/blink/web_tests/std-switch/a11y-expected.txt

-This is a testharness.js-based test.
-PASS Check accessibility behavior
-FAIL Should have no a11y attributes assert_false: role expected false got true
-Harness: the test ran to completion.
-

third_party/blink/web_tests/std-switch/a11y.html

@@ -32,5 +32,19 @@ test(t => {
   assert_false(switchElement.hasAttribute('role'), 'role');
   assert_false(switchElement.hasAttribute('aria-checked'), 'aria-checked');
 }, 'Should have no a11y attributes');
+
+test(t => {
+  assert_own_property(window, 'accessibilityController');
+
+  let switchElement = document.createElement('std-switch');
+  switchElement.id = 'switch3';
+  switchElement.setAttribute('role', 'checkbox');
+  switchElement.setAttribute('aria-checked', 'true');
+  document.body.appendChild(switchElement);
+
+  let axSwitch = accessibilityController.accessibleElementById('switch3');
+  assert_equals(axSwitch.role, 'AXRole: AXCheckBox');
+  assert_equals(axSwitch.checked, 'true');
+}, 'Adding role=/aria-checked= should override the default');
 </script>
 </body>