diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index fe5b081042..9ba1041421 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -35,11 +35,6 @@ limitations under the License.
border-color: $reaction-row-button-selected-border-color;
}
- // ignore mouse events for all children, treat it as one entire hoverable entity
- * {
- pointer-events: none;
- }
-
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index 6bb6f9e529..3546f62359 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -45,7 +45,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
});
};
- onMouseOut = () => {
+ onMouseLeave = () => {
this.setState({
hover: false,
});
@@ -60,7 +60,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
label={tooltip || title}
/> : <div />;
return (
- <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+ <AccessibleButton
+ {...props}
+ onMouseOver={this.onMouseOver}
+ onMouseLeave={this.onMouseLeave}
+ aria-label={title}
+ >
{ children }
{ tip }
</AccessibleButton>
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index 70cdfb7120..2b9d9e5211 100644
--- a/src/components/views/elements/TagTile.js
+++ b/src/components/views/elements/TagTile.js
@@ -29,6 +29,7 @@ import FlairStore from '../../../stores/FlairStore';
import GroupStore from '../../../stores/GroupStore';
import TagOrderStore from '../../../stores/TagOrderStore';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import AccessibleButton from "./AccessibleButton";
// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
// a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -114,7 +115,7 @@ export default createReactClass({
this.setState({ hover: true });
},
- onMouseOut: function() {
+ onMouseLeave: function() {
this.setState({ hover: false });
},
@@ -151,11 +152,14 @@ export default createReactClass({
badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
}
- // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
const contextButton = this.state.hover || this.props.menuDisplayed ?
- <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
+ <AccessibleButton
+ className="mx_TagTile_context_button"
+ onClick={this.openMenu}
+ ref={this.props.contextMenuButtonRef}
+ >
{"\u00B7\u00B7\u00B7"}
- </div> : <div ref={this.props.contextMenuButtonRef} />;
+ </AccessibleButton> : <div ref={this.props.contextMenuButtonRef} />;
const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
@@ -168,7 +172,7 @@ export default createReactClass({
<div
className="mx_TagTile_avatar"
onMouseOver={this.onMouseOver}
- onMouseOut={this.onMouseOut}
+ onMouseLeave={this.onMouseLeave}
>
<BaseAvatar
name={name}
diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.js
index c46bc3bfbb..0c29e01995 100644
--- a/src/components/views/elements/TextWithTooltip.js
+++ b/src/components/views/elements/TextWithTooltip.js
@@ -37,7 +37,7 @@ export default class TextWithTooltip extends React.Component {
this.setState({hover: true});
};
- onMouseOut = () => {
+ onMouseLeave = () => {
this.setState({hover: false});
};
@@ -45,7 +45,7 @@ export default class TextWithTooltip extends React.Component {
const Tooltip = sdk.getComponent("elements.Tooltip");
return (
- <span onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={this.props.class}>
+ <span onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={this.props.class}>
{this.props.children}
<Tooltip
label={this.props.tooltip}
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index 9b1e0c8350..c0b85649aa 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -26,7 +26,7 @@ const MIN_TOOLTIP_HEIGHT = 25;
interface IProps {
// Class applied to the element used to position the tooltip
- className: string;
+ className?: string;
// Class applied to the tooltip itself
tooltipClassName?: string;
// Whether the tooltip is visible or hidden.
@@ -120,7 +120,7 @@ export default class Tooltip extends React.Component<IProps> {
public render() {
// Render a placeholder
return (
- <div className={this.props.className} >
+ <div className={this.props.className}>
</div>
);
}
diff --git a/src/components/views/elements/TooltipButton.js b/src/components/views/elements/TooltipButton.js
index a32044873b..5c8d53fbcc 100644
--- a/src/components/views/elements/TooltipButton.js
+++ b/src/components/views/elements/TooltipButton.js
@@ -34,7 +34,7 @@ export default createReactClass({
});
},
- onMouseOut: function() {
+ onMouseLeave: function() {
this.setState({
hover: false,
});
@@ -48,7 +48,7 @@ export default createReactClass({
label={this.props.helpText}
/> : <div />;
return (
- <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
+ <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
?
{ tip }
</div>
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 09824cd315..bb8d9a3b6e 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -74,7 +74,7 @@ export default class ReactionsRowButton extends React.PureComponent {
});
}
- onMouseOut = () => {
+ onMouseLeave = () => {
this.setState({
tooltipVisible: false,
});
@@ -129,11 +129,12 @@ export default class ReactionsRowButton extends React.PureComponent {
}
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- return <AccessibleButton className={classes}
+ return <AccessibleButton
+ className={classes}
aria-label={label}
onClick={this.onClick}
onMouseOver={this.onMouseOver}
- onMouseOut={this.onMouseOut}
+ onMouseLeave={this.onMouseLeave}
>
<span className="mx_ReactionsRowButton_content" aria-hidden="true">
{content}
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index 1ea21bfc9a..d7316f198d 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -66,7 +66,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
}
const onMouseOver = () => setHover(true);
- const onMouseOut = () => setHover(false);
+ const onMouseLeave = () => setHover(false);
let tip;
if (hover && !hideTooltip) {
@@ -78,7 +78,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
<AccessibleButton
onClick={onClick}
onMouseOver={onMouseOver}
- onMouseOut={onMouseOut}
+ onMouseLeave={onMouseLeave}
className={classes}
style={style}
>
@@ -87,7 +87,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
);
}
- return <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} className={classes} style={style}>
+ return <div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave} className={classes} style={style}>
{ tip }
</div>;
};