Remove data-invalid, use aria-invalid as the sole state attribute

* There shouldn't be any cases where they would have different states;
	and using `aria-invalid` ensures the markup is accessible by default
	* Also reduces the amount of markup that's needed

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

Author: tcannonfodder

README.md

@@ -148,7 +148,6 @@ 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-invalid`: If present, the input is invalid`
   - `data-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
@@ -157,6 +156,10 @@ The following data attributes are used by this package:
   - `data-preserve`: This error list item should not be removed when clearing the error list; useful for rendering custom error messages for default error types. *Just because an error is preserved does not mean it is visible*
 - `data-error-message` Used in the error list item `template` element to indicate where an error message should be rendered in the markup as the `textContent`
 
+### Marking an input as invalid
+
+We use `aria-invalid="true"` to indicate that an input is invalid. This makes your markup accessible by default while not requiring you to tack on a bunch of extra attributes.
+
 ### Linking an `input` or `form` to an error container
 
 To link an `input` or `form` to an error container, you:
@@ -214,7 +217,6 @@ if (!window.customElements.get('app-error-handling')) {
 
 - Render any error list items that should be visible on the initial page load with the `data-visible` attribute
 - Mark the invalid inputs with:
-  - `data-invalid`
   - `aria-invalid=true` 
   - `data-initial-load-errors`
 

css/util.css

@@ -4,4 +4,4 @@
 
 [data-error-container] > ul > li:not([data-visible]) {
   display: none;
-}
+}

src/element-utilities.js

@@ -63,19 +63,11 @@ export function reflectConstraintValidationForElement(element) {
 }
 
 /**
- * Adds/removes the `data-invalid` attribute based on the given `isValid`, and sets
- * `aria-invalid` based on the given `isValid`
+ * 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-invalid` attribute flag`
-    element.removeAttribute(`data-invalid`)
-  } else {
-    element.toggleAttribute(`data-invalid`, !isValid)
-  }
-
   // Update the `aria-invalid` state based on the given validity boolean.
   element.setAttribute(`aria-invalid`, (!isValid).toString());
 }

test/element-utilities.test.js

@@ -78,26 +78,20 @@ suite('Element Utilities', async () => {
       <a-custom-element>Such as a rich text editor</a-custom-element>
     `);
 
-    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(input, false)
-    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(input, true)
-    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal("false", input.getAttribute(`aria-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-invalid`))
     assert.equal("true", customElement.getAttribute(`aria-invalid`))
 
     ElementUtils.setValidityStateAttributes(customElement, true)
-    assert.equal(false, customElement.hasAttribute(`data-invalid`))
     assert.equal("false", customElement.getAttribute(`aria-invalid`))
   })
 
@@ -124,7 +118,6 @@ suite('Element Utilities', async () => {
 
     ElementUtils.reflectConstraintValidationForElement(input)
 
-    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 +133,6 @@ suite('Element Utilities', async () => {
 
     ElementUtils.reflectConstraintValidationForElement(input)
 
-    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 +159,6 @@ suite('Element Utilities', async () => {
 
     ElementUtils.reflectConstraintValidationForElement(input)
 
-    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,6 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
@@ -25,7 +24,6 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
   })
 
@@ -38,7 +36,6 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
@@ -51,7 +48,6 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })
 
@@ -64,7 +60,6 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(true, input.hasAttribute(`data-invalid`))
     assert.equal("true", input.getAttribute(`aria-invalid`))
   })
 
@@ -77,7 +72,6 @@ suite('Event Handlers', async () => {
 
     input.dispatchEvent(new CustomEvent(`test-event`))
 
-    assert.equal(false, input.hasAttribute(`data-invalid`))
     assert.equal(false, input.hasAttribute(`aria-invalid`))
   })