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:
parent
a2d4757823
commit
fa219af5aa
1 changed files with 15 additions and 3 deletions
|
@ -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 => {
|
||||||
|
|
Loading…
Reference in a new issue