[PriceLockup] allow abbreviated rate text copy

[theetrain]

Description

Originally asked by Michael Straker.

• Oftentimes we want to use abbreviated text due to lack of screen real estate on some experiences. What is the best strategy to go about doing that?
• Most common example is having $50/mo visible to sighted users, and $50 per month read by assistive technology

Recommendation

• Look into the <abbr /> element to see if should be used within PriceLockup; assess its user experience since it relies on the title attribute
• Look into using a combination of aria-hidden for visual copy and <A11yContent /> for screen reader copy
• Come up with a general content strategy for abbreviations and its usage across TELUS experiences

Examples

const App = () => (
  <PriceLockup
    rateText={
      <>
        <span aria-hidden>/mo</span>
        <A11yContent>per month</A11yContent>
      </>}
  />
)

const App = () => (
  <PriceLockup
    rateText={
      <abbr title="per month">/mo</abbr>
    }
  />
)

Designs

• Screenshots
• Sketch file
• Link to Invision

Meta

• TDS component: @tds/core-price-lockup
• Willing to develop solution: No
• Has workaround: No
• High impact: No
• Designer/Developer Pair: TBD

[twirlingsky]

How will this work for multi-tenant? Like Telus Quebec for translation into French?

[catherinetelus]

Could we have "par mois" for French? would that work (will have to verify with translators).

[nadaltelus]

Closing the issue due to lack of activity. If surfaced again, will consider as input for the new DS.