Skip to content

fix: hide decorative pds-icon from assistive tech + stop suppressing harness color-contrast #757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
QuintonJason merged 3 commits into from
Jun 15, 2026
Merged

fix: hide decorative pds-icon from assistive tech + stop suppressing harness color-contrast #757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
059fbbf
fix: mark decorative pds-icon usages aria-hidden to satisfy role-img-alt
QuintonJason Jun 1, 2026
421ca40
test: drop role-img-alt suppressions after icon fix; disable harness-…
QuintonJason Jun 1, 2026
058967e
test: add error-icon aria-hidden spec and select error-state axe cove…
QuintonJason Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion libs/core/src/components/pds-accordion/pds-accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export class PdsAccordion {
<details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon={downSmall} part="accordion-icon" />
<pds-icon aria-hidden="true" icon={downSmall} part="accordion-icon" />
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand Down
8 changes: 1 addition & 7 deletions libs/core/src/components/pds-accordion/test/pds-accordion.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,7 @@ describe('pds-accordion accessibility', () => {
</pds-accordion>
`);
await page.waitForChanges();
// `role-img-alt` is disabled here: the accordion trigger's chevron
// (pds-icon) renders role="img" without an accessible name. Matches the
// documented suppression in the pds-input test — remove once pds-icon
// exposes an accessible label.
const violations = await runAxe(page, {
rules: { 'role-img-alt': { enabled: false } },
});
const violations = await runAxe(page);
expect(formatViolations(violations)).toBe('');
});
});
12 changes: 6 additions & 6 deletions libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('pds-accordion', () => {
<details>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon="${downSmall}"></pds-icon>
<pds-icon aria-hidden="true" icon="${downSmall}"></pds-icon>
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand All @@ -36,7 +36,7 @@ describe('pds-accordion', () => {
<details open>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon="${downSmall}"></pds-icon>
<pds-icon aria-hidden="true" icon="${downSmall}"></pds-icon>
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand All @@ -59,7 +59,7 @@ describe('pds-accordion', () => {
<details>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon="${downSmall}"></pds-icon>
<pds-icon aria-hidden="true" icon="${downSmall}"></pds-icon>
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand All @@ -82,7 +82,7 @@ describe('pds-accordion', () => {
<details>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon="${downSmall}"></pds-icon>
<pds-icon aria-hidden="true" icon="${downSmall}"></pds-icon>
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand All @@ -106,7 +106,7 @@ describe('pds-accordion', () => {
<details>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon="${downSmall}"></pds-icon>
<pds-icon aria-hidden="true" icon="${downSmall}"></pds-icon>
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand Down Expand Up @@ -164,7 +164,7 @@ describe('pds-accordion', () => {
<details open>
<summary part="accordion-button">
<slot name="label">Details</slot>
<pds-icon icon="${downSmall}"></pds-icon>
<pds-icon aria-hidden="true" icon="${downSmall}"></pds-icon>
</summary>
<div part="accordion-body" class="pds-accordion__body">
<slot />
Expand Down
7 changes: 1 addition & 6 deletions libs/core/src/components/pds-filters/test/pds-filters.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,12 +226,7 @@ describe('pds-filters accessibility', () => {
await page.waitForChanges();
const popover1 = await page.find('pds-filter[component-id="filter1"] >>> .pds-filter__popover');
expect(await popover1.isVisible()).toBe(true);
// `color-contrast` is disabled here: axe flags `.pds-filter__button-text`
// in the bare e2e harness, which renders without the full theme/global
// styles, so contrast can't be measured reliably here.
const violations = await runAxe(page, {
rules: { 'color-contrast': { enabled: false } },
});
const violations = await runAxe(page);
expect(formatViolations(violations)).toBe('');
});
});
2 changes: 1 addition & 1 deletion libs/core/src/components/pds-input/pds-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,7 @@ export class PdsInput {

{errorMessage && (
<p class="pds-input__error-message" id={messageId(componentId, 'error')}>
<pds-icon icon={danger} size="small" />
<pds-icon aria-hidden="true" icon={danger} size="small" />

@pixelflips pixelflips Jun 5, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking, for consistency: the same aria-hidden="true" change on the decorative icon had its .spec.tsx snapshot updated for pds-accordion, pds-select, and pds-sortable-item, but pds-input.spec.tsx wasn't updated to assert it. The existing error-message spec only checks expect(errorMessage).not.toBeNull(), so this attribute isn't pinned by a spec snapshot here. Worth adding for parity — the e2e axe test already covers the behavior end-to-end.

{errorMessage}
</p>
)}
Expand Down
7 changes: 1 addition & 6 deletions libs/core/src/components/pds-input/test/pds-input.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,12 +237,7 @@ describe('pds-input', () => {
await page.setContent(
'<pds-input label="Email" component-id="email" error-message="Enter a valid email address" invalid></pds-input>',
);
// `role-img-alt` is disabled here pending a fix on the internal error
// icon (it renders without an accessible name). Tracked separately;
// remove this override once the icon exposes a label.
const violations = await runAxe(page, {
rules: { 'role-img-alt': { enabled: false } },
});
const violations = await runAxe(page);
expect(formatViolations(violations)).toBe('');
});
});
Expand Down
3 changes: 3 additions & 0 deletions libs/core/src/components/pds-input/test/pds-input.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,9 @@ describe('pds-input', () => {

const errorMessage = root.shadowRoot.querySelector('.pds-input__error-message');
expect(errorMessage).not.toBeNull();

const errorIcon = errorMessage?.querySelector('pds-icon');
expect(errorIcon?.getAttribute('aria-hidden')).toBe('true');
});

it('renders a prefix', async () => {
Expand Down
4 changes: 2 additions & 2 deletions libs/core/src/components/pds-select/pds-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ export class PdsSelect {
private getErrorMessage() {
return this.errorMessage && (
<p class="pds-select__error-message" id={messageId(this.componentId, 'error')} aria-live="assertive">
<pds-icon icon={danger} size="small"></pds-icon>
<pds-icon aria-hidden="true" icon={danger} size="small"></pds-icon>
{this.errorMessage}
</p>
);
Expand Down Expand Up @@ -391,7 +391,7 @@ export class PdsSelect {
<slot onSlotchange={this.handleSlotChange}></slot>
</div>
{this.renderMessages()}
{!this.multiple && <pds-icon class="pds-select__select-icon" icon={enlarge} />}
{!this.multiple && <pds-icon aria-hidden="true" class="pds-select__select-icon" icon={enlarge} />}
</div>
</Host>
);
Expand Down
20 changes: 13 additions & 7 deletions libs/core/src/components/pds-select/test/pds-select.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,13 +150,19 @@ describe('pds-select accessibility', () => {
<option value="ca">Canada</option>
</pds-select>
`);
// `role-img-alt` is disabled here: the select's dropdown chevron (pds-icon)
// renders role="img" without an accessible name. Matches the documented
// suppression in the pds-input test — remove once pds-icon exposes an
// accessible label.
const violations = await runAxe(page, {
rules: { 'role-img-alt': { enabled: false } },
});
const violations = await runAxe(page);
Comment thread
QuintonJason marked this conversation as resolved.
expect(formatViolations(violations)).toBe('');
});

