Adds keyboard accessibility for composer items

Author: d13

src/webviews/apps/plus/composer/components/commit-item.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { focusableBaseStyles } from '../../../shared/components/styles/lit/a11y.css';
 import { boxSizingBase } from '../../../shared/components/styles/lit/base.css';
 import { composerItemCommitStyles, composerItemContentStyles, composerItemStyles } from './composer.css';
 import '../../../shared/components/code-icon';
@@ -9,6 +10,7 @@ import '../../../shared/components/code-icon';
 export class CommitItem extends LitElement {
 	static override styles = [
 		boxSizingBase,
+		focusableBaseStyles,
 		composerItemStyles,
 		composerItemContentStyles,
 		composerItemCommitStyles,
@@ -90,9 +92,9 @@ export class CommitItem extends LitElement {
 		this.dataset.commitId = this.commitId;
 	}
 
-	private handleClick(e: MouseEvent) {
+	private handleClick(e: MouseEvent | KeyboardEvent) {
 		// Don't select commit if clicking on drag handle
-		if ((e.target as HTMLElement).closest('.drag-handle')) {
+		if ((e.target as HTMLElement).closest('.drag-handle') || (e instanceof KeyboardEvent && e.key !== 'Enter')) {
 			return;
 		}
 
@@ -119,7 +121,9 @@ export class CommitItem extends LitElement {
 				class="composer-item commit-item ${this.selected ? ' is-selected' : ''}${this.multiSelected
 					? ' multi-selected'
 					: ''}${this.first ? ' is-first' : ''}"
+				tabindex="0"
 				@click=${this.handleClick}
+				@keydown=${this.handleClick}
 			>
 				${when(
 					!this.isPreviewMode,

src/webviews/apps/plus/composer/components/commits-panel.ts

@@ -672,7 +672,12 @@ export class CommitsPanel extends LitElement {
 		this.requestUpdate(); // Re-render to hide unassign drop zone
 	}
 
-	private dispatchCommitSelect(commitId: string, multiSelect: boolean = false) {
+	private dispatchCommitSelect(commitId: string, e?: MouseEvent | KeyboardEvent) {
+		if (e instanceof KeyboardEvent && e.key !== 'Enter') {
+			return;
+		}
+
+		const multiSelect = e?.shiftKey ?? false;
 		this.dispatchEvent(
 			new CustomEvent('commit-select', {
 				detail: { commitId: commitId, multiSelect: multiSelect },
@@ -681,7 +686,9 @@ export class CommitsPanel extends LitElement {
 		);
 	}
 
-	private dispatchUnassignedSelect(section: string) {
+	private dispatchUnassignedSelect(section: string, e?: MouseEvent | KeyboardEvent) {
+		if (e instanceof KeyboardEvent && e.key !== 'Enter') return;
+
 		this.dispatchEvent(
 			new CustomEvent('unassigned-select', {
 				detail: { section: section },
@@ -787,7 +794,9 @@ export class CommitsPanel extends LitElement {
 		);
 	}
 
-	private handleCompositionSummaryClick() {
+	private handleCompositionSummaryClick(e: MouseEvent | KeyboardEvent) {
+		if (e instanceof KeyboardEvent && e.key !== 'Enter') return;
+
 		// Dispatch event to show composition summary
 		this.dispatchEvent(
 			new CustomEvent('select-composition-summary', {
@@ -912,7 +921,9 @@ export class CommitsPanel extends LitElement {
 					class="composer-item is-uncommitted${this.selectedUnassignedSection === section.key
 						? ' is-selected'
 						: ''}"
-					@click=${() => this.dispatchUnassignedSelect(section.key)}
+					tabindex="0"
+					@click=${(e: MouseEvent) => this.dispatchUnassignedSelect(section.key, e)}
+					@keydown=${(e: KeyboardEvent) => this.dispatchUnassignedSelect(section.key, e)}
 				>
 					<div class="composer-item__content">
 						<div class="composer-item__header">
@@ -960,7 +971,9 @@ export class CommitsPanel extends LitElement {
 				<h3 class="composition-summary__header">Composition Summary</h3>
 				<div
 					class="composer-item is-summary${this.compositionSummarySelected ? ' is-selected' : ''}"
+					tabindex="0"
 					@click=${this.handleCompositionSummaryClick}
+					@keydown=${this.handleCompositionSummaryClick}
 				>
 					<div class="composer-item__content">
 						<div class="composer-item__header">
@@ -1168,8 +1181,8 @@ export class CommitsPanel extends LitElement {
 											.multiSelected=${this.selectedCommitIds.has(commit.id)}
 											.isPreviewMode=${this.isPreviewMode}
 											?first=${i === 0}
-											@click=${(e: MouseEvent) =>
-												this.dispatchCommitSelect(commit.id, e.shiftKey)}
+											@click=${(e: MouseEvent) => this.dispatchCommitSelect(commit.id, e)}
+											@keydown=${(e: KeyboardEvent) => this.dispatchCommitSelect(commit.id, e)}
 										></gl-commit-item>
 									`;
 								},