fix: polyfill now respects willValidate for check and report validity

Author: calebdwilliams

Diff for: src/element-internals.ts

@@ -100,6 +100,10 @@ export class ElementInternals implements IElementInternals {
   checkValidity(): boolean {
     const ref = refMap.get(this);
     throwIfNotFormAssociated(ref, `Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
+    /** If the element will not validate, it is necessarily valid by default */
+    if (!this.willValidate) {
+      return true;
+    }
     const validity = validityMap.get(this);
     if (!validity.valid) {
       const validityEvent = new Event('invalid', {
@@ -139,6 +143,10 @@ export class ElementInternals implements IElementInternals {
   reportValidity(): boolean {
     const ref = refMap.get(this);
     throwIfNotFormAssociated(ref, `Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
+    /** If the element will not validate, it is valid by default */
+    if (!this.willValidate) {
+      return true;
+    }
     const valid =  this.checkValidity();
     const anchor = validationAnchorMap.get(this);
     if (anchor && !ref.constructor['formAssociated']) {

Diff for: test/ElementInternals.test.js

@@ -111,6 +111,11 @@ describe('The ElementInternals polyfill', () => {
       expect(form.checkValidity()).to.be.false;
     });
 
+    it('checkValidity will be true if the element is disabled', () => {
+      input.toggleAttribute('disabled', true);
+      expect(input.checkValidity()).to.be.true;
+    });
+
     it('form should match form:invalid CSS selector when form-associated custom element is invalid', () => {
       expect(form.matches('form:is(:invalid, [internals-invalid])')).to.be.true;
     });