Tooltips for Compatibility Tool

[postphotos]

As a developer user debugging an error in the Compatibility Tool, I should have tooltips that hint at what given columns do to explain what they mean and how I should use that information.

As a user gets stuck or confused, they should have both user-friendly hints and more verbose documentation at what the plugin does, why it's organized this way and how the tool intends to allow them to activate AMP quickly.

• AC1: Based on Implement improved error listing view #1361, Implement improved URL listing view #1362, Implement Dropdown Facet filters #1363 and Improved “Error Isolation” view #1364 decide which columns need tooltips. Currently the Error by Type, Error by URL and Single screens all have tooltips on the header of the Status and Detail columns.
• AC2: For each tooltip, write copy and link to relevant URLs on the Plugin product site. (similar to Integrate documentation links to Validation Error details #1401.)
• AC3: Implement each tooltip (per view, per column) based on what is decided in AC1/AC2.
• AC4: Re-implement to meet the spec of Replace WP admin pointers with Gutenberg popovers #1479.

[postphotos]

I've fleshed out the requirements for this story.

[jacobschweitzer]

Hey @postphotos , I've been working on #1362 and have gotten to the point I need some content for the tooltips and some clarification about how they should look.

The only way I'm aware of to make tooltips in core WP is to use admin pointers. It'd look like this:

How does that look? It opens when the user hovers over the "?" icon and closes when they click the dismiss link at the bottom.

[postphotos]

Thanks for sharing your thoughts/WIP @jacobschweitzer!

While it does vary from the mocks that @jillchu had presented at an earlier state, I'm OK with this as it matches the design styles of the pointer from #1254, especially if it's leveraging a WP Core design pattern and if may be less engineering effort to complete.

@jwold - are you OK with this for a "tooltip" style?

[jwold]

@jacobschweitzer using this tooltip you mentioned should be perfect. Thank you! cc @postphotos

[johnwatkins0]

Moving this to code review, @kienstra and @westonruter. The PR is #1448. Thanks!

[westonruter]

Tooltip text needs to still be finalized.

[kienstra]

Minor Styling Issue

The triangle of the 'tooltip' now points to the right of the ?, but ideally, it should point to the ?:

This looks to be the case wherever the tooltips are used:

• Invalid URLs page
• AMP Validation Error Index
• Single Error URL page (Improved “single error” by URL view #1365)

Please move the entire admin pointer to the left.

[GaryJones]

@afercia @rianrietveld - what is the WP core approach for accessible tooltips? I don't recall seeing any other plugins using the admin pointers for this?

[kienstra]

Good question, @GaryJones!

[kienstra]

Current 'Tooltip' Copy

As @westonruter mentioned, the tooltip copy still needs to be determined.

Here's the current copy:

Status

An accepted validation error is one that will not block a URL from being served as AMP; the validation error will be sanitized, normally resulting in the offending markup being stripped from the response to ensure AMP validity.

Details
The 'tooltip' for Details is only a placeholder, and still needs copy.

[afercia]

@GaryJones the legacy core "pointers" aren't accessible. They've been discussed a few times in the last years and their usage generally discouraged. Reading in the comments above:

It opens when the user hovers over the "?" icon

how about keyboard users? how about communicating to users the "?" icon opens a sort of modal? I'd rather look at the popover implementation in Gutenberg, where a toggle button with a proper aria-label and visible button tooltip opens a floating panel that behaves like sort of a modal.

[jwold]

@kienstra

Followup up on feedback from @afercia I'd like to propose a design change to all the tooltips in the AMP Plugin, using popover as the base for the tooltips, similar to how Gutenberg now does this.

It appears we can still do bold text, even increase font sizes (for inline headers, just not in blue backgrounds), and a "x" for dismiss.

Here's an example of changes we could make to the AMP Plugin tooltips to be more in line with the design style of the popovers from Gutenberg.

My guess is that we could take more liberties in the style and design of these updated popovers to be more eye catching, but for now we should probably stick to what's been done in Gutenberg.

cc @postphotos

[postphotos]

Updated to add AC4 (see #1479).

[kienstra]

Question About AC4

Hi @postphotos,
What do you think about removing AC4 (Re-implement to meet the spec of #1479)? Issue #1479 is on the v1.1 project.

Thanks, Leo!

[kienstra]

Status

This issue is awaiting the product site to be able to link to it in the copy (AC2, AC3). There's no action needed now.

[kienstra]

Moving Into To Do

As there is no action needed now, I'm moving this into 'To Do.'

When the product site has the URL ready, I'll add it to the tooltip, and request QA from @csossi.

[kienstra]

Moving To 1.1 Project

PR #1670 was the only remaining task for this issue planned for the 1.0 release.

But the links in it aren't to a live site, so I'm moving this issue out of the 1.0 project.

[westonruter]

This should be tackled with #2316.

[jwold]

Weston > These popups are not the correct way to implement a tooltip from an accessibility perspective. Note that there are likely more considerations for accessibility. The primary focus for now though should be moving over to use the Gutenberg component that's responsible for tooltips (found in the edit post screen). That is part of the refactoring of these screens to be using React components. This will happen as part of that refactoring, and we may want to close this issue to say that it will be done as part of #2316.