Require an accessible label be present for icon-only buttons (#699)

* feat(button): require a11y-label for icon buttons Because the icon in an icon button is set to aria-hidden="true", it is not visible to screen readers. This change requires an a11y-label for icon buttons to ensure that the button is accessible. * fix: unit test buttons were inaccessible * fix: add accessible label to icon button group stories
ithaka · Mar 7, 2024 · 38322bc · 38322bc
1 parent 13ed2f3
commit 38322bc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 4 deletions.
diff --git a/.changeset/tough-buckets-press.md b/.changeset/tough-buckets-press.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Require an a11y-label for icon buttons
diff --git a/packages/pharos/src/components/button/pharos-button.test.ts b/packages/pharos/src/components/button/pharos-button.test.ts
@@ -182,8 +182,24 @@ describe('pharos-button', () => {
         .thrown;
     });
 
+    it('throws an error for an icon only button with no accessible label', async () => {
+      let errorThrown = false;
+      try {
+        await fixture(html` <test-pharos-button icon="download"></test-pharos-button> `);
+      } catch (error) {
+        if (error instanceof Error) {
+          errorThrown = true;
+          expect(error?.message).to.be.equal(
+            "Icon only buttons must have an accessible name. Please provide an 'a11y-label' attribute for the button using the 'download' icon."
+          );
+        }
+      }
+      expect(errorThrown).to.be.true;
+    });
+
     it('allows for an icon to be shown as the content of the button', async () => {
       component.icon = 'download';
+      component.a11yLabel = 'Download';
       await component.updateComplete;
 
       const icon = component.renderRoot.querySelector(

diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts
@@ -196,7 +196,11 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
         `${this.variant} is not a valid variant. Valid variants are: ${VARIANTS.join(', ')}`
       );
     }
-
+    if (this.icon && !this.a11yLabel) {
+      throw new Error(
+        `Icon only buttons must have an accessible name. Please provide an 'a11y-label' attribute for the button using the '${this.icon}' icon.`
+      );
+    }
     if (this.label) {
       console.warn("The 'label' attribute is deprecated. Use 'a11y-label' instead.");
     }

diff --git a/packages/pharos/src/components/input-group/pharos-input-group.test.ts b/packages/pharos/src/components/input-group/pharos-input-group.test.ts
@@ -101,6 +101,7 @@ describe('pharos-input-group', () => {
   it('adjusts the validated icon position when elements are dynamically appended to the group', async () => {
     const button = document.createElement('test-pharos-button');
     button.icon = 'close';
+    button.a11yLabel = 'close';
     component.appendChild(button);
     component.validated = true;
 

diff --git a/packages/pharos/src/components/toggle-button-group/PharosToggleButtonGroup.react.stories.jsx b/packages/pharos/src/components/toggle-button-group/PharosToggleButtonGroup.react.stories.jsx
@@ -87,13 +87,13 @@ export const Events = {
 export const IconsOnly = {
   render: () => (
     <PharosToggleButtonGroup>
-      <PharosToggleButton icon="view-list" id="view-list-button">
+      <PharosToggleButton icon="view-list" a11yLabel="view list" id="view-list-button">
         List
       </PharosToggleButton>
-      <PharosToggleButton icon="view-gallery" id="view-gallery-button">
+      <PharosToggleButton icon="view-gallery" a11yLabel="view gallery" id="view-gallery-button">
         Gallery
       </PharosToggleButton>
-      <PharosToggleButton icon="image" id="view-presentation-button">
+      <PharosToggleButton icon="image" a11yLabel="view presentation" id="view-presentation-button">
         Presentation
       </PharosToggleButton>
     </PharosToggleButtonGroup>

diff --git a/packages/pharos/src/components/toggle-button-group/pharos-toggle-button-group.wc.stories.jsx b/packages/pharos/src/components/toggle-button-group/pharos-toggle-button-group.wc.stories.jsx
@@ -77,14 +77,17 @@ export const IconsOnly = {
       <storybook-pharos-toggle-button-group>
         <storybook-pharos-toggle-button
           icon="view-list"
+          a11y-label="view list"
           id="view-list-button"
         ></storybook-pharos-toggle-button
         ><storybook-pharos-toggle-button
           icon="view-gallery"
+          a11y-label="view gallery"
           id="view-gallery-button"
         ></storybook-pharos-toggle-button
         ><storybook-pharos-toggle-button
           icon="image"
+          a11y-label="view presentation"
           id="view-presentation-button"
         ></storybook-pharos-toggle-button>
       </storybook-pharos-toggle-button-group>