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.

.changeset/tough-buckets-press.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Require an a11y-label for icon buttons

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(

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.");
     }