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

12
src/components/views/elements/ActionButton.tsx
View file

@ -58,13 +58,17 @@ export default class ActionButton extends React.Component<IProps, IState> {
};
private onMouseEnter = (): void => {
if (this.props.tooltip) this.setState({ showTooltip: true });
this.showTooltip();
if (this.props.mouseOverAction) {
dis.dispatch({ action: this.props.mouseOverAction });
}
};
private onMouseLeave = (): void => {
private showTooltip = (): void => {
if (this.props.tooltip) this.setState({ showTooltip: true });
};
private hideTooltip = (): void => {
this.setState({ showTooltip: false });
};
@ -88,7 +92,9 @@ export default class ActionButton extends React.Component<IProps, IState> {
className={classNames.join(" ")}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onMouseLeave={this.hideTooltip}
onFocus={this.showTooltip}
onBlur={this.hideTooltip}
aria-label={this.props.label}
>
{ icon }