Fix ListedElement is focusable pre-check for host with delegatesFocus

The function calls are as follow: HTMLFormElement::reportValidity() HTMLFormElement::ValidateInteractively() ListedElement::ValidationAnchorOrHostIsFocusable() This means a custom element inside a form element will call the above functions to check validity of the form input and show the validation message accordingly. In ListedElement::ValidationAnchorOrHostIsFocusable, the function checks whether the anchor element or the host is focusable. If the anchor is specified, it checks the correct element. If not, it will check the host. However, in the case of a custom element with delegatesFocus, we should not check the host, but instead check its focusable area. Change-Id: Ie331a17c3622ac949ce70cfcacbf035efd73ae89 Fixed: 389587444 Bug: 40726105 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6174381 Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Di Zhang <dizhangg@chromium.org> Cr-Commit-Position: refs/heads/main@{#1413006}
web-platform-tests · Jan 29, 2025 · 010b43b · 010b43b
1 parent 344a03b
commit 010b43b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/custom-elements/form-associated/ElementInternals-reportValidity-delegatesFocus-notref.html b/custom-elements/form-associated/ElementInternals-reportValidity-delegatesFocus-notref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Custom element with delegatesFocus in Form should show validation message on focus delegated element</title>
+<link rel=help href=https://html.spec.whatwg.org/C/#report-validity-steps>
+
+<form>
+ <input-custom-element></input-custom-element>
+</form>
+
+<script>
+class InputCustomElement extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({
+      mode: "open",
+      delegatesFocus: true
+    });
+    this.shadowRoot.innerHTML = '<input>';
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.setValidity({valueMissing: true}, 'value missing');
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+}
+
+customElements.define("input-custom-element", InputCustomElement);
+
+</script>
diff --git a/custom-elements/form-associated/ElementInternals-reportValidity-delegatesFocus.html b/custom-elements/form-associated/ElementInternals-reportValidity-delegatesFocus.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Custom element with delegatesFocus in Form should show validation message on focus delegated element</title>
+<link rel=mismatch href=ElementInternals-reportValidity-delegatesFocus-notref.html>
+<link rel=help href=https://html.spec.whatwg.org/C/#report-validity-steps>
+
+<form>
+ <input-custom-element></input-custom-element>
+</form>
+
+<script>
+class InputCustomElement extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({
+      mode: "open",
+      delegatesFocus: true
+    });
+    this.shadowRoot.innerHTML = '<input>';
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.setValidity({valueMissing: true}, 'value missing');
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+}
+
+customElements.define("input-custom-element", InputCustomElement);
+
+document.querySelector("form").reportValidity();
+
+</script>