Updates focus styles

Author: d13

src/webviews/apps/plus/shared/components/account-chip.ts

@@ -16,6 +16,7 @@ import { pluralize } from '../../../../../system/string';
 import type { State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
 import type { GlPopover } from '../../../shared/components/overlays/popover';
+import { focusableBaseStyles } from '../../../shared/components/styles/lit/a11y.css';
 import { elementBase, linkBase } from '../../../shared/components/styles/lit/base.css';
 import type { PromosContext } from '../../../shared/contexts/promos';
 import { promosContext } from '../../../shared/contexts/promos';
@@ -35,6 +36,7 @@ export class GLAccountChip extends LitElement {
 	static override styles = [
 		elementBase,
 		linkBase,
+		focusableBaseStyles,
 		chipStyles,
 		css`
 			.chip {

src/webviews/apps/plus/shared/components/chipStyles.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { focusOutline } from '../../../shared/components/styles/lit/a11y.css';
 
 export const chipStyles = css`
 	:host {
@@ -15,9 +16,8 @@ export const chipStyles = css`
 		cursor: pointer;
 	}
 
-	.chip:focus,
-	.chip:focus-within {
-		outline: 1px solid var(--vscode-focusBorder);
+	.chip:focus-visible {
+		${focusOutline}
 	}
 
 	.content {

src/webviews/apps/plus/shared/components/vscode.css.ts

@@ -8,13 +8,12 @@ export const linkStyles = css`
 		outline: none;
 		text-decoration: var(--link-decoration-default, none);
 	}
-	a:focus,
+
 	a:focus-visible {
-		outline-color: var(--color-focus-border);
-		outline-style: solid;
-		outline-width: 1px;
+		outline: 1px solid var(--color-focus-border);
 		border-radius: 0.2rem;
 	}
+
 	a:hover {
 		color: var(--link-foreground-active);
 		text-decoration: underline;

src/webviews/apps/shared/components/feature-badge.ts

@@ -61,7 +61,7 @@ export class GlFeatureBadge extends LitElement {
 				white-space: nowrap;
 			}
 
-			.badge:focus {
+			.badge:focus-visible {
 				${unsafeCSS(focusOutline)}
 			}
 

src/webviews/apps/shared/components/promo.ts

@@ -1,15 +1,21 @@
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { until } from 'lit/directives/until.js';
 import type { GlCommands } from '../../../../constants.commands';
 import type { Source } from '../../../../constants.telemetry';
 import type { Promo } from '../../../../plus/gk/models/promo';
 import { createCommandLink } from '../../../../system/commands';
+import { focusOutline } from './styles/lit/a11y.css';
 
 @customElement('gl-promo')
 export class GlPromo extends LitElement {
+	static override shadowRootOptions: ShadowRootInit = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	};
+
 	static override styles = [
 		css`
 			:host {
@@ -45,13 +51,20 @@ export class GlPromo extends LitElement {
 				white-space: nowrap;
 			}
 
+			.link:focus-visible {
+				${focusOutline}
+			}
+
 			.link:hover {
 				color: inherit;
 				text-decoration: underline;
 			}
 		`,
 	];
 
+	@query('a,button,[tabindex="0"]')
+	private _focusable?: HTMLElement;
+
 	@property({ type: Object })
 	promoPromise!: Promise<Promo | undefined>;
 
@@ -61,6 +74,15 @@ export class GlPromo extends LitElement {
 	@property({ reflect: true, type: String })
 	type: 'link' | 'info' = 'info';
 
+	private _hasPromo = false;
+	@property({ type: Boolean, reflect: true, attribute: 'has-promo' })
+	get hasPromo() {
+		return this._hasPromo;
+	}
+	private set hasPromo(value: boolean) {
+		this._hasPromo = value;
+	}
+
 	override render(): unknown {
 		return html`${until(
 			this.promoPromise.then(promo => this.renderPromo(promo)),
@@ -69,20 +91,23 @@ export class GlPromo extends LitElement {
 	}
 
 	private renderPromo(promo: Promo | undefined) {
-		if (!promo?.content?.webview) return;
+		if (!promo?.content?.webview) {
+			this.hasPromo = false;
+			return;
+		}
 
 		const content = promo.content.webview;
 		switch (this.type) {
 			case 'info':
 				if (content.info) {
-					this.setAttribute('has-promo', '');
+					this.hasPromo = true;
 					return html`<p class="promo">${unsafeHTML(content.info.html)}</p>`;
 				}
 				break;
 
 			case 'link':
 				if (content.link) {
-					this.setAttribute('has-promo', '');
+					this.hasPromo = true;
 					return html`<a
 						class="link"
 						href="${this.getCommandUrl(promo)}"
@@ -93,7 +118,7 @@ export class GlPromo extends LitElement {
 				break;
 		}
 
-		this.removeAttribute('has-promo');
+		this.hasPromo = false;
 		return nothing;
 	}
 
@@ -105,4 +130,8 @@ export class GlPromo extends LitElement {
 
 		return createCommandLink<Source>(command ?? 'gitlens.plus.upgrade', this.source);
 	}
+
+	override focus(): void {
+		this._focusable?.focus();
+	}
 }

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

@@ -12,7 +12,7 @@ export const srOnlyStyles = css`
 
 export const srOnly = css`
 	.sr-only,
-	.sr-only-focusable:not(:active):not(:focus):not(:focus-within) {
+	.sr-only-focusable:not(:active):not(:focus-visible):not(:focus-within) {
 		${srOnlyStyles}
 	}
 `;
@@ -26,3 +26,9 @@ export const focusOutlineButton = css`
 	outline: 1px solid var(--color-focus-border);
 	outline-offset: 2px;
 `;
+
+export const focusableBaseStyles = css`
+	:focus-visible {
+		${focusOutline}
+	}
+`;