@elyra/canvas 12.42.0 → 12.43.0

package/src/toolbar/toolbar.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,16 +30,16 @@ $toolbar-divider-width: 1px;
 	background-color: $ui-01;
 	box-sizing: content-box;
 	position: relative;
-
 	display: flex;
 	justify-content: space-between;
+	outline: none; // Turn outline off and use carbon style for focus below.
 
 	/* Prevent elements from being dragged onto canvas */
 	-webkit-user-drag: none;
 
 	&:focus {
-		border-color: $interactive-01;
-		box-shadow: inset 0 0 0 1px $interactive-01, inset 0 0 0 2px $ui-background;
+		border-color: $interactive-03;
+		box-shadow: inset 0 0 0 2px $interactive-03;
 	}
 
 	/* Small size toolbar  */
@@ -106,6 +106,7 @@ $toolbar-divider-width: 1px;
 	& button {
 		padding: 0;
 		min-height: 30px;
+		height: $toolbar-button-height;
 	}
 
 	&.default,
@@ -201,10 +202,15 @@ $toolbar-divider-width: 1px;
 	&.disabled.default {
 		color: $disabled-02;
 		fill: $disabled-02; // For custom svg images
+		& .toolbar-tick-mark {
+			fill: $disabled-02;
+		}
+		& .toolbar-text-content {
+			stroke: $disabled-02;
+		}
 	}
 
 	.toolbar-icon {
-		height: $toolbar-icon-size;
 		& svg {
 			height: $toolbar-icon-size;
 			width: $toolbar-icon-size;
@@ -212,52 +218,52 @@ $toolbar-divider-width: 1px;
 			-webkit-user-drag: none;
 		}
 	}
-}
 
-.toolbar-text-content {
-	position: absolute;
-	top: 14px;
-	font-size: 9px;
-	line-height: 9px;
-	color: $icon-01;
-}
+	.toolbar-text-content {
+		position: absolute;
+		top: 14px;
+		font-size: 9px;
+		line-height: 9px;
+		color: $icon-01;
+	}
 
-.toolbar-icon-label {
-	line-height: 16px;
+	.toolbar-icon-label {
+		line-height: 16px;
 
-	&.before {
-		padding-right: 8px;
-	}
+		&.before {
+			padding-right: 8px;
+		}
 
-	&.after {
-		padding-left: 8px;
+		&.after {
+			padding-left: 8px;
+		}
+
+		&.overflow {
+			padding-left: 8px;
+			word-break: break-word;
+			hyphens: auto;
+		}
 	}
 
-	&.overflow {
+	.toolbar-up-down-chevron {
 		padding-left: 8px;
-		word-break: break-word;
-		hyphens: auto;
+		height: 16px;
+		pointer-events: none;
 	}
-}
 
-.toolbar-up-down-chevron {
-	padding-left: 8px;
-	height: 16px;
-	pointer-events: none;
-}
-
-// Triangular tick mark in bottom right corner of an expandable icon
-.toolbar-tick-svg {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	height: $toolbar-button-height;
-	width: $toolbar-button-height;
-	pointer-events: none;
-}
+	// Triangular tick mark in bottom right corner of an expandable icon
+	.toolbar-tick-svg {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		height: $toolbar-button-height;
+		width: $toolbar-button-height;
+		pointer-events: none;
 
-.toolbar-tick-mark {
-	fill: $interactive-02;
+		& .toolbar-tick-mark {
+			fill: $icon-01;
+		}
+	}
 }
 
 .toolbar-jsx-item {
@@ -285,14 +291,8 @@ $toolbar-divider-width: 1px;
 	&.ghost {
 		& button {
 			background-color: $ui-03;
-			border-color: transparent;
-			box-shadow: none;
 			border-bottom: 2px solid $interactive-01;
 		}
-		& button:focus {
-			border-color: $interactive-01;
-			box-shadow: inset 0 0 0 1px $interactive-01, inset 0 0 0 2px $ui-background;
-		}
 	}
 }
 

package/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 = (<Link
-					className="tooltip-link"
-					id={this.props.link.id}
-					href={linkInformation.url}
-					target="_blank"
-					rel="noopener"
-					visited={false}
+				link = (<div
+					ref={(ref) => (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}
-				</Link>);
+					<Link
+						className="tooltip-link"
+						id={this.props.link.id}
+						href={linkInformation.url}
+						target="_blank"
+						rel="noopener"
+						visited={false}
+					>
+						{linkInformation.label}
+					</Link>
+				</div>);
 			}
 		}
 
@@ -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)}
 					>
 						<svg className="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
 							<polyline points="9.1,15.7 1.4,8.1 9.1,0.5" />