@elyra/canvas 12.41.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,13 +30,18 @@ $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-03;
+		box-shadow: inset 0 0 0 2px $interactive-03;
+	}
+
 	/* Small size toolbar  */
 	&.toolbar-size-small {
 		height: $toolbar-button-sm-height;
@@ -51,7 +56,7 @@ $toolbar-divider-width: 1px;
 			height: $toolbar-button-sm-height;
 		}
 
-		.toolbar-overflow-menu-item {
+		.toolbar-sub-menu-item {
 			height: fit-content;
 		}
 
@@ -66,10 +71,6 @@ $toolbar-divider-width: 1px;
 			padding: 0;
 		}
 
-		.toolbar-popover-list {
-			top: calc(#{$toolbar-button-sm-height} + #{$toolbar-divider-width} - 1px);
-		}
-
 		.toolbar-jsx-item {
 			height: $toolbar-button-sm-height;
 		}
@@ -105,6 +106,7 @@ $toolbar-divider-width: 1px;
 	& button {
 		padding: 0;
 		min-height: 30px;
+		height: $toolbar-button-height;
 	}
 
 	&.default,
@@ -144,7 +146,7 @@ $toolbar-divider-width: 1px;
 	}
 }
 
-.toolbar-spacer {
+.toolbar-overflow-container {
 	width: 0;
 	display: inline-block;
 }
@@ -171,7 +173,7 @@ $toolbar-divider-width: 1px;
 	}
 }
 
-.toolbar-overflow-menu-item {
+.toolbar-sub-menu-item {
 	& button {
 		width: 100%;
 		padding-top: 0;
@@ -200,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;
@@ -211,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 {
@@ -269,7 +276,7 @@ $toolbar-divider-width: 1px;
 	padding: 0;
 }
 
-.toolbar-overflow-jsx-item {
+.toolbar-sub-menu-jsx-item {
 	width: 100%;
 	height: 38px;
 	display: inline-flex;
@@ -284,8 +291,6 @@ $toolbar-divider-width: 1px;
 	&.ghost {
 		& button {
 			background-color: $ui-03;
-			border-color: transparent;
-			box-shadow: none;
 			border-bottom: 2px solid $interactive-01;
 		}
 	}
@@ -306,24 +311,26 @@ $toolbar-divider-width: 1px;
 
 .toolbar-popover-list {
 	width: 200px;
-	z-index: 1;
-	top: calc(#{$toolbar-button-height} + #{$toolbar-divider-width});
+	z-index: 2; // Make sure sub-area appears above bottom panel
 	display: block;
-	position: absolute;
+	position: fixed; // Actual position will be calculated in the code
 	list-style-type: none;
 	padding: 0;
 	border: $toolbar-divider-width solid $ui-03;
 	background-color: $ui-01;
+	opacity: 0;
+	animation: tovisible 0.25s ease-in-out forwards; // Use keyframe to animate panel visibility
 
 	&.submenu {
-		// Position will be calculated in the code
-		position: fixed;
 		min-width: 100px;
 	}
 
 	&.subpanel {
-		// Position will be calculated in the code
-		position: fixed;
 		width: fit-content;
 	}
 }
+
+@keyframes tovisible {
+	100% { opacity: 1; }
+}
+

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);
@@ -351,8 +365,15 @@ class ToolTip extends React.Component {
 				if (this.tabKeyPressed) {
 					this.setTooltipVisible(false);
 					this.tabKeyPressed = false;
-				} else if (evt.relatedTarget === null) { // Keep tooltip visible when clicked on a link.
-					this.setTooltipVisible(false);
+				} else {
+					// Check if evt.relatedTarget is a child of .common-canvas-tooltip to set tooltip visible when clicked on link
+					const el = evt?.relatedTarget?.closest(".common-canvas-tooltip");
+					if (el?.tagName?.toLowerCase() === "div") {
+						this.setTooltipVisible(true);
+					} else {
+						// Close the tooltip if evt.relatedTarget is not a child of .common-canvas-tooltip
+						this.setTooltipVisible(false);
+					}
 				}
 			};
 			const click = (evt) => this.toggleTooltipOnClick(evt);
@@ -398,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>);
 			}
 		}
 
@@ -428,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" />