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

10
src/components/views/elements/AccessibleTooltipButton.tsx
View file

@ -52,14 +52,14 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
}
}
onMouseOver = () => {
showTooltip = () => {
if (this.props.forceHide) return;
this.setState({
hover: true,
});
};
onMouseLeave = () => {
hideTooltip = () => {
this.setState({
hover: false,
});
@ -78,8 +78,10 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
return (
<AccessibleButton
{...props}
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
onMouseOver={this.showTooltip}
onMouseLeave={this.hideTooltip}
onFocus={this.showTooltip}
onBlur={this.hideTooltip}
aria-label={title}
>
{ children }