Enhancing Shopify's Clickable Chips: Making 'Remove' Buttons Accessible

Hey everyone! As a Shopify migration expert and someone who spends a lot of time poring over community discussions, I wanted to bring something really important to your attention that recently came up. It’s about making your Shopify stores more accessible, specifically concerning a popular UI component: the s-clickable-chip.

We all know how vital accessibility (often shortened to a11y) is. It’s not just about compliance; it’s about making your store usable and welcoming for all your customers. Recently, a keen developer, nomisp_dev, sparked a great conversation in the Shopify Developer Community about a subtle but significant gap in the s-clickable-chip component, particularly when it comes to its "remove" button.

The Accessibility Hiccup with Shopify's Clickable Chips

The issue, as nomisp_dev pointed out and dragino quickly reproduced, lies in how the s-clickable-chip handles its accessibility labels when it's made "removable." When you have a chip like a filter, for example, that says "Active" and has a little 'x' to remove it, you'd expect a screen reader to announce something helpful like "Remove Active filter."

However, what's actually happening is that while the main content button of the chip gets a proper, descriptive aria-label (like "Status filter" in dragino's example), the generated remove button consistently gets a generic aria-label="Remove chip". Take a look at the reproduction:

  Active

This component correctly generates the content button with:

But the remove control ends up being:

See the problem? If you have multiple filters applied – say, "Status: Active," "Category: Apparel," "Price: $50-$100" – and each has a remove button, a screen reader user would hear "Remove chip," "Remove chip," "Remove chip." This makes it incredibly difficult to distinguish which specific filter each button will remove. As cuongnm_trooix rightly pointed out, WAI guidelines are clear: repeated action controls should have distinguishing names, like "Delete John Doe" instead of just "Delete" multiple times.

Why It's a Component-Level Fix (and What Shopify Could Do)

The core of the problem, as nomisp_dev dug into, is that the s-clickable-chip component's source code uses a static translation key for the remove button's aria-label:

"aria-label": o.translate("actions.removeChip"), // static key, no interpolation

This means it doesn't dynamically pull in the chip's actual content or label. Other similar components often interpolate values (like "Add {label}"), but the remove button currently doesn't. This isn't something you can easily fix from your theme or app code without digging deep into the component's internals, which isn't a supported approach.

Ideally, Shopify would update the component to either interpolate the chip's label into the removeChip translation or expose a dedicated removeAccessibilityLabel property that developers can use to provide a custom, descriptive label. This would make the component fully compliant and much more user-friendly for everyone.

Immediate Workarounds for Your Store

While we wait for a potential update from Shopify, cuongnm_trooix shared some excellent, supported workarounds that you can implement right now to improve accessibility for your removable chips:

1. For Chips Where Removal is the ONLY Action

If the chip's sole purpose is to be removed (e.g., a tag you're dismissing), you can bypass the default removable functionality and make the entire chip act as the remove button. Here's how:

• Use a non-removable s-clickable-chip: Don't include the removable attribute.
• Set a descriptive accessibilityLabel: Make sure its accessibilityLabel clearly states what it removes, for example, "Remove " + label (e.g., "Remove Active filter").
• Handle the click as the remove action: In your code, when this chip is clicked, trigger the removal of the item it represents.

2. For Chips with Distinct Click and Remove Actions

Sometimes, clicking a chip does one thing (like applying a filter), and clicking the 'x' does another (removing the filter). In these cases, you'll need to separate the remove action from the chip itself:

• Keep the s-clickable-chip for its normal action: Let it function as intended for its primary click action.
• Place a separate icon-only s-button beside it: This button will be your dedicated 'remove' control.
• Give the s-button an item-specific accessibilityLabel: For instance, . This ensures screen readers announce exactly what the button does.

Both of these approaches ensure that your customers using screen readers get the clear, specific information they need to navigate your store effectively.

How to Help Get a Permanent Fix

If you've encountered this issue or plan to implement these workarounds, it's incredibly helpful to report it to Shopify. The more reports they receive, especially with clear reproductions, the higher priority it gets. Here’s what cuongnm_trooix recommends:

1. Use the Polaris Category: Report the minimal reproduction in the Polaris category of the Shopify Developer Community.
2. Provide Details: Include the API surface and version you're using, the generated DOM (like the code snippets above), and ideally, screen-reader output if you can capture it.
3. Partner Support: If you're a Shopify Partner, you can also report it directly through Partner Support.

By collectively highlighting these gaps, we help Shopify improve their platform for everyone. It's a great example of how the community helps evolve the tools we all use every day. Keep those eyes peeled for accessibility improvements, and let's keep making Shopify stores better for all users!