fix(core-price-lockup): use s tag for sematic html

telus · Nov 9, 2020 · cbda474 · cbda474
1 parent 07a520f
commit cbda474
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/packages/PriceLockup/PriceLockup.jsx b/packages/PriceLockup/PriceLockup.jsx
@@ -150,6 +150,10 @@ const StyledFootnoteLinks = styled(StyledText)(({ inline }) => ({
 
 const StyledBottomText = styled(StyledText)({ display: 'inline-block' })
 
+const StrikehroughText = styled.s({
+  textDecoration: 'none',
+})
+
 const renderDollarSign = size => {
   if (size === 'large') {
     return <StyledLargeDollarSign data-testid="dollarSign">&#36;</StyledLargeDollarSign>
@@ -195,7 +199,7 @@ const PriceLockup = ({
   bottomText,
   footnoteLinks,
   strikethrough,
-  accessibilityText,
+  a11yText,
 }) => {
   const rateTextWrapperRef = useRef()
   const footnoteLinksRef = useRef()
@@ -256,8 +260,8 @@ const PriceLockup = ({
     }
   }
 
-  if (strikethrough && !accessibilityText) {
-    warn('PriceLockup', 'accessibilityText must be provided with strikethrough pricing')
+  if (strikethrough && !a11yText) {
+    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
   }
 
   return (
@@ -267,15 +271,30 @@ const PriceLockup = ({
         <StyledRateTextWrapper ref={containerRef} strikethrough={strikethrough}>
           <StyledPriceWrapper ref={rateTextWrapperRef} between={size === 'small' ? 1 : 2} inline>
             <Box between={size === 'large' ? 2 : 1} inline>
-              {strikethrough && <A11yContent>{accessibilityText}</A11yContent>}
+              {strikethrough && <A11yContent>{a11yText}</A11yContent>}
               {signDirection === 'left' && renderDollarSign(size)}
-              <StyledPriceValue data-testid="priceValue" size={size} strikethrough={strikethrough}>
-                {price}
-              </StyledPriceValue>
+              {strikethrough && (
+                <StyledPriceValue
+                  data-testid="priceValue"
+                  size={size}
+                  strikethrough={strikethrough}
+                >
+                  <StrikehroughText>{price}</StrikehroughText>
+                </StyledPriceValue>
+              )}
+              {!strikethrough && (
+                <StyledPriceValue
+                  data-testid="priceValue"
+                  size={size}
+                  strikethrough={strikethrough}
+                >
+                  {price}
+                </StyledPriceValue>
+              )}
               {signDirection === 'right' && renderDollarSign(size)}
               {!bottomText && !rateText && footnoteLinksInline && (
                 <>
-                  {strikethrough && <A11yContent>{accessibilityText}</A11yContent>}
+                  {strikethrough && <A11yContent>{a11yText}</A11yContent>}
                   <StyledPriceValue
                     data-testid="priceValue"
                     size={size}
@@ -351,7 +370,7 @@ PriceLockup.propTypes = {
    * Aria Label for strikethrough pricing, as screen readers will not pick up strikethrough. *MUST be included if using
    * strikethrough pricing.
    */
-  accessibilityText: PropTypes.string,
+  a11yText: PropTypes.string,
 }
 
 PriceLockup.defaultProps = {
@@ -361,7 +380,7 @@ PriceLockup.defaultProps = {
   rateText: undefined,
   footnoteLinks: undefined,
   strikethrough: false,
-  accessibilityText: undefined,
+  a11yText: undefined,
 }
 
 export default PriceLockup
diff --git a/packages/PriceLockup/PriceLockup.md b/packages/PriceLockup/PriceLockup.md
@@ -12,14 +12,14 @@
 - Use `topText` and `bottomText` props to provide additional information
 - Align the currency sign to the right when displaying prices in French
 - Use `strikethrough` prop for price savings comparison
-  - If using `strikethrough` prop, it must be accompanied by corresponding `accessibilityText` to be used by screen readers
+  - If using `strikethrough` prop, it must be accompanied by corresponding `a11yText` to be used by screen readers
   - `strikethrough` price must be smaller than the discounted price
 
 ### Strikethrough Usage Criteria
 
 - Usage: To visually show a discounted price next to a non-strikethrough price
 - Placement: Must be placed in close proximity to the product
-- If using `strikethrough` prop, it must be accompanied by corresponding `accessibilityText` to be used by screen readers
+- If using `strikethrough` prop, it must be accompanied by corresponding `a11yText` to be used by screen readers
 
 <img src="price-lockup_annotated.png" alt="price lockup annotated example" style="width: 100%; " />
 
@@ -72,7 +72,7 @@
                 <PriceLockup
                   size="small"
                   strikethrough
-                  accessibilityText="price without discount"
+                  a11yText="price without discount"
                   price="50"
                   signDirection="left"
                   rateText="/mo."
@@ -112,7 +112,7 @@
       <PriceLockup
         size="medium"
         strikethrough
-        accessibilityText="price without discount"
+        a11yText="price without discount"
         price="50"
         signDirection="left"
         rateText="/mo."