Rename data-is-invalid => data-invalid

* The attribute name was inconsistent in the app

Co-authored-by: Konnor Rogers <konnor5456@gmail.com>

Author: tcannonfodder

README.md

@@ -146,7 +146,7 @@ The following data attributes are used by this package:
     - `data-change-validation`: This input should use change validation (eg: `change`)
     - `data-focusout-validation`: This input should use `focusout` validation
     - `data-skip-validation`: This input should skip any validations
-  - `data-is-invalid`: If present, the input is invalid`
+  - `data-invalid`: If present, the input is invalid`
   - `data-has-initial-load-errors`: If present, this input has initial load errors, which should not be cleared out when reflecting the constraint validation for the initial load.
 - `data-error-container`: Marks an element as an error container
 - Error list items

src/element-utilities.js

@@ -63,17 +63,17 @@ export function reflectConstraintValidationForElement(element) {
 }
 
 /**
- * Adds/removes the `data-is-invalid` attribute based on the given `isValid`, and sets
+ * Adds/removes the `data-invalid` attribute based on the given `isValid`, and sets
  * `aria-invalid` based on the given `isValid`
  * @params {Element} element the element to apply the validity state attributes to
  * @params {boolean} isValid whether or not the given element is valid
  */
 export function setValidityStateAttributes(element, isValid) {
   if (isValid) {
-    // Clear `data-is-invalid` attribute flag`
-    element.removeAttribute(`data-is-invalid`)
+    // Clear `data-invalid` attribute flag`
+    element.removeAttribute(`data-invalid`)
   } else {
-    element.toggleAttribute(`data-is-invalid`, !isValid)
+    element.toggleAttribute(`data-invalid`, !isValid)
   }
 
   // Update the `aria-invalid` state based on the given validity boolean.

test/element-utilities.test.js

@@ -78,26 +78,26 @@ suite('Element Utilities', async () => {
       <a-custom-element>Such as a rich text editor</a-custom-element>
     `);
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(input, false)
-    assert.equal(true, input.hasAttribute(`data-is-invalid`))
+    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(input, true)
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal("false", input.getAttribute(`aria-invalid`))
 
-    assert.equal(false, customElement.hasAttribute(`data-is-invalid`))
+    assert.equal(false, customElement.hasAttribute(`data-invalid`))
     assert.equal(false, customElement.hasAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(customElement, false)
-    assert.equal(true, customElement.hasAttribute(`data-is-invalid`))
+    assert.equal(true, customElement.hasAttribute(`data-invalid`))
     assert.equal("true", customElement.getAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(customElement, true)
-    assert.equal(false, customElement.hasAttribute(`data-is-invalid`))
+    assert.equal(false, customElement.hasAttribute(`data-invalid`))
     assert.equal("false", customElement.getAttribute(`aria-invalid`))
   })
 
@@ -124,7 +124,7 @@ suite('Element Utilities', async () => {
 
     ElementUtils.reflectConstraintValidationForElement(input)
 
-    assert.equal(true, input.hasAttribute(`data-is-invalid`))
+    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
 
     assert.equal(1, document.querySelectorAll(`#name-field-errors li`).length)
@@ -140,7 +140,7 @@ suite('Element Utilities', async () => {
 
     ElementUtils.reflectConstraintValidationForElement(input)
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal("false", input.getAttribute(`aria-invalid`))
 
     assert.equal(0, document.querySelectorAll(`#name-field-errors li`).length)
@@ -167,7 +167,7 @@ suite('Element Utilities', async () => {
 
     ElementUtils.reflectConstraintValidationForElement(input)
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal("false", input.getAttribute(`aria-invalid`))
 
     assert.equal(0, document.querySelectorAll(`#name-field-errors li`).length)

test/event-handlers.test.js

@@ -12,7 +12,7 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
@@ -25,7 +25,7 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(true, input.hasAttribute(`data-is-invalid`))
+    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
   })
 
@@ -38,7 +38,7 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
@@ -51,7 +51,7 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
@@ -64,7 +64,7 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(true, input.hasAttribute(`data-is-invalid`))
+    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
   })
 
@@ -77,7 +77,7 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-is-invalid`))
+    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })