@@ -31,6 +31,8 @@ class PaletteFlyoutContentCategory extends React.Component {
31
31
this . onMouseOver = this . onMouseOver . bind ( this ) ;
32
32
this . onMouseLeave = this . onMouseLeave . bind ( this ) ;
33
33
this . categoryClicked = this . categoryClicked . bind ( this ) ;
34
+ this . categoryKeyPressed = this . categoryKeyPressed . bind ( this ) ;
35
+ this . setPaletteCategory = this . setPaletteCategory . bind ( this ) ;
34
36
}
35
37
36
38
onMouseOver ( ev ) {
@@ -93,12 +95,22 @@ class PaletteFlyoutContentCategory extends React.Component {
93
95
return content ;
94
96
}
95
97
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
+
96
106
// Returns the category object for a regular category.
97
107
getRenderCategory ( ) {
98
108
const titleObj = this . getTitleObj ( ) ;
99
109
const content = this . getContent ( ) ;
100
110
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
+ >
102
114
{ content }
103
115
</ AccordionItem >
104
116
) ;
@@ -116,7 +128,7 @@ class PaletteFlyoutContentCategory extends React.Component {
116
128
onMouseOver = { this . onMouseOver }
117
129
onMouseLeave = { this . onMouseLeave }
118
130
>
119
- < div className = "palette-flyout-category-item" >
131
+ < div className = "palette-flyout-category-item" tabIndex = { - 1 } >
120
132
{ itemImage }
121
133
{ itemText }
122
134
</ div > </ div >
@@ -196,10 +208,17 @@ class PaletteFlyoutContentCategory extends React.Component {
196
208
// a category is opened.
197
209
evt . stopPropagation ( ) ;
198
210
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
+ }
203
222
}
204
223
}
205
224
0 commit comments