Inconsistent focus styles in GA4 Reporting feature tour

[bethanylang]

Description

As reported by @techanvil in Bug Bash:

In the feature tour, the "Learn more" links have a focus border around the element, while the other focusable elements (the buttons) don't have a border.

"Learn more" is focused:

"Got it" is focused:

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• All links/buttons in the feature tour (at least the GA4 Feature Tour, but possibly others) should have a focus style so focus is clear to keyboard users.
  • The focus style should match other "text buttons"/"links" in the app.

Implementation Brief

• In assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss:
  • Add the following styles for .googlesitekit-tour-tooltip .googlesitekit-tooltip-card a:focus:
    • box-shadow: none
    • outline: 1px dotted $c-interactive-inverse-focus
    • outline-offset: 3px
  • Add the following styles for .googlesitekit-tooltip-button:focus:
    • outline: 1px dotted $c-interactive-inverse-focus
    • outline-offset: 6px

Test Coverage

• No tests need to be added/updated.

QA Brief

• View the GA4 Reporting feature tour. To do so:
  • Without the ga4Reporting feature flag, set up a new site and connect the Analytics module with GA4.
  • Activate the ga4Reporting feature flag.
  • Go to the dashboard and view the banner that suggests you switch to the GA4 dashboard view.
  • Click on the CTA button after which in a short period of time the dashboard should switch to GA4 and the GA4 Reporting feature tour should start.
• Using keyboard navigate through the links and buttons in the feature tour steps.
• Verify that the actions have proper focus styles as indicated in the IB.

Changelog entry

• Fix inconsistent focus styles in feature tours.

[tofumatt]

IB ✅

[techanvil]

Hey @nfmohit, could you please add a bit more info to the QA Brief about how to trigger the GA4 Reporting feature tour? This would be helpful to save time during testing for both CR and QA.

[nfmohit]

Hey @nfmohit, could you please add a bit more info to the QA Brief about how to trigger the GA4 Reporting feature tour? This would be helpful to save time during testing for both CR and QA.

Excellent point. I've added some instructions. Please let me know if they look good. Thank you @techanvil!

[techanvil]

Excellent point. I've added some instructions. Please let me know if they look good. Thank you @techanvil!

Thanks, that's great - very helpful :)

[wpdarren]

QA Update: ⚠️

@nfmohit On the tooltip tour as I tab around it, I was expecting to see focus styles as I went to the back and next like I do on the learn more link. Am I missing something? Here's a screencast of what I see on the develop branch.

Screen.Capture.on.2023-07-06.at.18-57-48.1.mp4

[wpdarren]

QA Update: ✅

Verified:

• Using keyboard navigate through the links and buttons in the feature tour steps.
  • The actions have proper focus styles as indicated in the IB.

tooltip.mp4