Cart remove link aria-label contains double-escaped HTML entities

Open Beginner friendly
#3,971 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
92/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Domain
accessibility, frontend

Research direction

Start with sections/main-cart-items.liquid:305 and snippets/cart-drawer.liquid:354, then compare their remove-link translation with snippets/quick-order-list-row.liquid:285. Remove the redundant escaping at both sites as described, and verify with a product title containing quotation marks that the computed accessible name shows the quotation marks rather than an entity string.

Written by the indexing model from the issue text.

Description

Describe the current behavior

Version: Dawn v15.4.0

Description

The cart line-item remove link applies | escape to a value that the t
filter has already escaped, producing a double-escaped entity in the rendered
aria-label. Screen readers announce the literal entity text.

sections/main-cart-items.liquid:305 and snippets/cart-drawer.liquid:354:

{{ 'sections.cart.remove_title' | t: title: item.title | escape }}

t escapes interpolated values for non-_html keys, so item.title is
already 17" x 5.5" before | escape runs. The second escape then
escapes the &, and the server emits aria-label="Remove … 17" …",
which computes to an accessible name containing ".

Dawn already does this correctly elsewhere.
snippets/quick-order-list-row.liquid:285 omits the | escape and produces
a correct accessible name from the same construction.

Reproduce

  1. Create a product whose variant title contains a " character (common for
    dimensions — 40" x 5.8").
  2. Add it to the cart.
  3. Inspect the remove link's computed accessible name, or listen with a
    screen reader.

Expected: Remove … 40" x 5.8" / Semi-Gloss
Actual: Remove … 40" x 5.8" / Semi-Gloss

On the store where this was found, 407 of 578 products (70%) are affected,
because inch marks appear throughout the catalogue.

Fix

Drop the redundant | escape at both sites, matching
quick-order-list-row.liquid.

Describe the expected behavior

Version information (Dawn, browsers and operating systems)

  • Dawn Version: 7.0.1
  • Chrome Version 108.0.5359.124
  • macOS Version 13.1

Possible solution

Additional context/screenshots

Dominant language
Liquid
Stars
3.1k
Forks
4.5k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Shopify/dawn

All issues in Shopify/dawn

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.