#2818 Palette category does not expand when activated via Screen Reader (#2819)

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

Author: tomlyn

canvas_modules/common-canvas/src/common-canvas/keyboard-utils.js

@@ -27,6 +27,7 @@ const BACKSPACE_KEY = "Backspace";
 const DELETE_KEY = "Delete";
 const SPACE_KEY = "Space";
 
+const NO_BREAK_SPACE_CHAR_KEY = "\u00A0"; // Can be returned in short cuts for screen readers
 const SPACE_CHAR_KEY = " ";
 const COMMA_CHAR_KEY = ",";
 
@@ -481,7 +482,7 @@ export default class KeyboardUtils {
 
 	// key property can sometimes be set to "Space" (SPACE_KEY) in tests.
 	static isSpaceKey(evt) {
-		return evt.key === SPACE_CHAR_KEY || evt.key === SPACE_KEY;
+		return evt.key === SPACE_CHAR_KEY || evt.key === NO_BREAK_SPACE_CHAR_KEY || evt.key === SPACE_KEY;
 	}
 
 	// Returns true if either the 'Command Key' on Mac or

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

@@ -86,6 +86,7 @@ class PaletteContentListItem extends React.Component {
 	onKeyDown(evt) {
 		if (KeyboardUtils.createAutoNode(evt)) {
 			this.createAutoNode(true);
+			evt.stopPropagation(); // Stop key event propagating and closing the category.
 
 		} else if (KeyboardUtils.createAutoNodeNoLink(evt)) {
 			this.createAutoNode(false); // false indicates no links are required
@@ -107,7 +108,9 @@ class PaletteContentListItem extends React.Component {
 	}
 
 	onDoubleClick() {
-		this.createAutoNode(true);
+		if (!this.props.allowClickToAdd) {
+			this.createAutoNode(true);
+		}
 	}
 
 	onClick() {

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

@@ -31,9 +31,9 @@ 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);
+		this.onKeyDownCategory = this.onKeyDownCategory.bind(this);
+		this.onHeadingClick = this.onHeadingClick.bind(this);
+		this.getTitleObj = this.getTitleObj.bind(this);
 	}
 
 	onMouseOver(evt) {
@@ -48,6 +48,36 @@ class PaletteFlyoutContentCategory extends React.Component {
 		this.displayTip(evt);
 	}
 
+	onKeyDownCategory(evt) {
+		if (KeyboardUtils.openCategory(evt)) {
+			this.onHeadingClick();
+			CanvasUtils.stopPropagationAndPreventDefault(evt);
+
+		} else if (this.props.category.is_open &&
+					KeyboardUtils.fromCategoryToFirstNode(evt)) {
+			this.pclRef.current.setFirstNode();
+			CanvasUtils.stopPropagationAndPreventDefault(evt);
+
+		} else if (KeyboardUtils.tabFocusOutOfPalette(evt) &&
+					this.props.tabOut) {
+			this.props.tabOut(evt);
+		}
+	}
+
+	// Handles a click on the category heading area. This is called from the Accordion
+	// Item when:
+	// * the user clicks on a header AND
+	// * when the user presses the appropriate keyboard shortcut
+	// Additionally, it's called from onKeyDownCategory when the user presses space
+	// or return.
+	onHeadingClick() {
+		if (this.props.category.is_open) {
+			this.props.canvasController.closePaletteCategory(this.props.category.id);
+		} else {
+			this.props.canvasController.openPaletteCategory(this.props.category.id);
+		}
+	}
+
 	getInlineLoadingRenderCategory() {
 		// TODO - This loading functionality should be replaced with a skeleton
 		// graphic to indicate the category is loading instead of using the
@@ -81,21 +111,17 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return content;
 	}
 
-	setPaletteCategory(isOpen) {
-		if (isOpen) {
-			this.props.canvasController.closePaletteCategory(this.props.category.id);
-		} else {
-			this.props.canvasController.openPaletteCategory(this.props.category.id);
-		}
-	}
-
 	// Returns the category object for a regular category.
 	getRenderCategory() {
 		const titleObj = this.getTitleObj();
 		const content = this.getContent();
 		return (
-			<AccordionItem title={titleObj} open={this.props.category.is_open}
-				onKeyDown={this.categoryKeyPressed} onFocus={this.onFocus}
+			<AccordionItem
+				title={titleObj}
+				open={this.props.category.is_open}
+				onKeyDown={this.onKeyDownCategory}
+				onFocus={this.onFocus}
+				onHeadingClick={this.onHeadingClick}
 			>
 				{content}
 			</AccordionItem>
@@ -107,19 +133,20 @@ class PaletteFlyoutContentCategory extends React.Component {
 		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}
 				onMouseOver={this.onMouseOver}
 				onMouseLeave={this.onMouseLeave}
 			>
 				<div className="palette-flyout-category-item" tabIndex={-1}>
 					{itemImage}
 					{itemText}
-				</div></div>
+				</div>
+			</div>
 		);
 	}
 
@@ -218,32 +245,6 @@ class PaletteFlyoutContentCategory extends React.Component {
 
 	}
 
-	categoryClicked(evt) {
-		// Stopping event propagation prevents an extra refresh of the node icons when
-		// a category is opened.
-		evt.stopPropagation();
-
-		this.setPaletteCategory(this.props.category.is_open);
-	}
-
-	categoryKeyPressed(evt) {
-		if (evt.target.className === "cds--accordion__heading") {
-			if (KeyboardUtils.openCategory(evt)) {
-				this.setPaletteCategory(this.props.category.is_open);
-				CanvasUtils.stopPropagationAndPreventDefault(evt);
-
-			} else if (this.props.category.is_open &&
-						KeyboardUtils.fromCategoryToFirstNode(evt)) {
-				this.pclRef.current.setFirstNode();
-				CanvasUtils.stopPropagationAndPreventDefault(evt);
-
-			} else if (KeyboardUtils.tabFocusOutOfPalette(evt) &&
-						this.props.tabOut) {
-				this.props.tabOut(evt);
-			}
-		}
-	}
-
 	render() {
 		return this.props.category.loading_text
 			? this.getInlineLoadingRenderCategory()

canvas_modules/harness/cypress/support/canvas/palette-cmds.js

@@ -155,8 +155,12 @@ Cypress.Commands.add("tabToCategory", (categoryLabel) => {
 		.focus();
 });
 
+// Simulates a press of the space bar on a category. We need to send the key event to the
+// grandparent of the category element.
 Cypress.Commands.add("pressSpaceOnCategory", (categoryLabel) => {
 	cy.findCategory(categoryLabel)
+		.parent()
+		.parent()
 		.type(" ");
 });