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 = {