feat(validation anchor): add validation anchor behavior

Author: calebdwilliams

Diff for: karma.conf.js

@@ -26,7 +26,8 @@ module.exports = config => {
         usePhantomJS: false,
         preferHeadless: true,
         postDetection(availableBrowsers) {
-          return availableBrowsers.filter(browser => browser !== 'SafariTechPreview');
+          console.log(availableBrowsers)
+          return availableBrowsers.filter(browser => !['ChromeCanaryHeadless', 'SafariTechPreview'].includes(browser));
         }
       },
 

Diff for: package-lock.json

@@ -68,7 +68,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-livereload": "^1.2.0",
     "rollup-plugin-serve": "^1.0.1",
-    "sinon": "^9.0.2",
+    "sinon": "^9.2.4",
     "standard-version": "^9.0.0",
     "tsc": "^1.20150623.0",
     "typescript": "^4.0.3"

Diff for: package.json

@@ -7,7 +7,8 @@ import {
   formElementsMap,
   refValueMap,
   hiddenInputMap,
-  shadowRootMap
+  shadowRootMap,
+  validationAnchorMap
 } from './maps';
 import { initAom } from './aom';
 import { getHostRoot, initRef, initLabels, initForm, findParentForm, createHiddenInput, removeHiddenInputs } from './utils';
@@ -114,7 +115,17 @@ export class ElementInternals implements IElementInternals {
 
   /** Will report the elements validity state */
   reportValidity(): boolean {
-    return this.checkValidity();
+    const valid =  this.checkValidity();
+    const anchor = validationAnchorMap.get(this);
+    const ref = refMap.get(this);
+    if (anchor && !ref.constructor['formAssociated']) {
+      throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
+    }
+    if (!valid && anchor) {
+      ref.focus();
+      anchor.focus();
+    }
+    return valid;
   }
 
   /** Sets the element's value within the form */
@@ -153,6 +164,7 @@ export class ElementInternals implements IElementInternals {
     if (!validityChanges) {
       throw new TypeError('Failed to execute \'setValidity\' on \'ElementInternals\': 1 argument required, but only 0 present.');
     }
+    validationAnchorMap.set(this, anchor);
     const validity = validityMap.get(this);
     if (Object.keys(validityChanges).length === 0) {
       setValid(validity);

Diff for: src/element-internals.ts

@@ -37,3 +37,6 @@ export const upgradeMap = new WeakMap<Element, IElementInternals>();
 
 /** Save references to shadow roots for inclusion in internals instance */
 export const shadowRootMap = new WeakMap<ICustomElement, ShadowRoot>();
+
+/** Save a refernce to the internals' validation anchor */
+export const validationAnchorMap = new WeakMap<IElementInternals, HTMLElement>();

Diff for: src/maps.ts

@@ -19,11 +19,16 @@ class CustomElement extends HTMLElement {
     super();
     const root = this.attachShadow({ mode: 'open' });
     this.internals = this.attachInternals();
-    root.innerHTML = 'html';
+    root.innerHTML = '<input>';
 
     this._value = '';
   }
 
+  connectedCallback() {
+    this.tabIndex = -1;
+    this.input = this.shadowRoot.querySelector('input');
+  }
+
   set disabled(disabled) {
     this._disabled = disabled;
     this.toggleAttribute('disabled', disabled);
@@ -340,6 +345,14 @@ describe('The ElementInternals polyfill', () => {
 
     it('saves a reference to all shadow roots', () => {
       expect(internals.shadowRoot).to.equal(el.shadowRoot);
+    });;
+
+    it('will focus the element if validated with anchor', async () => {
+      internals.setValidity({
+        customError: true
+      }, 'Error message', el.input);
+      internals.reportValidity();
+      expect(document.activeElement).to.equal(el);
     });
   });
 

Diff for: test/ElementInternals.test.js

@@ -1,11 +1,11 @@
 import {
   aTimeout,
-  elementUpdated,
   expect,
   fixture,
   fixtureCleanup,
   html,
 } from '@open-wc/testing';
+import { spy } from 'sinon';
 import '../dist/index.js';
 
 describe('ElementInternals polyfill behavior', () => {
@@ -60,6 +60,13 @@ describe('ElementInternals polyfill behavior', () => {
         super();
         this.internals = this.attachInternals();
       }
+
+      connectedCallback() {
+        this.tabIndex = -1;
+        const root = this.attachShadow({ mode: 'open' });
+        root.innerHTML = `<input />`;
+        this.input = root.querySelector('input');
+      }
     }
 
     customElements.define('form-associated', FormAssociated);