Fixes keyboard a11y on home branch actions

Author: d13

src/webviews/apps/plus/home/components/branch-section.ts

@@ -4,6 +4,7 @@ import { when } from 'lit/directives/when.js';
 import type { Commands } from '../../../../../constants.commands';
 import type { GitTrackingState } from '../../../../../git/models/branch';
 import type { GetOverviewBranch } from '../../../../home/protocol';
+import { srOnlyStyles } from '../../../shared/components/styles/lit/a11y.css';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/avatar/avatar';
 import '../../../shared/components/avatar/avatar-list';
@@ -173,7 +174,7 @@ export const branchCardStyles = css`
 	}
 
 	.branch-item:not(:focus-within):not(:hover) .branch-item__actions {
-		display: none;
+		${srOnlyStyles}
 	}
 
 	.pill {

src/webviews/apps/shared/components/actions/action-item.ts

@@ -1,10 +1,16 @@
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { focusOutline } from '../styles/lit/a11y.css';
 import '../overlays/tooltip';
 import '../code-icon';
 
 @customElement('action-item')
 export class ActionItem extends LitElement {
+	static override shadowRootOptions: ShadowRootInit = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	};
+
 	static override styles = css`
 		:host {
 			box-sizing: border-box;
@@ -21,9 +27,8 @@ export class ActionItem extends LitElement {
 			cursor: pointer;
 		}
 
-		:host(:focus) {
-			outline: 1px solid var(--vscode-focusBorder);
-			outline-offset: -1px;
+		:host(:focus-within) {
+			${focusOutline}
 		}
 
 		:host(:hover) {
@@ -42,6 +47,9 @@ export class ActionItem extends LitElement {
 		a {
 			color: inherit;
 		}
+		a:focus {
+			outline: none;
+		}
 	`;
 
 	@property()
@@ -56,6 +64,9 @@ export class ActionItem extends LitElement {
 	@property({ type: Boolean })
 	disabled = false;
 
+	@query('a')
+	private defaultFocusEl!: HTMLAnchorElement;
+
 	override render() {
 		return html`
 			<gl-tooltip hoist content="${this.label ?? nothing}">
@@ -71,4 +82,8 @@ export class ActionItem extends LitElement {
 			</gl-tooltip>
 		`;
 	}
+
+	override focus(options?: FocusOptions) {
+		this.defaultFocusEl.focus(options);
+	}
 }

src/webviews/apps/shared/components/styles/lit/a11y.css.ts

@@ -1,15 +1,19 @@
 import { css } from 'lit';
 
+export const srOnlyStyles = css`
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+`;
+
 export const srOnly = css`
 	.sr-only,
-	.sr-only-focusable:not(:active):not(:focus) {
-		clip: rect(0 0 0 0);
-		clip-path: inset(50%);
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		position: absolute;
-		white-space: nowrap;
+	.sr-only-focusable:not(:active):not(:focus):not(:focus-within) {
+		${srOnlyStyles}
 	}
 `;