Show tooltips for "info" property of browsers

[sync-by-unito]

Summary

It seems like these should look and work just like our tooltips for unsupported browsers but we should validate with Design team. For example, should the icon be different for info vs unsupported? Jennifer mentions different states in this slack thread that provides some context, as well as this message as the starting point.

See the icon in the top right of the image below, and the existing implementation and usage of the UnsupportedBrowserTooltip component, which can be renamed/extended to cover this case.

There are 3 places users should see these info messages:

1. The Launchpad browser picker (uses OpenBrowserList.vue)
2. The VerticalBrowserList component that appears in the header of the App
3. The VerticalBrowserList component that appears in the AUT

Based on a test in develop called “shows info icon with linkified tooltip”, the general tooltip created from UnsupportedBrowserTooltip.vue should also support markdown for linking. 9.0 implementation uses MarkdownRenderer for this, in 10.0 our existing useMarkdown composable can be used to wrap the info/warning values.

Acceptance Criteria

• If the info property of a browser contains a message, a user can see that there is a message with an icon in the UI, and click the icon to open that message in a the UI.
• The tooltip should be reachable with the keyboard and the open state and text correctly exposed in the Accessibility Tree for assistive technology.
• To have parity with 9.x, the tooltip should support links and formatting in markdown.

Resources

Any Notion documents, Google documents, Figma Boards

Open Pull Requests

Any PRs needed for review

┆Issue is synchronized with this Jira Task by Unito
┆Attachments: Screen Shot 2022-03-17 at 4.59.41 PM.png
┆author: Mark Noonan
┆epic: UI/UX Improvements
┆friendlyId: UNIFY-1378
┆priority: Highest
┆sprint: Unification Release Backlog
┆taskType: Task

[sync-by-unito]

➤ Mark Noonan commented:

Ryan Wilke Could we confirm - for the “info” version of the tooltip that appears over an unsupported browser, would we use the same question mark icon, or something else? And since the browser with an info notice would not be disabled, is it safe to make the icon the same color as the primary text?

Brian Mann is there ever a situation where a browser might be both unsupported and have an info message, causing us to need two icons at the same time? I can’t think of one.

[cypress-bot]

The code for this is done in cypress-io/cypress#23711, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 10.8.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.8.0, please open a new issue.