Skip to content

Resolve "ENG: Free Trial Tab component"

Megan Filo requested to merge 1404-eng-free-trial-tab-component into main
  • I, the Assignee, have run Axe Devtools on any updated pages, and fixed the relevant accessibility issues. -> There's an a11y issue with the FAQ hyperlinks, but I will create a new issue for this to be looked at.
  • These changes meet a specific OKR or item in our Quarterly Plan.
  • These changes work on both Safari and Chrome.
  • These changes have been reviewed for Visual Quality Assurance and Functional Quality Assurance on Mobile, Desktop, and Tablet.
  • These changes work with our Google Analytics and SEO tools.
  • These changes have been documented as expected.
  • Images are appropriately sized

Closes #1404 (closed)

Changes

  1. Updated cta.vue component - fixed hydration issue related to using v-html within SlpTypograph
  2. Updated tooltip.vue component - The base element of this component is a button, which would be correct for clicked tooltips. In this case, we need a hover tooltip and that would not necessarily be a button. This component is being used in a tab on the Free Trial page. Tabs should really be buttons, and we shouldn't have a button within a button. I have verified that the other pages (Pricing, Features) that use this component + hover state were not negatively impacted by this change.
  3. The Free Trial tab component now creates query params when clicked. Likewise, when someone visits the page with a hosted query param, the appropriate tab will be selected on page render.
  4. Significant changes to tab component accessibility to make it more compliant.

Screen readers now point out the tab list and both tabs, which tab is selected, and knows the relationship between tab name and which content block is associated with it.

Testing

I cannot find the reason why (nothing is sticking out to me in the www repo's redirects.yml file) the review app is erroring out on this page due to 'too many redirects'. I've confirmed it's not due to this MR as this is happening in other review apps as well! (ex: https://revert-data-layer-update-092822.about.gitlab-review.app/free-trial/)

You will need to pull this down locally for testing.

Edited by Megan Filo

Merge request reports