本文へ移動
cccskills
無料GitHub で公開

verify-keyboard-access

Verify that every interactive control on a page can take keyboard focus and that its primary action fires from the keyboard rather than only the mouse, and say plainly that Tab order cannot be verified today. Use when a component was hand-tested with a mouse, a custom dropdown/modal/combobox was added, or an accessibility report flags an unreachable control.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md5.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Reachable is not the same as operable

A <div onClick> styled to look like a button can look reachable (plenty of component libraries hand out tabindex="0" for free) and still do nothing when you press Enter on it. Being able to take focus proves a control is reachable, not that it works.

Reticle can drive both halves in the running app. Not installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then the install-and-verify skill.

Read this before you start: Tab order cannot be verified today

press always goes through a synthetic key event, and a synthetic Tab does not move focus. That is true in every mode, including reticle drive: there is no mode in which an agent can prove focus order. Do not go looking for one, and do not report a Tab-order result as passed or failed. Report it as unknown.

What this skill can prove is narrower: that each control can take focus, and that its primary action fires from the keyboard.

Confirm the session is healthy

Confirm a live session exists for the page and can render and observe:

reticle_session({ action: "list" })

In a disconnected, hidden or throttled tab, a key press can be accepted while timers, rendering and later observation do not advance, so nothing you read back is trustworthy. Get a usable context first, for example a leased tab:

reticle_run({ tool: "reticle_lease", args: { action: "acquire", url } })

Pass refuseWhenThrottled: true on the action so a paused tab fails loudly instead of silently doing nothing. If you cannot get a healthy session, report the run as blocked, not passed, and do not keep retrying against it.

List the controls

List every interactive control before touching the keyboard, or you will only test the ones you already knew about:

reticle_look({ sessionId, action: "page", mode: "interactive" })

Check that each control can take focus

For each control from that list, focus it and assert that it took focus:

reticle_act({ sessionId, ref, action: "focus" })
reticle_assert({
  sessionId,
  predicate: { kind: "element", query: { testid: "the-control" }, state: "focused" },
})

That proves the control can take focus. It does not prove the control sits in the Tab order (tabindex="-1" is focusable but skipped by Tab), so report it as focusable, not Tab-reachable. A <div onClick> with no tabindex will not take focus, and that is a real finding.

Prove the primary action, not just the focus

Focus is a precondition, not the check. Name the consequence, then activate with the keyboard:

reticle_act_and_wait({
  sessionId,
  ref,
  action: "press",
  args: { text: "Enter" },
  until: { kind: "element", query: { testid: "expected-result" } },
})

Buttons and links take Enter. Checkboxes and native <select> take Space, plus arrow keys for the options. A synthetic Enter on a form control does submit its form, so Enter-to-submit is checkable here. A custom-styled combobox is the control most likely to fail: it looks identical to the native one and often only listens for click. Press the key. Do not substitute a click and assume the keyboard would behave the same.

An until can already be true before you act, and then already_true proves nothing about your key press. Check the consequence is absent first. If it is not, reset the app state and start again, or report the result as inconclusive. If the requirement is that text becomes visible, use a predicate that requires visibility, since a hidden element still satisfies a presence check. Load the exact fields with reticle_tools({ names: ["reticle_act_and_wait"] }) rather than guessing.

What to assert

  1. Every control from the initial look can take focus, each proven by a focus action and a state: "focused" assert.
  2. The primary action fires from the keyboard, proven by reticle_act_and_wait({ until }) naming a consequence that was not already true.

Tab order and focus traps are not on this list. Neither can be verified today, so report both as unknown, never as passed.

Honesty

Report each result as verified (Reticle returned a positive verdict for the exact condition), failed, blocked (no healthy session) or unknown. A verdict of verified: "unknown" or verified: "no-fault" is not a pass. unknown means Reticle could not tell what happened. Report either as it is, and never weaken a check to make it pass. Observed evidence is not a verified result, already_true is not proof your action caused the consequence, and a key press that was dispatched but never settled is not a completed interaction.

Finish with the controls found, which of them took focus, the key you pressed and the exact consequence you waited for, the verdict Reticle returned, that Tab order is unknown, and any throttling or timeout that limits the result.


Capability reference: curl https://docs.reticle.sh/capabilities.md. Everything else: curl https://docs.reticle.sh/llms.txt.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Test-driven development for behaviour a unit test cannot reach, by writing the expectation against the running app before writing the code. Declare the consequence first, watch it fail, implement, watch it pass. Use when building a user-facing feature, when the user asks for TDD on UI or full-stack work, when a unit test cannot express the outcome that matters, or when you want a red-green loop that runs against the real app instead of mocks.

日本語の概要は準備中です。原文の説明を表示しています。

reticlehq/reticle1,2152026年10月12日 更新

Sweep a whole running web app for what is broken, without writing a script or knowing the codebase. Clicks every reachable control and reports dead buttons, console errors, failed requests, and places where the API and the screen disagree. Use on an unfamiliar codebase, before a release, after a big merge or dependency bump, when the user asks for a smoke test or a health check, or when someone says "just check everything still works".

日本語の概要は準備中です。原文の説明を表示しています。

reticlehq/reticle1,2152026年10月12日 更新

Find out why something in a running web app does not work, when the console is empty and the code looks correct. Reads the click, the request, the store and the console together and returns the file:line to open. Use when a button does nothing, a form will not submit, data will not load, a page renders blank or stale, a modal will not close, or the user says "it's broken" and the code review says it is fine.

日本語の概要は準備中です。原文の説明を表示しています。

reticlehq/reticle1,2152026年10月12日 更新

Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.

日本語の概要は準備中です。原文の説明を表示しています。

reticlehq/reticle1,2152026年10月12日 更新

Drive and verify an Electron or Tauri desktop app from the inside, including the main-process and Rust IPC calls a browser tool cannot see. Use when a desktop app needs testing, when a feature works in the browser but not in the packaged app, when an IPC or invoke call needs proving, when a desktop screenshot or visual diff is wanted, or when you need a headless run of a desktop UI in CI.

日本語の概要は準備中です。原文の説明を表示しています。

reticlehq/reticle1,2152026年10月12日 更新

Find out why the tests pass but the app is broken. Catches false greens: a green suite over a feature that does not work, a mocked API standing in for a real one, an assertion that holds no matter what the app does, a click handler wired to nothing. Use when the suite is green and the user says it is broken, when a test never fails, when coverage looks fine but bugs still ship, or before trusting a passing run you did not watch.

日本語の概要は準備中です。原文の説明を表示しています。

reticlehq/reticle1,2152026年10月12日 更新

reticlehq のスキルをすべて見る

このスキルの問題を報告する