it('has no axe violations with an error message', async () => {
const page = await newE2EPage();
await page.setContent(`
<pds-select component-id="country" label="Country" error-message="Please select a country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</pds-select>
`);
const violations = await runAxe(page);
expect(formatViolations(violations)).toBe('');
});
});
18 changes: 9 additions & 9 deletions libs/core/src/components/pds-select/test/pds-select.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand Down Expand Up @@ -68,7 +68,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
<option value="1">Option 1</option>
Expand All @@ -95,7 +95,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand Down Expand Up @@ -147,7 +147,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand Down Expand Up @@ -177,7 +177,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand All @@ -203,7 +203,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand All @@ -229,7 +229,7 @@ describe('pds-select', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand Down Expand Up @@ -724,7 +724,7 @@ describe('action slot', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
<span slot="action">Help</span>
Expand Down Expand Up @@ -753,7 +753,7 @@ describe('action slot', () => {
<div aria-hidden="true" class="hidden">
<slot></slot>
</div>
<pds-icon class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
<pds-icon aria-hidden="true" class="pds-select__select-icon" icon="${enlarge}"></pds-icon>
</div>
</mock:shadow-root>
</pds-select>
Expand Down
2 changes: 1 addition & 1 deletion libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class PdsSortableItem {
<Host class="pds-sortable-item" id={this.componentId}>
{this.showHandle && (
<div class="pds-sortable-item__handle">
<pds-icon icon={handleIcon}></pds-icon>
<pds-icon aria-hidden="true" icon={handleIcon}></pds-icon>
</div>
)}
<slot></slot>
Expand Down
2 changes: 1 addition & 1 deletion libs/core/src/components/pds-sortable/pds-sortable-item/test/pds-sortable-item.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe('pds-sortable-item', () => {
expect(page.root).toEqualHtml(`
<pds-sortable-item class="pds-sortable-item" show-handle="true">
<div class="pds-sortable-item__handle">
<pds-icon icon="${handleIcon}"></pds-icon>
<pds-icon aria-hidden="true" icon="${handleIcon}"></pds-icon>
</div>
</pds-sortable-item>
`);
Expand Down
8 changes: 1 addition & 7 deletions libs/core/src/components/pds-sortable/test/pds-sortable.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,7 @@ describe('pds-sortable accessibility', () => {
<pds-sortable-item>Item 3</pds-sortable-item>
</pds-sortable>
`);
// `role-img-alt` is disabled here: each item's drag handle (pds-icon)
// renders role="img" without an accessible name. Matches the documented
// suppression in the pds-input test — remove once pds-icon exposes an
// accessible label.
const violations = await runAxe(page, {
rules: { 'role-img-alt': { enabled: false } },
});
const violations = await runAxe(page);
expect(formatViolations(violations)).toBe('');
});
});
7 changes: 1 addition & 6 deletions libs/core/src/components/pds-toast/test/pds-toast.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,12 +302,7 @@ describe('pds-toast accessibility', () => {
<span>This is a status message</span>
</pds-toast>
`);
// `color-contrast` is disabled here: axe flags the message text in the bare
// e2e harness, which renders without the full theme/global styles, so
// contrast can't be measured reliably (the result is flaky run-to-run).
const violations = await runAxe(page, {
rules: { 'color-contrast': { enabled: false } },
});
const violations = await runAxe(page);
expect(formatViolations(violations)).toBe('');
});
});
Loading