Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Tooltip): prevent focus hijacking on tooltip dismissal #7319

Merged
merged 4 commits into from
Dec 9, 2020
Merged

fix(Tooltip): prevent focus hijacking on tooltip dismissal #7319

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57b584c
fix(Tooltip): prevent tooltip ID overwriting itself
emyarod Nov 19, 2020
0f8c917
fix(Tooltip): prevent focus on trigger element on non-Esc key dismissal
emyarod Nov 19, 2020
3cce435
fix(Tooltip): check tooltip identity before setting dismissed status
emyarod Dec 9, 2020
aaab77b
Merge branch 'master' into 7260-floating-menu-focus-management
kodiakhq[bot] Dec 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions packages/react/src/components/Tooltip/Tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ import FloatingMenu, {
import ClickListener from '../../internal/ClickListener';
import mergeRefs from '../../tools/mergeRefs';
import { keys, matches as keyDownMatch } from '../../internal/keyboard';
import {
selectorFocusable,
selectorTabbable,
} from '../../internal/keyboard/navigation';
import isRequiredOneOf from '../../prop-types/isRequiredOneOf';
import requiredIfValueExists from '../../prop-types/requiredIfValueExists';
import { useControlledStateWithValue } from '../../internal/FeatureFlags';
Expand Down Expand Up @@ -244,6 +248,7 @@ class Tooltip extends Component {
* @private
*/
_tooltipId =
this.props.id ||
this.props.tooltipId ||
`__carbon-tooltip_${Math.random().toString(36).substr(2)}`;

Expand Down Expand Up @@ -295,7 +300,19 @@ class Tooltip extends Component {
}
if (!open && tooltipBody && tooltipBody.id === this._tooltipId) {
this._tooltipDismissed = true;
this._triggerRef?.current.focus();
const primaryFocusNode = tooltipBody.querySelector(
this.props.selectorPrimaryFocus || null
);
const tabbableNode = tooltipBody.querySelector(selectorTabbable);
const focusableNode = tooltipBody.querySelector(selectorFocusable);
const focusTarget =
primaryFocusNode || // User defined focusable node
tabbableNode || // First sequentially focusable node
focusableNode || // First programmatic focusable node
tooltipBody;
if (focusTarget !== tooltipBody) {
this._triggerRef?.current.focus();
}
}
});
};
Expand All @@ -306,7 +323,10 @@ class Tooltip extends Component {
* @param {Element} [evt] For handing `mouseout` event, indicates where the mouse pointer is gone.
*/
_handleFocus = (state, evt) => {
const { relatedTarget } = evt;
const { currentTarget, relatedTarget } = evt;
if (currentTarget !== relatedTarget) {
this._tooltipDismissed = false;
}
if (state === 'over') {
if (!this._tooltipDismissed) {
this._handleUserInputOpenClose(evt, { open: true });
Expand Down Expand Up @@ -506,9 +526,9 @@ class Tooltip extends Component {
this._tooltipEl = node;
}}>
<div
id={this._tooltipId}
className={tooltipClasses}
{...other}
id={this._tooltipId}
data-floating-menu-direction={direction}
onMouseOver={this.handleMouse}
onMouseOut={this.handleMouse}
Expand All @@ -519,7 +539,6 @@ class Tooltip extends Component {
<span className={`${prefix}--tooltip__caret`} />
<div
className={`${prefix}--tooltip__content`}
tabIndex="-1"
role="dialog"
aria-describedby={tooltipBodyId}
aria-labelledby={triggerId}>
Expand Down