diff --git a/.changeset/thirty-carrots-suffer.md b/.changeset/thirty-carrots-suffer.md
new file mode 100644
index 000000000..dadd08df0
--- /dev/null
+++ b/.changeset/thirty-carrots-suffer.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Require all icons to have a label or be explicitly hidden
diff --git a/packages/pharos/src/components/alert/pharos-alert.test.ts b/packages/pharos/src/components/alert/pharos-alert.test.ts
index 7c7db808c..c19dec1fe 100644
--- a/packages/pharos/src/components/alert/pharos-alert.test.ts
+++ b/packages/pharos/src/components/alert/pharos-alert.test.ts
@@ -39,7 +39,6 @@ describe('pharos-alert', () => {
class="alert__icon"
data-pharos-component="PharosIcon"
a11y-hidden="true"
- description=""
name="info-inverse"
>
diff --git a/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav-category.ts b/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav-category.ts
index 25766b376..8ee3e460a 100644
--- a/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav-category.ts
+++ b/packages/pharos/src/components/dropdown-menu-nav/pharos-dropdown-menu-nav-category.ts
@@ -52,7 +52,7 @@ export class PharosDropdownMenuNavCategory extends ScopedRegistryMixin(FocusMixi
})}"
>
-
+
`;
}
}
diff --git a/packages/pharos/src/components/icon/pharos-icon.test.ts b/packages/pharos/src/components/icon/pharos-icon.test.ts
index d93b076b9..d41f274d3 100644
--- a/packages/pharos/src/components/icon/pharos-icon.test.ts
+++ b/packages/pharos/src/components/icon/pharos-icon.test.ts
@@ -7,7 +7,9 @@ describe('pharos-icon', () => {
let component: PharosIcon;
beforeEach(async () => {
- component = await fixture(html``);
+ component = await fixture(
+ html``
+ );
});
it('is accessible', async () => {
@@ -15,9 +17,9 @@ describe('pharos-icon', () => {
});
it('throws an error for an invalid icon name', async () => {
- component = await fixture(html` `).catch(
- (e) => e
- );
+ component = await fixture(
+ html` `
+ ).catch((e) => e);
expect('Could not get icon named "fake"').to.be.thrown;
});
@@ -46,26 +48,6 @@ describe('pharos-icon', () => {
expect(svg?.getAttribute('aria-hidden')).to.equal('true');
});
- it('adds aria-hidden when a11y-hidden is not provided and there is no title or description', async () => {
- await component.updateComplete;
- const svg = component.renderRoot.querySelector('svg');
- expect(svg?.getAttribute('aria-hidden')).to.equal('true');
- });
-
- it('does not add aria-hidden if there is a title', async () => {
- component.a11yTitle = 'some-label';
- await component.updateComplete;
- const svg = component.renderRoot.querySelector('svg');
- expect(svg?.getAttribute('aria-hidden')).not.to.exist;
- });
-
- it('does not add aria-hidden if there is a description', async () => {
- component.description = 'some-label';
- await component.updateComplete;
- const svg = component.renderRoot.querySelector('svg');
- expect(svg?.getAttribute('aria-hidden')).not.to.exist;
- });
-
it('sets the svg title properly when a11y-title is set', async () => {
const labelText = 'This is a test title';
component.a11yTitle = labelText;
@@ -74,11 +56,12 @@ describe('pharos-icon', () => {
expect(title).to.contain.text(labelText);
});
- it('sets the svg title properly when description is set', async () => {
- const labelText = 'This is a test title';
- component.description = labelText;
- await component.updateComplete;
- const title = component.renderRoot.querySelector('svg>title');
- expect(title).to.contain.text(labelText);
+ it('throws an error when neither a11y-title or a11y-hidden are set', async () => {
+ component = await fixture(html` `).catch(
+ (e) => e
+ );
+ expect(
+ 'All icons must have an accessible title (a11y-title) or be marked as hidden to assistive technology (a11y-hidden).'
+ ).to.be.thrown;
});
});
diff --git a/packages/pharos/src/components/icon/pharos-icon.ts b/packages/pharos/src/components/icon/pharos-icon.ts
index f7c55f271..ea2530e8b 100644
--- a/packages/pharos/src/components/icon/pharos-icon.ts
+++ b/packages/pharos/src/components/icon/pharos-icon.ts
@@ -27,14 +27,6 @@ export class PharosIcon extends PharosElement {
@property({ type: String, reflect: true })
public name?: IconName;
- /**
- * A description of what the icon represents
- * @attr description
- * @deprecated Please use a11yTitle instead.
- */
- @property({ type: String, reflect: true })
- public description = '';
-
/**
* Indicates the title to apply as the accessible name of the icon.
* @attr a11y-title
@@ -55,9 +47,10 @@ export class PharosIcon extends PharosElement {
protected override update(changedProperties: PropertyValues): void {
super.update && super.update(changedProperties);
- if (this.description.length) {
- console.warn(
- "The 'description' attribute of pharos-icon is deprecated and will be removed in the next major release. Please use a11y-title or mark the icon as decorative by using a11y-hidden instead."
+
+ if (!this.a11yHidden && !this.a11yTitle) {
+ throw new Error(
+ `All icons must have an accessible title (a11y-title) or be marked as hidden to assistive technology (a11y-hidden).`
);
}
}
@@ -84,12 +77,6 @@ export class PharosIcon extends PharosElement {
protected override render(): TemplateResult {
const size = this._getIconSize();
- const accessibilityLabel = this.a11yTitle || this.description;
- let hideIcon = this.a11yHidden;
- // Check accessibilityLabel length for backwards compatibility until description is removed
- if (hideIcon !== 'true' && accessibilityLabel.length === 0) {
- hideIcon = 'true';
- }
return html`
`;
diff --git a/packages/pharos/src/components/text-input/pharos-text-input.test.ts b/packages/pharos/src/components/text-input/pharos-text-input.test.ts
index a760c3ba8..628ca0d33 100644
--- a/packages/pharos/src/components/text-input/pharos-text-input.test.ts
+++ b/packages/pharos/src/components/text-input/pharos-text-input.test.ts
@@ -199,7 +199,6 @@ describe('pharos-text-input', () => {
class="input__icon"
data-pharos-component="PharosIcon"
a11y-hidden="true"
- description=""
name="exclamation"
>
@@ -234,7 +233,6 @@ describe('pharos-text-input', () => {
class="input__icon"
data-pharos-component="PharosIcon"
a11y-hidden="true"
- description=""
name="checkmark"
>