Shopify Clickable Chips Accessibility Fix

Hey fellow store owners and developers! Ever been knee-deep in building a custom Shopify app or theme, focusing on a seamless user experience, and then hit a snag that just feels... off? That's exactly what happened in a recent community discussion I was following, and it brought up a really important point about accessibility, specifically with Shopify's s-clickable-chip component.

As a migration expert and someone who loves digging into the nitty-gritty of Shopify development, I often see these kinds of discussions. This one, started by nomisp_dev, highlighted a crucial, yet subtle, accessibility gap that can impact how users with screen readers interact with your store. Let's dive into what the community uncovered and, more importantly, how you can address it right now.

The Problem: Generic 'Remove Chip' Labels

The core of the issue lies in the s-clickable-chip component, particularly when you make it removable. These chips are super handy for things like displaying active filters, tags, or selected items. You click them for one action, and if they're removable, a little 'X' appears to clear them.

The problem arises because the automatically generated 'remove' button for these chips has a generic aria-label="Remove chip". This might seem minor, but as cuongnm_trooix pointed out, it's a real accessibility problem according to WAI (Web Accessibility Initiative) guidance. Imagine a user relying on a screen reader encountering multiple active filters like "Active," "In Stock," and "Sale." If each of their remove buttons is just labeled "Remove chip," it's impossible for the user to know *which* chip they're about to remove without extra effort. WAI suggests names that distinguish controls, like "Delete John Doe" instead of just "Delete."

nomisp_dev, who kicked off the discussion, dug into the component's source bundle and noticed that while other parts of the component might interpolate labels (like an "Add {label}" pattern), the remove button's aria-label was hard-coded:

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
]})

As you can see, o.translate("actions.removeChip") is a static key, meaning no dynamic label interpolation happens here. This confirms the "simple miss" suspicion, where a dynamic label like "Remove {label}" would be ideal.

Reproducing the Issue

dragino quickly jumped in to confirm the issue with a clear reproduction. When you use the s-clickable-chip like this:


  Active

The component correctly generates the content button's label:

But the remove button's label remains generic:

This means if you have multiple chips, each with its own accessibilityLabel for the content, their respective remove buttons will all sound the same to a screen reader. Not ideal at all for a truly accessible experience!

Community-Backed Workarounds for Now

Since the s-clickable-chip API currently doesn't expose a way to set a remove-specific accessibility label, cuongnm_trooix offered some excellent consumer-side workarounds. These are temporary solutions until Shopify updates the component, but they're crucial for maintaining accessibility on your store. Here’s how you can implement them:

Workaround 1: When the Chip's ONLY Action is Removal

If your chip's sole purpose is to be removed (e.g., displaying a selected tag that you can only click to remove, not to trigger another action), you can adapt the chip itself:

Use a non-removable s-clickable-chip: Don't include the removable attribute.
Set accessibilityLabel for removal: Set the accessibilityLabel of the chip to clearly indicate what it removes.
Handle click as remove action: When the chip is clicked, treat that event as the remove action.

Example: Instead of having a chip that says "Active" with a separate 'X' to remove, the entire chip becomes "Remove Active Filter" and clicking it removes the filter.

Workaround 2: When Clicking the Chip and Removing it are Separate Actions

This scenario is more common: you click the chip to, say, view details about a filter, but you also want a clear way to remove it. Here, you'll need to use a separate button for removal:

Keep the s-clickable-chip for its normal action: Let your s-clickable-chip function as intended, with its own meaningful accessibilityLabel.
Place a separate icon-only s-button beside it: This button will visually represent the 'X' for removal.
Set an item-specific accessibilityLabel for the new button: Give this s-button a descriptive label like "Remove Active filter" or "Remove 'In Stock' filter."

This approach ensures that both actions (clicking the chip for its primary function and clicking the separate button for removal) have distinct, accessible names for screen reader users.

Reporting for a Long-Term Fix

While these workarounds are great for immediate implementation, the community agreed that this is something Shopify's component itself should handle. cuongnm_trooix rightly suggested reporting the minimal reproduction in the Polaris category of the Shopify Developer Community or through Partner Support. When you do, make sure to include:

The API surface and version you're using.
The generated DOM (Document Object Model).
Screen-reader output if you have it.

The ideal fix, as suggested by the community, would be for Shopify to either interpolate the chip label into the removeChip translation key or expose a dedicated removeAccessibilityLabel property in the component's API.

Accessibility isn't just a nice-to-have; it's fundamental to creating inclusive and user-friendly online stores. By implementing these workarounds and advocating for a component-level fix, we're not only improving the experience for all users but also contributing to a stronger, more accessible Shopify ecosystem. It's these kinds of detailed discussions in the community that truly help us all build better. If you're looking to start or grow your own accessible online venture, remember that paying attention to these details can make a huge difference. You can start your Shopify store today and join a platform that supports a thriving developer community focused on continuous improvement.

Shopify Clickable Chips: Boosting Accessibility for 'Remove' Buttons