diff --git a/.changeset/tough-buckets-press.md b/.changeset/tough-buckets-press.md
new file mode 100644
index 000000000..20932c3a6
--- /dev/null
+++ 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
index 130a61b98..45ed56e8c 100644
--- 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` `);
+ } 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
index f314c7eea..c61eeeb53 100644
--- 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
index c0a3d4b9e..c2515dfd9 100644
--- 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
index 7356dd4d2..30d5e30d7 100644
--- 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: () => (
-
+
List
-
+
Gallery
-
+
Presentation
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
index aa7b49fb2..03d5c1204 100644
--- 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 = {