From d6d7c613196cf159bd07574bb21bf6f7f48fe9a2 Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 20 Feb 2024 16:39:30 +0530 Subject: [PATCH 1/4] #1711: Include focus on tooltip link Signed-off-by: srikant --- canvas_modules/common-canvas/src/tooltip/tooltip.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 5b178f0252..0392623043 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(); + } } } } @@ -435,6 +442,7 @@ class ToolTip extends React.Component { className={tipClass} aria-hidden={!this.state.isTooltipVisible} direction={this.props.direction} + ref={(ref) => (this.targetRef = ref)} > From 79ee319c3bf69d9d2966366f1f625459412167b2 Mon Sep 17 00:00:00 2001 From: srikant Date: Wed, 21 Feb 2024 16:31:14 +0530 Subject: [PATCH 2/4] Include tooltip focus on icon after closing and close on escape and retain tabbing Signed-off-by: srikant --- .../common-canvas/src/tooltip/tooltip.jsx | 47 +++++++++++++++---- 1 file changed, 37 insertions(+), 10 deletions(-) diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 0392623043..12bdcc2718 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx @@ -94,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) { @@ -412,22 +416,45 @@ 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 = ( { + evt.stopPropagation(); + evt.preventDefault(); + if (evt.key === "Escape") { + this.triggerRef.focus(); + this.setTooltipVisible(false); + } + }} + onBlur={() => { + if (linkClicked) { + this.setTooltipVisible(true); + } else { + this.triggerRef.focus(); + this.setTooltipVisible(false); + } + } + } + onClick={(evt) => { + linkClicked = true; + }} > - {linkInformation.label} - ); + + {linkInformation.label} + + ); } } From 8812bbf4a1d275ce29a8935f162b3ba9bc41c5e6 Mon Sep 17 00:00:00 2001 From: srikant Date: Thu, 22 Feb 2024 11:33:34 +0530 Subject: [PATCH 3/4] Open Tooltip link if Enter or Return is clicked and adjust focus to tooltip icon Signed-off-by: srikant --- .../common-canvas/src/tooltip/tooltip.jsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 12bdcc2718..14abd0874d 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx @@ -331,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); @@ -423,24 +426,31 @@ class ToolTip extends React.Component { // 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(); - if (evt.key === "Escape") { + + if (evt.key === "Escape") { // When Esc is pressed shift the focus to tooltip icon so that user can navigate following elements. 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) { + if (linkClicked) { // keep tooltip open when link is clicked this.setTooltipVisible(true); - } else { + } else { // Close the tooltip and shift focus to tooltip icon this.triggerRef.focus(); this.setTooltipVisible(false); } } } - onClick={(evt) => { + onClick={() => { linkClicked = true; }} > From 11a7b1f1db2d2b862d4c2a084822dc72afe2e8d5 Mon Sep 17 00:00:00 2001 From: srikant Date: Fri, 23 Feb 2024 11:09:58 +0530 Subject: [PATCH 4/4] Update Comments in tooltip component Signed-off-by: srikant --- canvas_modules/common-canvas/src/tooltip/tooltip.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 14abd0874d..aeb0420fd3 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx @@ -332,7 +332,7 @@ class ToolTip extends React.Component { evt.stopPropagation(); evt.preventDefault(); - // when tooltip with link is closed and another tooltip is opened newly opened tooltip should have focus + // 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 @@ -431,7 +431,8 @@ class ToolTip extends React.Component { evt.stopPropagation(); evt.preventDefault(); - if (evt.key === "Escape") { // When Esc is pressed shift the focus to tooltip icon so that user can navigate following elements. + // 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. @@ -442,7 +443,7 @@ class ToolTip extends React.Component { } }} onBlur={() => { - if (linkClicked) { // keep tooltip open when link is clicked + 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();