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>".
This commit is contained in:
infiinte-persistence 2020-05-12 17:22:36 +08:00 committed by Sean Yesmunt
parent a2d4757823
commit fa219af5aa

View file

@ -37,6 +37,7 @@ type Props = {
requiresAuth: ?boolean, requiresAuth: ?boolean,
myref: any, myref: any,
dispatch: any, dispatch: any,
'aria-label'?: string,
}; };
// use forwardRef to allow consumers to pass refs to the button content if they want to // 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) { if (requiresAuth && !emailVerified) {
return ( return (
<NavLink <NavLink
@ -163,7 +175,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
e.stopPropagation(); e.stopPropagation();
}} }}
to={`/$/${PAGES.AUTH}?redirect=${pathname}`} to={`/$/${PAGES.AUTH}?redirect=${pathname}`}
title={title} title={title || defaultTooltip}
disabled={disabled} disabled={disabled}
className={combinedClassName} className={combinedClassName}
activeClassName={activeClass} activeClassName={activeClass}
@ -177,7 +189,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
<NavLink <NavLink
exact exact
to={path} to={path}
title={title} title={title || defaultTooltip}
disabled={disabled} disabled={disabled}
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
@ -194,7 +206,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
) : ( ) : (
<button <button
ref={combinedRef} ref={combinedRef}
title={title} title={title || defaultTooltip}
aria-label={description || label || title} aria-label={description || label || title}
className={combinedClassName} className={combinedClassName}
onClick={e => { onClick={e => {