fix(auro-checkbox): make error a boolean #33

AlaskaAirlines · Aug 17, 2021 · 6e06844 · 6e06844
1 parent 599430b
commit 6e06844
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/auro-checkbox.js b/src/auro-checkbox.js
@@ -42,7 +42,7 @@ class AuroCheckbox extends LitElement {
         reflect: true
       },
       error: {
-        type: String,
+        type: Boolean,
         reflect: true
       },
       id:       { type: String },
@@ -85,7 +85,7 @@ class AuroCheckbox extends LitElement {
     const labelClasses = {
       'label': true,
       'label--cbx': true,
-      'errorBorder': Boolean(this.error)
+      'errorBorder': this.error
     }
 
     return html`

diff --git a/src/auro-checkbox.scss b/src/auro-checkbox.scss
@@ -19,7 +19,7 @@
   display: block;
 }
 
-:host([error='true']) {
+:host([error]) {
   color: var(--auro-color-text-error-on-light);
 }
 

diff --git a/test/auro-checkbox.test.js b/test/auro-checkbox.test.js
@@ -149,8 +149,7 @@ describe('auro-checkbox', () => {
   it('has the expected properties', async () => {
     const expectedId = "testId",
       expectedName = "testName",
-      expectedValue = "testValue",
-      expectedError = "testError";
+      expectedValue = "testValue";
 
     const el = await fixture(html`
       <auro-checkbox
@@ -160,7 +159,7 @@ describe('auro-checkbox', () => {
         checked
         disabled
         required
-        error="${expectedError}"
+        error
       >Checkbox option</auro-checkbox>
     `);
 
@@ -173,10 +172,12 @@ describe('auro-checkbox', () => {
     expect(input.value).to.equal(expectedValue);
     expect(input.name).to.equal(expectedName);
     expect(input.type).to.equal('checkbox');
+    expect(input.getAttribute('aria-invalid')).to.equal('true');
+    expect(input.getAttribute('aria-required')).to.equal('true');
     expect(errorBorder).to.not.be.undefined;
     expect(el).dom.to.equal(`
-    <auro-checkbox id="${expectedId}" name="${expectedName}" value="${expectedValue}" error="${expectedError}" checked disabled required>
-      Checkbox option
-    </auro-checkbox>`);
-  });
+      <auro-checkbox id="${expectedId}" name="${expectedName}" value="${expectedValue}" error checked disabled required>
+        Checkbox option
+      </auro-checkbox>`);
+    });
 });