fix: readOnly changes checkValidity

Author: calebdwilliams

Diff for: src/element-internals.ts

@@ -244,7 +244,10 @@ export class ElementInternals implements IElementInternals {
   get willValidate(): boolean {
     const ref = refMap.get(this);
     throwIfNotFormAssociated(ref, `Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element.`);
-    if (ref.disabled || ref.hasAttribute('disabled')) {
+    if (
+      (ref.disabled || ref.hasAttribute('disabled')) ||
+      ref.hasAttribute('readonly')
+    ) {
       return false;
     }
     return true;

Diff for: test/ElementInternals.test.js

@@ -116,6 +116,14 @@ describe('The ElementInternals polyfill', () => {
       expect(input.checkValidity()).to.be.true;
     });
 
+    it('checkValidity will be true if the element is readOnly', async () => {
+      input.toggleAttribute('readonly', true);
+      /** Inconsistent behavior in Chrome version, bug reported */
+      if (ElementInternals.isPolyfilled) {
+        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;
     });