Fix container focus ring is invisible on Firefox ...and probably Safari too. <https://github.com/pocka/figspec/pull/60#discussion_r2688519646>

Changes

3 changed files (+30/-6)

• src/FrameCanvas/FrameCanvas.ts
  • @@ -48,6 +48,10 @@ export class FrameCanvas {
    static get styles(): string { return ( /* css */ ` + .fc-root { + border-radius: inherit; + } + .fc-viewport { --tooltip-font-size: var(--guide-tooltip-font-size);
  • @@ -70,10 +74,21 @@ export class FrameCanvas {
    outline: none; } - :host:has(.fc-viewport:focus-visible) { + .fc-focus-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + border-radius: inherit; + pointer-events: none; + z-index: calc(var(--z-index) + 3); + } + + .fc-viewport:focus-visible + .fc-focus-overlay { outline: 2px solid SelectedItem; - outline-offset: 1px; - overflow: visible; + outline-offset: -2px; } .fc-canvas {
  • @@ -183,7 +198,7 @@ export class FrameCanvas {
    this.#preferences = preferences.get(); }); - this.#container = el("div"); + this.#container = el("div", [className("fc-root")]); this.#selected = selected; this.#snackbar = snackbar; this.#viewport = el(
  • @@ -208,6 +223,7 @@ export class FrameCanvas {
    ); this.#container.appendChild(this.#viewport); + this.#container.appendChild(el("div", [className("fc-focus-overlay")])); } /**
• src/ui/styles.ts
  • @@ -7,8 +7,10 @@ import { styles as menuBar } from "./menuBar/menuBar.js";
    import { styles as preferencesPanel } from "./preferencesPanel/preferencesPanel.js"; import { styles as selectBox } from "./selectBox/selectBox.js"; import { styles as snackbar } from "./snackbar/snackbar.js"; + import { styles as ui } from "./ui.js"; export const styles: string = + ui + inspectorPanel + selectBox + iconButton +
• src/ui/ui.ts
  • @@ -1,4 +1,4 @@
    - import { el } from "../dom.js"; + import { className, el } from "../dom.js"; import type * as figma from "../figma.js"; import { type Preferences } from "../preferences.js"; import { compute, Signal } from "../signal.js";
  • @@ -21,6 +21,12 @@ import { menuBar } from "./menuBar/menuBar.js";
    import { preferencesPanel } from "./preferencesPanel/preferencesPanel.js"; import { snackbar, type SnackbarContent } from "./snackbar/snackbar.js"; + export const styles = /* css */ ` + .ui-root { + border-radius: inherit; + } + `; + const SNACKBAR_LIFETIME = 3000; type ElementChild = NonNullable<Parameters<typeof el>[2]>[number];
  • @@ -158,7 +164,7 @@ export function ui<T>({
    const layer = el( "div", - [], + [className("ui-root")], [ frameCanvas, perState,