diff --git a/canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx b/canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx index 014df1cabb..2e95034ee3 100644 --- a/canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx +++ b/canvas_modules/common-canvas/src/palette/palette-flyout-content-category.jsx @@ -31,6 +31,8 @@ class PaletteFlyoutContentCategory extends React.Component { this.onMouseOver = this.onMouseOver.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); this.categoryClicked = this.categoryClicked.bind(this); + this.categoryKeyPressed = this.categoryKeyPressed.bind(this); + this.setPaletteCategory = this.setPaletteCategory.bind(this); } onMouseOver(ev) { @@ -93,12 +95,22 @@ 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 ( - + {content} ); @@ -116,7 +128,7 @@ class PaletteFlyoutContentCategory extends React.Component { onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} > -
+
{itemImage} {itemText}
@@ -196,10 +208,17 @@ class PaletteFlyoutContentCategory extends React.Component { // a category is opened. evt.stopPropagation(); - if (this.props.category.is_open) { - this.props.canvasController.closePaletteCategory(this.props.category.id); - } else { - this.props.canvasController.openPaletteCategory(this.props.category.id); + this.setPaletteCategory(this.props.category.is_open); + } + + categoryKeyPressed(evt) { + if (evt.target.className === "bx--accordion__heading") { + if (evt.code === "Enter" || evt.code === "Space") { + evt.preventDefault(); + evt.stopPropagation(); + + this.setPaletteCategory(this.props.category.is_open); + } } }