Skip to content

Commit c20f637

Browse files
authored
#1713 Display Palette category content using keyboard (#1714)
1 parent 9864601 commit c20f637

File tree

1 file changed

+25
-6
lines changed

1 file changed

+25
-6
lines changed

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

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ class PaletteFlyoutContentCategory extends React.Component {
3131
this.onMouseOver = this.onMouseOver.bind(this);
3232
this.onMouseLeave = this.onMouseLeave.bind(this);
3333
this.categoryClicked = this.categoryClicked.bind(this);
34+
this.categoryKeyPressed = this.categoryKeyPressed.bind(this);
35+
this.setPaletteCategory = this.setPaletteCategory.bind(this);
3436
}
3537

3638
onMouseOver(ev) {
@@ -93,12 +95,22 @@ class PaletteFlyoutContentCategory extends React.Component {
9395
return content;
9496
}
9597

98+
setPaletteCategory(isOpen) {
99+
if (isOpen) {
100+
this.props.canvasController.closePaletteCategory(this.props.category.id);
101+
} else {
102+
this.props.canvasController.openPaletteCategory(this.props.category.id);
103+
}
104+
}
105+
96106
// Returns the category object for a regular category.
97107
getRenderCategory() {
98108
const titleObj = this.getTitleObj();
99109
const content = this.getContent();
100110
return (
101-
<AccordionItem title={titleObj} open={this.props.category.is_open}>
111+
<AccordionItem title={titleObj} open={this.props.category.is_open}
112+
onKeyDown={this.categoryKeyPressed}
113+
>
102114
{content}
103115
</AccordionItem>
104116
);
@@ -116,7 +128,7 @@ class PaletteFlyoutContentCategory extends React.Component {
116128
onMouseOver={this.onMouseOver}
117129
onMouseLeave={this.onMouseLeave}
118130
>
119-
<div className="palette-flyout-category-item">
131+
<div className="palette-flyout-category-item" tabIndex={-1}>
120132
{itemImage}
121133
{itemText}
122134
</div></div>
@@ -196,10 +208,17 @@ class PaletteFlyoutContentCategory extends React.Component {
196208
// a category is opened.
197209
evt.stopPropagation();
198210

199-
if (this.props.category.is_open) {
200-
this.props.canvasController.closePaletteCategory(this.props.category.id);
201-
} else {
202-
this.props.canvasController.openPaletteCategory(this.props.category.id);
211+
this.setPaletteCategory(this.props.category.is_open);
212+
}
213+
214+
categoryKeyPressed(evt) {
215+
if (evt.target.className === "bx--accordion__heading") {
216+
if (evt.code === "Enter" || evt.code === "Space") {
217+
evt.preventDefault();
218+
evt.stopPropagation();
219+
220+
this.setPaletteCategory(this.props.category.is_open);
221+
}
203222
}
204223
}
205224

0 commit comments

Comments
 (0)