@@ -151,6 +151,17 @@ export function main() {
151
151
create ( ) ;
152
152
}
153
153
154
+ function activateCommand ( event : MouseEvent | KeyboardEvent , command : string ) : void {
155
+ if ( event instanceof KeyboardEvent ) {
156
+ if ( event . key === 'Enter' || event . key === ' ' ) {
157
+ event . preventDefault ( ) ;
158
+ ctx . postMessage ( { command : command } ) ;
159
+ }
160
+ } else if ( event instanceof MouseEvent ) {
161
+ ctx . postMessage ( { command : command } ) ;
162
+ }
163
+ }
164
+
154
165
return < div className = 'group-main' data-vscode-context = '{"preventDefaultContextMenuItems": true}' >
155
166
< div className = 'group-branches' >
156
167
< div className = 'input-label base' >
@@ -201,13 +212,13 @@ export function main() {
201
212
</ div >
202
213
203
214
< div className = 'group-additions' >
204
-
205
215
{ params . assignees && ( params . assignees . length > 0 ) ?
206
216
< div className = 'assignees' >
207
217
< span title = 'Assignees' aria-hidden = 'true' > { assigneeIcon } </ span >
208
- < ul aria-label = "Assignees" tabIndex = { 0 } onClick = { ( ) => {
209
- ctx . postMessage ( { command : 'pr.changeAssignees' } ) ;
210
- } } >
218
+ < ul aria-label = 'Assignees' tabIndex = { 0 } role = 'button'
219
+ onClick = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeAssignees' ) }
220
+ onKeyPress = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeAssignees' ) }
221
+ >
211
222
{ params . assignees . map ( assignee =>
212
223
< li >
213
224
< span title = { assignee . name } aria-label = { assignee . name } >
@@ -222,9 +233,10 @@ export function main() {
222
233
{ params . reviewers && ( params . reviewers . length > 0 ) ?
223
234
< div className = 'reviewers' >
224
235
< span title = 'Reviewers' aria-hidden = 'true' > { reviewerIcon } </ span >
225
- < ul aria-label = "Reviewers" tabIndex = { 0 } onClick = { ( ) => {
226
- ctx . postMessage ( { command : 'pr.changeReviewers' } ) ;
227
- } } >
236
+ < ul aria-label = 'Reviewers' tabIndex = { 0 } role = 'button'
237
+ onClick = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeReviewers' ) }
238
+ onKeyPress = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeReviewers' ) }
239
+ >
228
240
{ params . reviewers . map ( reviewer =>
229
241
< li >
230
242
< span title = { reviewer . name } aria-label = { reviewer . name } >
@@ -239,9 +251,10 @@ export function main() {
239
251
{ params . labels && ( params . labels . length > 0 ) ?
240
252
< div className = 'labels' >
241
253
< span title = 'Labels' aria-hidden = 'true' > { labelIcon } </ span >
242
- < ul aria-label = "Labels" tabIndex = { 0 } onClick = { ( ) => {
243
- ctx . postMessage ( { command : 'pr.changeLabels' } ) ;
244
- } } >
254
+ < ul aria-label = 'Labels' tabIndex = { 0 } role = 'button'
255
+ onClick = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeLabels' ) }
256
+ onKeyPress = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeLabels' ) }
257
+ >
245
258
{ params . labels . map ( label => < LabelCreate key = { label . name } { ...label } canDelete isDarkTheme = { ! ! params . isDarkTheme } /> ) }
246
259
</ ul >
247
260
</ div >
@@ -250,9 +263,10 @@ export function main() {
250
263
{ params . milestone ?
251
264
< div className = 'milestone' >
252
265
< span title = 'Milestone' aria-hidden = 'true' > { milestoneIcon } </ span >
253
- < ul aria-label = "Milestone" tabIndex = { 0 } onClick = { ( ) => {
254
- ctx . postMessage ( { command : 'pr.changeMilestone' } ) ;
255
- } } >
266
+ < ul aria-label = 'Milestone' tabIndex = { 0 } role = 'button'
267
+ onClick = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeMilestone' ) }
268
+ onKeyPress = { ( e ) => activateCommand ( e . nativeEvent , 'pr.changeMilestone' ) }
269
+ >
256
270
< li >
257
271
{ params . milestone . title }
258
272
</ li >
0 commit comments