Update price.liquid HTML structure #662
Conversation
|
@LucasLacerdaUX store demo link is broken. |
snippets/price.liquid
Outdated
| <dt class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</dt> | ||
| <dd {% if show_badges == false %}class="price__last"{% endif %}> | ||
| <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span> | ||
| <div class="price-item price-item--last"> |
There was a problem hiding this comment.
According to docs on permitted content of <small> element, <div> is technically not a valid child here
There was a problem hiding this comment.
Updated to use span and added a display: block to the unit-price element to keep the original layout.
Let me know if that works :)
EDIT: Forgot to push the commit. Code is now updated.
| <dt class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</dt> | ||
| <dd {% if show_badges == false %}class="price__last"{% endif %}> | ||
| <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span> | ||
| <div class="price-item price-item--last"> | ||
| <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span> | ||
| <span aria-hidden="true">/</span> | ||
| <span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span> |
There was a problem hiding this comment.
Could we adjust this string? The uppercase may render "P-E-R" when announced by screen readers. Removing the uppercase announces as expected but still may not be clear. Can we consider "for every" or "for each"?
/cc @gretchen-willenberg
There was a problem hiding this comment.
@svinkle cc'ing @melissaperreault to consult on the user of uppercase design. From a text perspective, "per" is used as as part of a product resource Cost per item label (attached). In Dawn, the only setting use was the Collection product grid setting (attached).
I'm fine with Products on a page for Collection setting, but the string above seems to be pricing. We should request updating it in the product resources as well. Unit price would be shorter and is used (although a bit B2B)
There was a problem hiding this comment.
This bit of content is visually hidden so there'd be no visual change, only how the content is announced.
Let's keep the content as-is for now, perhaps address in another PR. I'm keen to have usability testing done with Fable soon. If this comes up as an issue we can revisit then.
LucasLacerdaUX
dismissed stale reviews from svinkle and KaichenWang
via
25abe9a
| </div> | ||
| <div class="price__sale"> | ||
| <dt class="price__compare"> | ||
| {%- unless product.price_varies == false and product.compare_at_price_varies %} |
There was a problem hiding this comment.
| {%- unless product.price_varies == false and product.compare_at_price_varies %} | |
| {%- unless product.price_varies == false and product.compare_at_price_varies -%} |
Why are these changes introduced?
Updates the markup for Product price to feature valid/accessible HTML structure.
Fixes #74.
What approach did you take?
Followed suggestions on #74:
Demo links
Checklist