8000 Fix release image build; visible keyboard focus on the canvas by adeelahmad · Pull Request #31 · adeelahmad/gadgetcast · GitHub
[go: up one dir, main page]
Skip to content

Fix release image build; visible keyboard focus on the canvas #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adeelahmad merged 2 commits into from
Oct 18, 2026
Merged

Fix release image build; visible keyboard focus on the canvas #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35d7aed
ci(pi-image): free disk ourselves; action cleanup fails on apt exit 100
claude Oct 18, 2026
fb0cbd1
fix(web): visible keyboard focus on canvas nodes and cables
claude Oct 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion .github/workflows/pi-image.yml
8000
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,15 @@ jobs:
echo "$ARCH" >"$files/ARCH"
ls -l "$files"

# The action's own cleanup (increase-runner-disk-size) runs apt-get remove
# and fails the job when apt does (exit 100), so free space here instead.
- name: Free runner disk space
run: |
sudo rm -rf /usr/share/dotnet /usr/local/lib/android /opt/ghc \
/opt/hostedtoolcache/CodeQL /usr/local/share/boost || true
sudo docker image prune --all --force || true
df -h /

- uses: usimd/pi-gen-action@v1
id: build
with:
Expand All @@ -76,7 +85,7 @@ jobs:
timezone: Etc/UTC
compression: xz
enable-cloud-init: 1
increase-runner-disk-size: true
increase-runner-disk-size: false

- name: Attach image to release
env:
Expand Down
21 changes: 21 additions & 0 deletions web/src/app/focus.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";

/* studio.css turns React Flow's focus styles off, and React Flow's own stylesheet loads after it
with .react-flow__node.selectable:focus-visible{outline:none}. A keyboard walkthrough found canvas
nodes and cables took focus with nothing drawn; these rules keep the focus visible (WCAG 2.4.7). */
const css = readFileSync(new URL("./studio.css", import.meta.url), "utf8");

function rule(selector: string): string {
const i = css.indexOf(selector + "{");
return i < 0 ? "" : css.slice(i + selector.length + 1, css.indexOf("}", i));
}

describe("canvas keyboard focus", () => {
it("outlines a focused node, out-ranking React Flow's own rule", () => {
expect(rule(".react-flow .react-flow__node.react-flow__node-gc:focus-visible")).toMatch(/outline:\s*2px solid var\(--brand\)/);
});
it("paints a halo on a focused cable", () => {
expect(rule(".react-flow__edge:focus-visible .gc-wire>path:first-child")).toMatch(/stroke:\s*var\(--brand\)/);
});
});
4 changes: 4 additions & 0 deletions web/src/app/studio.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ html,body{height:100%;overflow:hidden}
.react-flow__node-gc{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.react-flow__node-gc.selected,.react-flow__node-gc:focus,.react-flow__node-gc:focus-visible{box-shadow:none;outline:none}
.react-flow__edge-path{stroke:none}
/* Keyboard focus must stay visible (WCAG 2.4.7): the rules above and React Flow's own
.selectable:focus-visible{outline:none} hide it, hence the extra .react-flow for specificity. */
.react-flow .react-flow__node.react-flow__node-gc:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-md)}
.react-flow__edge:focus-visible .gc-wire>path:first-child{stroke:var(--brand);stroke-opacity:.5;stroke-width:10px}

/* Scrolling flex columns: children keep their natural height and the column scrolls. */
.gc-stack>*{flex-shrink:0}
Expand Down
Loading
0