From fa219af5aad3912278249dba35172d89f695684c Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Tue, 12 May 2020 17:22:36 +0800
Subject: [PATCH] Reuse available text as the tooltip where appropriate.

The best candidate is `aria-label`, followed by `description`.

Most of the existing elements already have these defined, so try to route it as the tooltip instead of having to explicitly define tooltips everywhere through a redundant `title` or <Tooltip> tag.

Minor side-effect:
This will cancel off any effect from a parent <Tooltip>, i.e. might confuse future developers who are trying to do "<Tooltip><Button></Button></Tooltip>".
---
 ui/component/button/view.jsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index ead7df67d..8be0839eb 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -37,6 +37,7 @@ type Props = {
   requiresAuth: ?boolean,
   myref: any,
   dispatch: any,
+  'aria-label'?: string,
 };
 
 // use forwardRef to allow consumers to pass refs to the button content if they want to
@@ -155,6 +156,17 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     }
   }
 
+  // Try to generate a tooltip using available text and display it through
+  // the 'title' mechanism, but only if it isn't being used.
+  let defaultTooltip;
+  if (!title) {
+    if (props['aria-label']) {
+      defaultTooltip = props['aria-label'];
+    } else if (description) {
+      defaultTooltip = description;
+    }
+  }
+
   if (requiresAuth && !emailVerified) {
     return (
       <NavLink
@@ -163,7 +175,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
           e.stopPropagation();
         }}
         to={`/$/${PAGES.AUTH}?redirect=${pathname}`}
-        title={title}
+        title={title || defaultTooltip}
         disabled={disabled}
         className={combinedClassName}
         activeClassName={activeClass}
@@ -177,7 +189,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     <NavLink
       exact
       to={path}
-      title={title}
+      title={title || defaultTooltip}
       disabled={disabled}
       onClick={e => {
         e.stopPropagation();
@@ -194,7 +206,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
   ) : (
     <button
       ref={combinedRef}
-      title={title}
+      title={title || defaultTooltip}
       aria-label={description || label || title}
       className={combinedClassName}
       onClick={e => {