feat: enhance accessibility and add tests for auro-counter and auro-c…

…ounter-group components #195
AlaskaAirlines · Feb 5, 2025 · 3d083ed · 3d083ed
1 parent ee205bb
commit 3d083ed
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/components/counter/src/auro-counter.js b/components/counter/src/auro-counter.js
@@ -271,12 +271,13 @@ export class AuroCounter extends LitElement {
     return html`
       <div class="counter">
         <div class="content" >
-          <label class="label"><slot></slot></label>
+          <label id="counter-label" class="label"><slot></slot></label>
           <slot name="description"></slot>
         </div>
         
-        <div part="counterControl">
+        <div part="counterControl" aria-labelledby="counter-label">
           <auro-counter-button
+          arialabel="Decrement"
           part="controlMinus"
           @click="${() => this.decrement()}"
           ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
@@ -289,6 +290,7 @@ export class AuroCounter extends LitElement {
           </div>
 
           <auro-counter-button
+          arialabel="Increment"
           part="controlPlus"
           @click="${() => this.increment()}"
           ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"

diff --git a/components/counter/test/auro-counter-group.test.js b/components/counter/test/auro-counter-group.test.js
@@ -1,6 +1,6 @@
-/* eslint-disable no-undef, no-magic-numbers */
+/* eslint-disable no-undef, no-magic-numbers, max-lines */
 
-import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+import { fixture, html, expect, elementUpdated, assert } from '@open-wc/testing';
 import '../src/index.js';
 
 describe('auro-counter-group: configureCounters', () => {
@@ -249,3 +249,33 @@ describe('auro-counter-group: rendering logic', () => {
 
 });
 
+describe('auro-counter-group: accessibility tests', () => {
+  const ignoredRules = {
+    ignoredRules: ['color-contrast'],
+  };
+
+  it('auro-counter-group passes accessibility test', async () => {
+    const el = await fixture(html`
+      <auro-counter-group>
+        <auro-counter value="2"></auro-counter>
+        <auro-counter value="3"></auro-counter>
+      </auro-counter-group>
+    `);
+
+    await assert.isAccessible(el, ignoredRules);
+  });
+
+  it('auro-counter-group with dropdown passes accessibility test', async () => {
+    const el = await fixture(html`
+      <auro-counter-group isDropdown>
+        <span slot="label">Counter Group Label</span>
+        <span slot="helpText">Help Text</span>
+        <auro-counter value="2"></auro-counter>
+        <auro-counter value="3"></auro-counter>
+      </auro-counter-group>
+    `);
+
+    await assert.isAccessible(el, ignoredRules);
+  });
+
+});
diff --git a/components/counter/test/auro-counter.test.js b/components/counter/test/auro-counter.test.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-expressions, no-undef, no-magic-numbers, arrow-parens */
 
-import { fixture, html, expect } from '@open-wc/testing';
+import { fixture, html, expect, assert } from '@open-wc/testing';
 import '../src/index.js';
 
 describe('auro-counter: increment', () => {
@@ -84,3 +84,19 @@ describe('auro-counter: isIncrementDisabled', () => {
     expect(el.isIncrementDisabled(el.max)).to.be.true;
   });
 });
+
+describe('auro-counter: accessibility tests', () => {
+  const ignoredRules = {
+    ignoredRules: ['color-contrast'],
+  };
+
+  it('is accessible', async () => {
+    const el = await fixture(html`<auro-counter value="5" min="0" max="10">Counter</auro-counter>`);
+    await assert.isAccessible(el, ignoredRules);
+  });
+
+  it('is accessible when disabled', async () => {
+    const el = await fixture(html`<auro-counter value="5" min="0" max="10" disabled>Counter</auro-counter>`);
+    await assert.isAccessible(el, ignoredRules);
+  });
+});