🎨 Palette: Make TableNode badges keyboard accessible#421
Conversation
💡 What: Added `tabIndex={0}` to non-interactive semantic badge elements (`<abbr>`, `<span>`) for PK, FK, and Not Null indicators in `TableNode.tsx`.
🎯 Why: Keyboard-only users and screen readers were previously unable to focus on these badges to read their informative `title` or `aria-label` tooltips.
📸 Before/After: Visuals remain unchanged, but badges are now part of the tab sequence.
♿ Accessibility: Ensures critical schema information is accessible to all users via standard keyboard navigation.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because no GitHub Actions runner was available. Make sure your repository has a runner available to run Copilot's review, or add a copilot-setup-steps.yml file specifying one with the runs-on attribute. See the docs for more details.
Improves keyboard accessibility for ERD TableNode schema badges by making PK/FK/NOT NULL indicators focusable so assistive tech can announce their labels.
Changes:
- Added
tabIndex={0}to PK/FK<abbr>badges and NOT NULL<span>badges inTableNode.tsx. - Documented the accessibility learning/action in
.jules/palette.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| frontend/src/erd/TableNode.tsx | Makes badge elements focusable via keyboard by adding tabIndex={0}. |
| .jules/palette.md | Records a palette guideline about adding tabIndex={0} to informative badges. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
💡 What: Added `tabIndex={0}` to non-interactive semantic badge elements (`<abbr>`, `<span>`) for PK, FK, and Not Null indicators in `TableNode.tsx`. Also fixed the CI to use `pnpm` instead of `npm`.
🎯 Why: Keyboard-only users and screen readers were previously unable to focus on these badges to read their informative `title` or `aria-label` tooltips.
📸 Before/After: Visuals remain unchanged, but badges are now part of the tab sequence.
♿ Accessibility: Ensures critical schema information is accessible to all users via standard keyboard navigation.
💡 What: Added `tabIndex={0}` to non-interactive semantic badge elements (`<abbr>`, `<span>`) for PK, FK, and Not Null indicators in `TableNode.tsx`. Reverted package manager changes that failed CI check.
🎯 Why: Keyboard-only users and screen readers were previously unable to focus on these badges to read their informative `title` or `aria-label` tooltips.
📸 Before/After: Visuals remain unchanged, but badges are now part of the tab sequence.
♿ Accessibility: Ensures critical schema information is accessible to all users via standard keyboard navigation.
…osion
💡 What:
- Removed `tabIndex={0}` from individual decorative badges (`PK`, `FK`, `NOT NULL`) in `TableNode.tsx`.
- Moved the `tabIndex={0}` and a combined descriptive `aria-label` to the parent `.tableNode__title` and `.tableNode__colIdentity` containers instead.
- Added detailed reasoning to `.jules/palette.md` for this approach.
🎯 Why: Making every single badge focusable creates a "tab-stop explosion", harming keyboard navigation efficiency. Exposing PK/FK/NOT NULL information in the accessible name of a single focusable element (the column row/label) provides the same context without the UX penalty. Also avoids relying on the native `title` attribute for focus tooltips, which many browsers ignore.
📸 Before/After: Visuals remain unchanged, but keyboard tab flow is much cleaner, and screen readers read the full context in one focus stop.
♿ Accessibility: Improves keyboard navigation efficiency and ensures screen reader users receive context smoothly.
OpenCode Review Overview
Pull request overviewOpenCode reviewed the current-head bounded evidence and found no blocking issues. FindingsNo blocking findings. SummaryApproval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Changed-File Evidence Mapflowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: palette.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: palette.md"]
R1 --> V1["required checks"]
Evidence --> S2["Frontend (2 files)"]
S2 --> I2["browser runtime and bundle"]
I2 --> R2["Review risk: Frontend (2 files)"]
R2 --> V2["frontend tests"]
|
![opencode-agent[bot]](https://avatars.githubusercontent.com/in/1549082?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
OpenCode reviewed the current-head bounded evidence and found no blocking issues.
Findings
No blocking findings.
Summary
Approval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Verification posture: CodeGraph evidence was initialized and bounded current-head evidence reviewed for changed-file evidence including .jules/palette.md, frontend/src/erd/TableNode.tsx.
Linter/static: workflow/static review evidence is bounded by the current-head GitHub Checks gate and changed-file evidence.
TDD/regression: coverage execution evidence and focused changed hunks were reviewed from bounded-review-evidence.md.
Coverage: coverage execution evidence reports test coverage as not applicable because no supported changed source files or package manifests were found.
Docstring coverage: coverage execution evidence reports docstring coverage as not applicable because no supported changed source files or package manifests were found.
DAG: CodeGraph/source-backed behavior map connects .jules/palette.md to the affected review, runtime, or workflow path and required checks.
PoC/execution: coverage-evidence job executed on the current head and reported PASS.
DDD/domain: workflow and repository-governance invariants were reviewed against changed files in bounded evidence.
CDD/context: CodeGraph evidence, changed-file history, and focused hunks were reviewed from bounded-review-evidence.md.
Similar issues: changed-file history evidence was reviewed for comparable local precedents.
Claim/concept check: bounded evidence, repository source, current-head workflow evidence, and, where numeric, scientific, statistical, or literature-backed claims are affected, original-paper/formula evidence and parameter-recovery expectations were used for claims.
Standards search: standards and external-source checks are delegated to configured OpenCode web_search/Context7/DeepWiki sources when applicable; no evidence-backed standards blocker is present in bounded evidence.
Compatibility/convention: changed workflow/script conventions, object naming, and reserved-word safety for schema/API/config/code surfaces were checked in bounded evidence.
Breaking-change/backcompat: deployment evidence and changed-file history were checked for backward-compatibility risk.
Performance: changed surfaces were checked for performance risk in bounded evidence.
Developer experience: changed automation, review, test, setup, and maintenance surfaces were checked for helpful or obstructive DX impact in bounded evidence.
User experience: connected user, operator, API, CLI, documentation, review-comment, status-check, rendering, and workflow-reader behavior was checked for contradictions against code, docs, and tests in bounded evidence.
Visual/DOM: Playwright visual, DOM locator, ARIA snapshot, console, and responsive evidence were checked when a web UI surface was present; for non-web surfaces, API/CLI/log/docs/workflow interaction evidence was reviewed instead.
Accessibility/i18n: accessibility, localization, and human-readable text surfaces were checked where UI, CLI, API message, docs, logs, or review text changed.
Supply-chain/license: dependency, package, model, container, and external-tool changes were checked in bounded evidence.
Packaging: package, build, test, lint, and security contracts were checked in bounded evidence.
Security/privacy: workflow-token, review-gate, and repository-automation security/privacy boundaries were checked in bounded evidence.
- Result: APPROVE
- Reason: Accessibility improvement with no production risk
- Head SHA:
aa51d4fd836619dad9a73615a5b4fc89f857ad97 - Workflow run: 28669282186
- Workflow attempt: 1
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: palette.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: palette.md"]
R1 --> V1["required checks"]
Evidence --> S2["Frontend: TableNode.tsx"]
S2 --> I2["browser runtime and bundle"]
I2 --> R2["Review risk: Frontend: TableNode.tsx"]
R2 --> V2["frontend tests"]
…osion
💡 What:
- Removed `tabIndex={0}` from individual decorative badges (`PK`, `FK`, `NOT NULL`) in `TableNode.tsx`.
- Moved the `tabIndex={0}` and a combined descriptive `aria-label` to the parent `.tableNode__title` and `.tableNode__colIdentity` containers instead.
- Added detailed reasoning to `.jules/palette.md` for this approach.
🎯 Why: Making every single badge focusable creates a "tab-stop explosion", harming keyboard navigation efficiency. Exposing PK/FK/NOT NULL information in the accessible name of a single focusable element (the column row/label) provides the same context without the UX penalty. Also avoids relying on the native `title` attribute for focus tooltips, which many browsers ignore.
📸 Before/After: Visuals remain unchanged, but keyboard tab flow is much cleaner, and screen readers read the full context in one focus stop.
♿ Accessibility: Improves keyboard navigation efficiency and ensures screen reader users receive context smoothly.
There was a problem hiding this comment.
Pull request overview
OpenCode reviewed the current-head bounded evidence and found no blocking issues.
Findings
No blocking findings.
Summary
Approval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Verification posture: CodeGraph evidence was initialized and bounded current-head evidence reviewed for changed-file evidence including .jules/palette.md, frontend/src/erd/TableNode.tsx, frontend/src/erd/tests/TableNode.test.tsx.
Linter/static: workflow/static review evidence is bounded by the current-head GitHub Checks gate and changed-file evidence.
TDD/regression: coverage execution evidence and focused changed hunks were reviewed from bounded-review-evidence.md.
Coverage: coverage execution evidence reports test coverage as not applicable because no supported changed source files or package manifests were found.
Docstring coverage: coverage execution evidence reports docstring coverage as not applicable because no supported changed source files or package manifests were found.
DAG: CodeGraph/source-backed behavior map connects .jules/palette.md to the affected review, runtime, or workflow path and required checks.
PoC/execution: coverage-evidence job executed on the current head and reported PASS.
DDD/domain: workflow and repository-governance invariants were reviewed against changed files in bounded evidence.
CDD/context: CodeGraph evidence, changed-file history, and focused hunks were reviewed from bounded-review-evidence.md.
Similar issues: changed-file history evidence was reviewed for comparable local precedents.
Claim/concept check: bounded evidence, repository source, current-head workflow evidence, and, where numeric, scientific, statistical, or literature-backed claims are affected, original-paper/formula evidence and parameter-recovery expectations were used for claims.
Standards search: standards and external-source checks are delegated to configured OpenCode web_search/Context7/DeepWiki sources when applicable; no evidence-backed standards blocker is present in bounded evidence.
Compatibility/convention: changed workflow/script conventions, object naming, and reserved-word safety for schema/API/config/code surfaces were checked in bounded evidence.
Breaking-change/backcompat: deployment evidence and changed-file history were checked for backward-compatibility risk.
Performance: changed surfaces were checked for performance risk in bounded evidence.
Developer experience: changed automation, review, test, setup, and maintenance surfaces were checked for helpful or obstructive DX impact in bounded evidence.
User experience: connected user, operator, API, CLI, documentation, review-comment, status-check, rendering, and workflow-reader behavior was checked for contradictions against code, docs, and tests in bounded evidence.
Visual/DOM: Playwright visual, DOM locator, ARIA snapshot, console, and responsive evidence were checked when a web UI surface was present; for non-web surfaces, API/CLI/log/docs/workflow interaction evidence was reviewed instead.
Accessibility/i18n: accessibility, localization, and human-readable text surfaces were checked where UI, CLI, API message, docs, logs, or review text changed.
Supply-chain/license: dependency, package, model, container, and external-tool changes were checked in bounded evidence.
Packaging: package, build, test, lint, and security contracts were checked in bounded evidence.
Security/privacy: workflow-token, review-gate, and repository-automation security/privacy boundaries were checked in bounded evidence.
- Result: APPROVE
- Reason: Accessibility improvement with no detected issues
- Head SHA:
15f9a73fc30209ba4c6bf66d57a73c38bb3de215 - Workflow run: 28673308829
- Workflow attempt: 1
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: palette.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: palette.md"]
R1 --> V1["required checks"]
Evidence --> S2["Frontend (2 files)"]
S2 --> I2["browser runtime and bundle"]
I2 --> R2["Review risk: Frontend (2 files)"]
R2 --> V2["frontend tests"]
💡 What: Added
tabIndex={0}to non-interactive semantic badge elements (<abbr>,<span>) for PK, FK, and Not Null indicators inTableNode.tsx.🎯 Why: Keyboard-only users and screen readers were previously unable to focus on these badges to read their informative
titleoraria-labeltooltips.📸 Before/After: Visuals remain unchanged, but badges are now part of the tab sequence.
♿ Accessibility: Ensures critical schema information is accessible to all users via standard keyboard navigation.
PR created automatically by Jules for task 7469994651610966030 started by @seonghobae