imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make tooltips keyboard accessible (#7281)

Browse source 
* show tooltips on hover in eventtile

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use tooltip props pass thru

* use tooltiptarget in InfoTooltip

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use target in TestWithTooltip

Signed-off-by: Kerry Archibald <kerrya@element.io>

* tsc fixes

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test tooltip target

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint fix

Signed-off-by: Kerry Archibald <kerrya@element.io>

* rename tooltip handlers

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update copyright to 2021

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2021-12-09 11:47:50 +01:00 • committed by GitHub
parent 4712ae49b2
commit 0c850b2f13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 242 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/views/elements/TextWithTooltip.tsx
View file

@ -15,8 +15,9 @@
*/
import React from 'react';
import classNames from 'classnames';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import Tooltip from "./Tooltip";
import { TooltipTarget } from './TooltipTarget';
interface IProps {
class?: string;
@ -26,41 +27,27 @@ interface IProps {
onClick?: (ev?: React.MouseEvent) => void;
}
interface IState {
hover: boolean;
}
@replaceableComponent("views.elements.TextWithTooltip")
export default class TextWithTooltip extends React.Component<IProps, IState> {
export default class TextWithTooltip extends React.Component<IProps> {
constructor(props: IProps) {
super(props);
this.state = {
hover: false,
};
}
private onMouseOver = (): void => {
this.setState({ hover: true });
};
private onMouseLeave = (): void => {
this.setState({ hover: false });
};
public render(): JSX.Element {
const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
return (
<span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick} className={className}>
<TooltipTarget
onClick={this.props.onClick}
tooltipTargetClassName={classNames("mx_TextWithTooltip_target", className)}
{...tooltipProps}
label={tooltip}
tooltipClassName={tooltipClass}
className="mx_TextWithTooltip_tooltip"
{...props}
>
{ children }
{ this.state.hover && <Tooltip
{...tooltipProps}
label={tooltip}
tooltipClassName={tooltipClass}
className="mx_TextWithTooltip_tooltip"
/> }
</span>
</TooltipTarget>
);
}
}