tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor updates to make the old price more accessible. Swapped price block to be a paragraph rather than div, wrapped old price in del tags, and added aria-lablel explaining that 169.99 was the old price

This commit is contained in:
Robert McGovern 2022-10-10 14:58:57 +01:00
parent 6d84eb2185
commit 7b0b8f2dc6
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
projects/FrontendMentor/newbie/product-preview-card-component/css/style.css
View File

@ -169,6 +169,14 @@ body {
color: var(--col-price-old); color: var(--col-price-old);
} }
/* I tried using this but wasn't picked up in Safari / VoiceOver on macOS
product-card__price-old::before {
content: "Old pricing was ";
}
*/
.product-card__button-buy { .product-card__button-buy {
font-family: var(--ff-button); font-family: var(--ff-button);
font-size: var(--fs-button); font-size: var(--fs-button);

12
projects/FrontendMentor/newbie/product-preview-card-component/index.html
View File

@ -55,14 +55,14 @@
A floral, solar and voluptuous interpretation composed by Olivier Polge, A floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL. Perfumer-Creator for the House of CHANEL.
</p> </p>
<div class="product-card__price-block"> <p class="product-card__price-block">
<div class="product-card__price-current"> <span class="product-card__price-current">
$149.99 $149.99
</div> </span>
<div class="product-card__price-old"> <del class="product-card__price-old" aria-label="The old price was $169.99">
$169.99 $169.99
</div> </del>
</div> </p>
<button class="product-card__button-buy"> <button class="product-card__button-buy">
<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">