A11y support for s-clickable-chip remove button

Technical Q&A
1

Ran into a small gap today that I can’t find the answer to. It seems that the s-clickable-chip has a hard-coded translation that doesn’t allow passing through a label to enable proper WCAG a11y support for the remove button.

Extracted from the source bundle we’re using:

zi("div", { class: p, role: "group", children: [
  zi("button", { class: "content-button", "aria-label": i, ...d, ...u, children: g }),
  n ? zi("button", {
        "aria-label": o.translate("actions.removeChip"),   // static key, no interpolation
        class: Ci({ "remove-button": true, disabled: a }),
        onClick: t => { t.stopPropagation();
                        e.dispatchEvent(new Event("remove", { bubbles: true })) },
        children: zi("s-icon", { type: "x", size: "small" })
      }) : null
]})

Where as the similar child addValue uses: "Add {label}"

Unless I’m misreading, this seems like a simple miss, and the remove button should behave similarly, with "Remove {label}"?

2

I can reproduce this as well.

<s-clickable-chip removable accessibilitylabel="Status filter">
  Active
</s-clickable-chip>

the component generates a correctly labelled content button:

<button class="content-button" aria-label="Status filter">

but the remove control is only:

<button class="remove-button" aria-label="Remove chip">

So multiple removable chips end up with the same accessible name for their remove controls. This looks like something that should be handled by the component itself rather than patched by consumers.

3

dragino’s reproduction confirms the gap. accessibilityLabel is applied to the chip’s content button, while the generated remove button keeps aria-label="Remove chip".

The current s-clickable-chip API does not expose a remove-specific accessibility label or a slot for replacing the remove button, so I do not see a supported consumer-side way to make that second button item-specific.

That is a real accessibility problem. WAI guidance says repeated action controls should have names that distinguish them, for example “Delete John Doe” rather than several buttons all named “Delete”.

Until Shopify changes the component, I would avoid removable when rendering multiple chips:

  • If the chip’s only action is removal, use a non-removable s-clickable-chip, set accessibilityLabel to "Remove " + label, and handle its click as the remove action.

  • If clicking the chip and removing it are separate actions, keep the chip for its normal action and place a separate icon-only s-button beside it with an accessibilityLabel such as “Remove Active filter”.

I would report the minimal reproduction in the Polaris category of the Shopify Developer Community or through Partner Support. Include the API surface and version, generated DOM, and screen-reader output.

The source-level fix seems to be what you suggested: interpolate the chip label into removeChip, or expose a dedicated removeAccessibilityLabel property.