feat(web): baseline accessibility semantics for the shells and login - #337
Open
anabelle wants to merge 1 commit into
Open
feat(web): baseline accessibility semantics for the shells and login#337anabelle wants to merge 1 commit into
anabelle wants to merge 1 commit into
Conversation
First slice of theam#331: a VisuallyHidden primitive in @facility/ui, a keyboard-visible skip link with an explicit main-content target in both authenticated shells (first focusable element, main becomes focusable), and login page semantics (main landmark, h1, descriptive title via the root template). Dependency-free: contracts are tested with server-rendered markup assertions in the default node environment. Refs theam#331
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refs #331. The baseline-semantics slice agreed in the issue: no live-region decisions here, no new dependencies.
What changes
VisuallyHiddenprimitive in@facility/ui: the blessed way to give icon-only controls an accessible name. Tailwind'ssr-onlytechnique, neverdisplay: none, so content stays in the accessibility tree.SkipLinkin both authenticated shells (org and project): first focusable element in the DOM,sr-onlyuntil focused, fixed top-left when visible, targets an explicit#main-contentwithtabIndex={-1}so focus actually moves and the next Tab lands inside the work area instead of back in the sidebar.<main>landmark, the brand mark becomes the<h1>, andtitle: "Sign in"rides the root template to render "Sign in · facility".Tests
apps/web/test/a11y-baseline.test.tsx, deterministic and dependency-free: server-renders both real layouts with the API, topbar, and router-link modules mocked, then asserts the DOM contract (skip link precedes the sidebar nav,maincarriesidandtabindex, login has landmark, heading, and title;VisuallyHiddenkeeps text in the tree). Runs in the default node environment, no browser, no network, no credentials.Verification
pnpm --filter @facility/web test- 6 files, 37 tests passed (5 new)pnpm --filter @facility/web typecheck- cleanpnpm --filter @facility/ui typecheck- cleanpnpm exec biome checkon changed files - clean after import-order fixespnpm --filter @facility/web build- cleannode guards/run.mjs- 2 guards ran, 0 failedNot run: full
pnpm verify(needs Docker-backed PostgreSQL; no API, database, or workspace boundary is touched) and the manual keyboard pass (recommended on merge: tab from the address bar on an org page, a project page, and the login page).Effects
featon0.xreleases a patch.