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

42
src/components/views/elements/InfoTooltip.tsx
View file

@ -18,9 +18,10 @@ limitations under the License.
import React from 'react';
import classNames from 'classnames';
import Tooltip, { Alignment } from './Tooltip';
import { Alignment } from './Tooltip';
import { _t } from "../../../languageHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { TooltipTarget } from './TooltipTarget';
export enum InfoTooltipKind {
Info = "info",
@ -34,31 +35,12 @@ interface ITooltipProps {
kind?: InfoTooltipKind;
}
interface IState {
hover: boolean;
}
@replaceableComponent("views.elements.InfoTooltip")
export default class InfoTooltip extends React.PureComponent<ITooltipProps, IState> {
export default class InfoTooltip extends React.PureComponent<ITooltipProps> {
constructor(props: ITooltipProps) {
super(props);
this.state = {
hover: false,
};
}
onMouseOver = () => {
this.setState({
hover: true,
});
};
onMouseLeave = () => {
this.setState({
hover: false,
});
};
render() {
const { tooltip, children, tooltipClassName, className, kind } = this.props;
const title = _t("Information");
@ -68,22 +50,16 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
);
// Tooltip are forced on the right for a more natural feel to them on info icons
const tip = this.state.hover ? <Tooltip
className="mx_InfoTooltip_container"
tooltipClassName={classNames("mx_InfoTooltip_tooltip", tooltipClassName)}
label={tooltip || title}
alignment={Alignment.Right}
/> : <div />;
return (
<div
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
className={classNames("mx_InfoTooltip", className)}
<TooltipTarget tooltipTargetClassName={classNames("mx_InfoTooltip", className)}
className="mx_InfoTooltip_container"
tooltipClassName={classNames("mx_InfoTooltip_tooltip", tooltipClassName)}
label={tooltip || title}
alignment={Alignment.Right}
>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
{ children }
{ tip }
</div>
</TooltipTarget>
);
}
}