Skip to content

Commit 0cff8a3

Browse files
authored
a11y: Allow Enter/Space to open quickpicks (#5132)
* a11y: Allow Enter/Space to open quickpicks
1 parent 911ee9a commit 0cff8a3

File tree

2 files changed

+28
-14
lines changed

2 files changed

+28
-14
lines changed

src/github/quickPicks.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ export async function getMilestoneFromQuickPick(folderRepositoryManager: FolderR
270270
const quickPick = vscode.window.createQuickPick();
271271
quickPick.busy = true;
272272
quickPick.canSelectMany = false;
273-
quickPick.title = vscode.l10n.t('Select a milestone to add');
273+
quickPick.title = vscode.l10n.t('Set milestone');
274274
quickPick.buttons = [{
275275
iconPath: new vscode.ThemeIcon('add'),
276276
tooltip: 'Create',

webviews/createPullRequestViewNew/app.tsx

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,17 @@ export function main() {
151151
create();
152152
}
153153

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+
154165
return <div className='group-main' data-vscode-context='{"preventDefaultContextMenuItems": true}'>
155166
<div className='group-branches'>
156167
<div className='input-label base'>
@@ -201,13 +212,13 @@ export function main() {
201212
</div>
202213

203214
<div className='group-additions'>
204-
205215
{params.assignees && (params.assignees.length > 0) ?
206216
<div className='assignees'>
207217
<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+
>
211222
{params.assignees.map(assignee =>
212223
<li>
213224
<span title={assignee.name} aria-label={assignee.name}>
@@ -222,9 +233,10 @@ export function main() {
222233
{params.reviewers && (params.reviewers.length > 0) ?
223234
<div className='reviewers'>
224235
<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+
>
228240
{params.reviewers.map(reviewer =>
229241
<li>
230242
<span title={reviewer.name} aria-label={reviewer.name}>
@@ -239,9 +251,10 @@ export function main() {
239251
{params.labels && (params.labels.length > 0) ?
240252
<div className='labels'>
241253
<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+
>
245258
{params.labels.map(label => <LabelCreate key={label.name} {...label} canDelete isDarkTheme={!!params.isDarkTheme} />)}
246259
</ul>
247260
</div>
@@ -250,9 +263,10 @@ export function main() {
250263
{params.milestone ?
251264
<div className='milestone'>
252265
<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+
>
256270
<li>
257271
{params.milestone.title}
258272
</li>

0 commit comments

Comments
 (0)