Introduce button tooltips to help clarify icons

In much of Google UI, buttons (particularly icon buttons) have tooltips with a (secondary) text label. While for regular buttons, this is not as critical, for icon buttons this is quite helpful as it helps convey the meaning of each icon. For screen readers, we already have assistive text, but that text is not accessible for e.g. browser users.

Here is a screenshot from Google Drive as example: (originally posted in https://github.com/google/site-kit-wp/issues/3379#issuecomment-849039705)

Site Kit should support tooltips with similar appearance for its icon buttons. This is somewhat related to the user feedback epic since a few of those icon buttons are present there.

---

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

Acceptance criteria

• Site Kit’s Button component should be enhanced so that, if it displays an icon (via icon prop) and a text label is also present (e.g. via aria-label prop), that text label displays as a small tooltip with white text on gray background, following the overall design present in the screenshot above.
• The following aria-label props related to the above enhancement should be changed to be more concise:
  • In HelpMenu, the help icon’s aria-label should say just “Help” - it does not need the full actions since it appears in a list of menu items and controls where this is unnecessary.
  • In SurveyHeader, the dismiss icon’s aria-label should say just “Dismiss” - the user is in the survey and its title comes just before in the DOM order, so it’s unnecessary to state that they’re dismissing the survey.
  • In SurveyQuestionRatingChoice, the choice icon’s aria-label should just say choice.text - the “icon” suffix is rather useless since for screen reader users it is irrelevant that the choice is an icon, while visually it’s obvious that it is an icon anyway (it’s a label rather than an alt description).

Implementation Brief

• Install the @material-ui/core package.
• Update the Button component,
  • Add the aria-label prop as it is done in the Link component.
  • Wrap the markup for the component within the Tooltip component (imported from the @material-ui/core package) with the title prop set to the aria-label value if there is an icon and aria-label and no children.
  • When wrapping around the Tooltip component, add an extra span tag around the markup or else the tooltip is not positioned correctly.
• Update the aria-label used in the HelpMenu, SurveyHeader and SurveyQuestionRatingChoice as per the AC.

Test Coverage

• No new tests to be added.

Visual Regression Changes

• There should be no visual changes.

QA Brief

• Run storybook locally via the npm run storybook command.
• Upon hovering the icons in the “Surveys -> Current Survey -> Single Question” story, a tooltip should appear with the label of the icon and “Dismiss” for the close icon.
• Do the same for the “Plugin Header with Help menu” story. A tooltip saying “Help” should appear upon hovering the help icon.

Changelog entry

• Improve button tooltips across plugin.

[asvinb]

Thanks @wpdarren . A follow up PR has been created.

[wpdarren]

QA Update: Pass ✅

• Verified that tooltips appear on Storyboard.
• Verified that tooltips appear on local site for all rating icons and dismiss icon. Screenshot
• Verified that tooltips appear on local site for help icon. Screenshot
• Tested this on primary browsers, i.e. Firefox, etc.

Thanks @asvinb @aaemnnosttv 👍