Improve area menu by lawsie · Pull Request #590 · flipcomputing/flock

lawsie · 2026-04-30T09:43:11Z

Summary

You can now tab through the areas in the area menu and press enter to select an area, as well as using the number keys.

Moved the import inside main.js for consistency.
Hard coded the colours for the overlay buttons as these need to be consistent regardless of theme

AI usage

Planned by me, mostly executed by me, with Claude Sonnet 4.6 to advise on a few fiddly bits.

Summary by CodeRabbit

Release Notes

New Features
- Added keyboard navigation support for area selection overlay (Tab/Shift+Tab to navigate, Enter to activate)
Style
- Enhanced visual focus indicators for keyboard users
- Improved contrast and visibility of area badges across themes

coderabbitai · 2026-04-30T09:43:26Z

📝 Walkthrough

Walkthrough

Relocates the accessibility.js module import from index.html to main/main.js. Refactors keyboard activation into an activateArea() helper function and expands Tab/Shift+Tab focus cycling through badge elements. Updates CSS styling for badges and outlines with fixed colors for consistent cross-theme visibility.

Changes

Cohort / File(s)	Summary
Module Loading `index.html`, `main/main.js`	Moves accessibility.js from runtime script tag in HTML to side-effect import in main.js, centralizing module initialization through the JavaScript bundler.
Focus & Keyboard Management `main/accessibility.js`	Introduces `activateArea()` helper for consistent area activation. Expands keyboard navigation to cycle Tab/Shift+Tab through `.area-number-badge` elements and activate via Enter key. Badges now focusable with `tabIndex = 0`.
Visual Styling `style.css`	Applies fixed black/white styling to `.area-number-badge` and fixed white outline to `.area-outline` for consistent visibility. Adds `.area-number-badge:focus` rule for keyboard navigation feedback.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Area menu overlay #588: Modifies the same accessibility overlay feature; this PR refactors keyboard/focus behavior and relocates the module import, building upon that feature's foundation.

Poem

🐰 Tab through the badges with gentle grace,
Focus flows to each designated place,
Keyboards whisper what mice would say—
Better paths for users every day! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Improve area menu' is vague and generic, using non-descriptive language that doesn't convey the specific technical changes or features being added to the changeset.	Consider a more specific title that highlights the primary change, such as 'Add keyboard navigation to area menu' or 'Enhance area menu with tab/enter and number key support'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@main/accessibility.js`:
- Around line 76-80: When no badge is focused
(badges.indexOf(document.activeElement) returns -1) and the user presses
Shift+Tab the current calculation yields (badIndex - 1 + badges.length) %
badges.length which produces badges.length-2; to fix this, detect currentIndex
=== -1 and, before computing nextIndex, set currentIndex to 0 when e.shiftKey is
true (so (0 - 1 + badges.length) % badges.length becomes badges.length-1),
otherwise leave it as -1 for forward Tab; then compute nextIndex exactly as
currently done and call badges[nextIndex].focus(); this change touches the
variables currentIndex, nextIndex, document.activeElement and the e.shiftKey
branch.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 16d05f67-52bf-400c-ab44-7f745ace6d0f

📥 Commits

Reviewing files that changed from the base of the PR and between cd0dd37 and e48e08b.

📒 Files selected for processing (4)

index.html
main/accessibility.js
main/main.js
style.css

💤 Files with no reviewable changes (1)

index.html

coderabbitai · 2026-04-30T09:47:13Z

+          const currentIndex = badges.indexOf(document.activeElement);
+          const nextIndex = e.shiftKey
+            ? (currentIndex - 1 + badges.length) % badges.length
+            : (currentIndex + 1) % badges.length;
+          badges[nextIndex].focus();


⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix reverse-tab wrap when no badge is currently focused.

At Line 77–79, currentIndex === -1 with Shift+Tab resolves to badges.length - 2, so focus skips the last badge.

Suggested fix

- const currentIndex = badges.indexOf(document.activeElement); - const nextIndex = e.shiftKey - ? (currentIndex - 1 + badges.length) % badges.length - : (currentIndex + 1) % badges.length; + const currentIndex = badges.indexOf(document.activeElement); + const hasFocusedBadge = currentIndex !== -1; + const nextIndex = e.shiftKey + ? hasFocusedBadge + ? (currentIndex - 1 + badges.length) % badges.length + : badges.length - 1 + : hasFocusedBadge + ? (currentIndex + 1) % badges.length + : 0; badges[nextIndex].focus();

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@main/accessibility.js` around lines 76 - 80, When no badge is focused (badges.indexOf(document.activeElement) returns -1) and the user presses Shift+Tab the current calculation yields (badIndex - 1 + badges.length) % badges.length which produces badges.length-2; to fix this, detect currentIndex === -1 and, before computing nextIndex, set currentIndex to 0 when e.shiftKey is true (so (0 - 1 + badges.length) % badges.length becomes badges.length-1), otherwise leave it as -1 for forward Tab; then compute nextIndex exactly as currently done and call badges[nextIndex].focus(); this change touches the variables currentIndex, nextIndex, document.activeElement and the e.shiftKey branch.

It's not possible for no badge to be focused because the first badge is auto focused and Esc exits the overlay.

@lawsie, you're right — since the first badge is auto-focused immediately when the overlay opens and Escape (as well as number keys and Enter) always closes the overlay, the currentIndex === -1 state is unreachable during normal Tab navigation. My concern doesn't apply here. Thanks for the clear explanation!

lawsie added 2 commits April 30, 2026 10:05

Move import

c5d3e14

Tab through badges

e48e08b

coderabbitai Bot reviewed Apr 30, 2026

View reviewed changes

lawsie mentioned this pull request Apr 30, 2026

Keyboard controls for overall UI #343

Open

23 tasks

tracygardner merged commit 2570145 into flipcomputing:main Apr 30, 2026
5 checks passed

This was referenced Apr 30, 2026

Add keyboard shortcuts for gizmo menu #591

Merged

Add keyboard shortcuts panel #595

Merged

coderabbitai Bot mentioned this pull request May 7, 2026

Zoom control bar #617

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve area menu#590

Improve area menu#590
tracygardner merged 2 commits into
flipcomputing:mainfrom
lawsie:improve-area-menu

lawsie commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Apr 30, 2026 •

edited

Loading

Uh oh!

lawsie Apr 30, 2026

Uh oh!

coderabbitai Bot Apr 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

lawsie commented Apr 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

AI usage

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lawsie Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lawsie commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading

coderabbitai Bot Apr 30, 2026 •

edited

Loading