diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 5b178f0252..aeb0420fd3 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx @@ -79,6 +79,13 @@ class ToolTip extends React.Component { if (tooltipTrigger && tooltip) { this.updateTooltipLayout(tooltip, tooltipTrigger, tooltip.getAttribute("direction")); } + + const linkElement = this.targetRef.querySelector("a"); + + // Focus on link when tooltip with link is opened + if (linkElement) { + linkElement.focus(); + } } } } @@ -87,6 +94,10 @@ class ToolTip extends React.Component { if (evt.key === "Tab") { this.tabKeyPressed = true; } + if (evt.key === "Escape") { + this.triggerRef.focus(); + this.setTooltipVisible(false); + } } getStyleValue(value) { @@ -320,6 +331,9 @@ class ToolTip extends React.Component { // To prevent this default behavior, stopPropagation and preventDefault is used. evt.stopPropagation(); evt.preventDefault(); + + // When tooltip with link is closed and another tooltip is opened newly opened tooltip should have focus. + this.triggerRef.focus(); if (this.state.isTooltipVisible) { // Tooltip is visible and user clicks on trigger element again, hide tooltip this.setTooltipVisible(false); @@ -405,22 +419,53 @@ class ToolTip extends React.Component { if (this.props.className) { tipClass += " " + this.props.className; } - + let linkClicked = false; let link = null; if (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) { const linkInformation = this.props.tooltipLinkHandler(this.props.link); // Verify tooltipLinkHandler returns object in correct format if (typeof linkInformation === "object" && linkInformation.label && linkInformation.url) { - link = ( (this.linkRef = ref)} + onKeyDown={(evt) => { + evt.stopPropagation(); + evt.preventDefault(); + + // When 'Esc' is pressed shift the focus to tooltip icon so that user can navigate following elements. + if (evt.key === "Escape") { + this.triggerRef.focus(); + this.setTooltipVisible(false); + } else if (evt.key === "Enter") { // Open active/highlighted link when Enter or Return is clicked. + const focusedElement = this.linkRef.children[0]; + if (focusedElement) { + window.open(focusedElement, "_blank"); + } + } + }} + onBlur={() => { + if (linkClicked) { // Keep tooltip open when link is clicked + this.setTooltipVisible(true); + } else { // Close the tooltip and shift focus to tooltip icon + this.triggerRef.focus(); + this.setTooltipVisible(false); + } + } + } + onClick={() => { + linkClicked = true; + }} > - {linkInformation.label} - ); + + {linkInformation.label} + + ); } } @@ -435,6 +480,7 @@ class ToolTip extends React.Component { className={tipClass} aria-hidden={!this.state.isTooltipVisible} direction={this.props.direction} + ref={(ref) => (this.targetRef = ref)} >