#2319 Keyboard accessibility of palette tooltip (#2320)

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/src/palette/palette-content-list-item.jsx

@@ -55,12 +55,20 @@ class PaletteContentListItem extends React.Component {
 		// Make sure the tip doesn't appear when starting to drag a node.
 		this.props.canvasController.closeTip();
 
+		// Sets the focus index on the parent palette-content-list so
+		// future key presses that move focus will work correctly.
+		if (this.props.setFocusIndex) {
+			this.props.setFocusIndex();
+		}
+
 		// Prepare the ghost image on mouse down because asynchronous loading of
 		// SVG files will be too slow if this is done in onDragStart.
 		this.ghostData = this.props.canvasController.getGhostNode(this.props.nodeTypeInfo.nodeType);
 	}
 
 	onDragStart(ev) {
+		this.props.canvasController.closeTip();
+
 		// We cannot use the dataTransfer object for the nodeTemplate because
 		// the dataTransfer data is not available during dragOver events so we set
 		// the nodeTemplate into the canvas controller.
@@ -105,19 +113,9 @@ class PaletteContentListItem extends React.Component {
 		}
 	}
 
-	onMouseOver(ev) {
-		if (!this.props.isDisplaySearchResult && ev.buttons === 0) {
-			const nodeTemplate = this.props.nodeTypeInfo.category.empty_text
-				? { app_data: { ui_data: { label: this.props.nodeTypeInfo.category.empty_text } } }
-				: this.props.nodeTypeInfo.nodeType;
-
-			this.props.canvasController.openTip({
-				id: "paletteTip_" + this.props.nodeTypeInfo.nodeType.op,
-				type: TIP_TYPE_PALETTE_ITEM,
-				targetObj: ev.currentTarget,
-				nodeTemplate: nodeTemplate,
-				category: this.props.nodeTypeInfo.category
-			});
+	onMouseOver(evt) {
+		if (!this.props.isDisplaySearchResult && evt.buttons === 0) {
+			this.displayTip();
 		}
 	}
 
@@ -269,8 +267,30 @@ class PaletteContentListItem extends React.Component {
 		this.setState({ showFullDescription: false });
 	}
 
+	// Sets the focus on this palette (node) item and displays
+	// a tooltip. This is called by the parent palette-content-list
+	// when the user moves focus to a new node using the keyboard, so
+	// we always show a tip for the keyboard user.
 	focus() {
 		this.itemRef.current.focus();
+		this.displayTip();
+	}
+
+	// Display a tip for this palette (node) item.
+	displayTip() {
+		this.props.canvasController.closeTip();
+
+		const nodeTemplate = this.props.nodeTypeInfo.category.empty_text
+			? { app_data: { ui_data: { label: this.props.nodeTypeInfo.category.empty_text } } }
+			: this.props.nodeTypeInfo.nodeType;
+
+		this.props.canvasController.openTip({
+			id: "paletteTip_" + this.props.nodeTypeInfo.nodeType.op,
+			type: TIP_TYPE_PALETTE_ITEM,
+			targetObj: this.itemRef.current,
+			nodeTemplate: nodeTemplate,
+			category: this.props.nodeTypeInfo.category
+		});
 	}
 
 	// Returns true if this item is disabled and should not be draggable or double-clicked
@@ -394,6 +414,7 @@ PaletteContentListItem.propTypes = {
 	tabIndex: PropTypes.number.isRequired,
 	nextNodeInCategory: PropTypes.func,
 	previousNodeInCategory: PropTypes.func,
+	setFocusIndex: PropTypes.func,
 	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	isPaletteWide: PropTypes.bool,

canvas_modules/common-canvas/src/palette/palette-content-list.jsx

@@ -37,6 +37,10 @@ class PaletteContentList extends React.Component {
 		this.contentItemRefs[this.currentFocusIndex].current.focus();
 	}
 
+	setFocusIndex(idx) {
+		this.currentFocusIndex = idx;
+	}
+
 	nextNodeInCategory(evt) {
 		this.currentFocusIndex++;
 		if (this.currentFocusIndex > this.contentItemRefs.length - 1) {
@@ -93,6 +97,7 @@ class PaletteContentList extends React.Component {
 						isEditingEnabled={this.props.isEditingEnabled}
 						nextNodeInCategory={this.nextNodeInCategory}
 						previousNodeInCategory={this.previousNodeInCategory}
+						setFocusIndex={this.setFocusIndex.bind(this, idx)}
 						allowClickToAdd={this.props.allowClickToAdd}
 					/>
 				);

canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx

@@ -31,24 +31,24 @@ class PaletteFlyoutContentCategory extends React.Component {
 
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
+		this.onFocus = this.onFocus.bind(this);
 		this.categoryClicked = this.categoryClicked.bind(this);
 		this.categoryKeyPressed = this.categoryKeyPressed.bind(this);
 		this.setPaletteCategory = this.setPaletteCategory.bind(this);
 	}
 
-	onMouseOver(ev) {
-		this.props.canvasController.openTip({
-			id: "paletteTip_" + this.props.category.id,
-			type: TIP_TYPE_PALETTE_CATEGORY,
-			targetObj: ev.currentTarget,
-			category: this.props.category
-		});
+	onMouseOver(evt) {
+		this.displayTip(evt);
 	}
 
 	onMouseLeave() {
 		this.props.canvasController.closeTip();
 	}
 
+	onFocus(evt) {
+		this.displayTip(evt);
+	}
+
 	getDisplayLabel() {
 		if (this.props.isPaletteWide === true) {
 			return this.props.category.label;
@@ -63,7 +63,6 @@ class PaletteFlyoutContentCategory extends React.Component {
 	}
 
 	getInlineLoadingRenderCategory() {
-
 		// TODO - This loading functionality should be replaced with a skeleton
 		// graphic to indicate the category is loading instead of using the
 		// InlineLoading component.
@@ -110,7 +109,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 		const content = this.getContent();
 		return (
 			<AccordionItem title={titleObj} open={this.props.category.is_open}
-				onKeyDown={this.categoryKeyPressed}
+				onKeyDown={this.categoryKeyPressed} onFocus={this.onFocus}
 			>
 				{content}
 			</AccordionItem>
@@ -121,8 +120,10 @@ class PaletteFlyoutContentCategory extends React.Component {
 	getTitleObj() {
 		const itemImage = this.getItemImage();
 		const itemText = this.getItemText();
+		this.catRef = React.createRef();
 		return (
 			<div className="palette-flyout-category"
+				ref={this.catRef}
 				data-id={get(this.props.category, "id", "")}
 				onClick={this.categoryClicked}
 				value={this.props.category.label}
@@ -210,6 +211,17 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return null;
 	}
 
+	displayTip() {
+		this.props.canvasController.closeTip();
+		this.props.canvasController.openTip({
+			id: "paletteTip_" + this.props.category.id,
+			type: TIP_TYPE_PALETTE_CATEGORY,
+			targetObj: this.catRef.current,
+			category: this.props.category
+		});
+
+	}
+
 	categoryClicked(evt) {
 		// Stopping event propagation prevents an extra refresh of the node icons when
 		// a category is opened.