From 7b0b8f2dc67de6c1e6122308e286f0a63fa87310 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Mon, 10 Oct 2022 14:58:57 +0100
Subject: [PATCH] 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

---
 .../product-preview-card-component/css/style.css     |  8 ++++++++
 .../newbie/product-preview-card-component/index.html | 12 ++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/projects/FrontendMentor/newbie/product-preview-card-component/css/style.css b/projects/FrontendMentor/newbie/product-preview-card-component/css/style.css
index dea5179..6f8b829 100644
--- a/projects/FrontendMentor/newbie/product-preview-card-component/css/style.css
+++ b/projects/FrontendMentor/newbie/product-preview-card-component/css/style.css
@@ -169,6 +169,14 @@ body {
 
     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 {
     font-family: var(--ff-button);
     font-size: var(--fs-button);
diff --git a/projects/FrontendMentor/newbie/product-preview-card-component/index.html b/projects/FrontendMentor/newbie/product-preview-card-component/index.html
index cd1ccd7..eb4f4a5 100644
--- a/projects/FrontendMentor/newbie/product-preview-card-component/index.html
+++ b/projects/FrontendMentor/newbie/product-preview-card-component/index.html
@@ -55,14 +55,14 @@
           A floral, solar and voluptuous interpretation composed by Olivier Polge,
           Perfumer-Creator for the House of CHANEL.
         </p>
-        <div class="product-card__price-block">
-          <div class="product-card__price-current">
+        <p class="product-card__price-block">
+          <span class="product-card__price-current">
             $149.99
-          </div>
-          <div class="product-card__price-old">
+          </span>
+          <del class="product-card__price-old" aria-label="The old price was $169.99">
             $169.99
-          </div>
-        </div>
+          </del>
+        </p>
 
         <button class="product-card__button-buy">
           <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">