🎨 Palette: Enhance status bar keyboard accessibility

[legato3]

💡 What: Improved the accessibility of the interactive status bar items in the main dashboard (index.html).
🎯 Why: The status bar items (System Health, Compute Resources, Data Ingestion) were implemented as clickable divs without appropriate ARIA roles or keyboard support, making them inaccessible to keyboard and screen reader users.
📸 Verification: Verified using Playwright script and manual inspection of the generated screenshot to ensure no visual regression while adding functionality.
♿ Accessibility:
- Added role="button" to indicate interactivity.
- Added tabindex="0" to make items focusable via Tab.
- Added aria-labels ("View System Health", etc.) for context.
- Added @keydown.enter and @keydown.space.prevent for keyboard activation.

---

PR created automatically by Jules for task 8305286650711987098 started by @legato3

Summary by CodeRabbit

• Accessibility
  • Improved keyboard navigation for status bar items (System Health, Compute, Ingestion) with support for Enter and Space key interactions and enhanced ARIA labels for better accessibility.

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

📝 Walkthrough

Walkthrough

Status bar items in the template were enhanced with ARIA attributes (role, aria-label) and keyboard event handlers to support keyboard navigation. The click behavior and visual layout remain unchanged; keyboard support now mirrors existing click functionality.

Changes

Cohort / File(s)	Summary
Accessibility Enhancements frontend/templates/index.html	Added ARIA attributes (role="button", aria-label), keyboard event handlers (@keydown.enter, @keydown.space.prevent), and tabindex="0" to status bar items (SYSTEM HEALTH, COMPUTE, INGESTION) for improved keyboard accessibility while preserving existing click behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 The status bars now dance with grace,
With keyboard keys throughout the space,
ARIA labels show the way,
Accessibility saves the day!
A small hop forward, none too small,
Access for users, one and all. 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references 'Palette' and 'keyboard accessibility,' which aligns with the changeset's focus on enhancing status bar keyboard and screen reader accessibility.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch palette-statusbar-accessibility-8305286650711987098

---

No actionable comments were generated in the recent review. 🎉

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

Pull request overview

Improves keyboard/screen-reader accessibility for the sticky dashboard status bar items in frontend/templates/index.html by making the interactive “status-bar-item” divs behave more like buttons.

Changes:

• Added role="button" and tabindex="0" to make status bar items focusable and semantically interactive.
• Added @keydown.enter and @keydown.space.prevent handlers to allow keyboard activation.
• Added aria-label attributes for additional context.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

aria-label overrides the element’s visible text for the accessible name. With role="button", this will cause screen readers to announce only “View System Health” and not the current health value shown inside (e.g., the overallHealth.shortExplanation text). Consider removing aria-label so the visible label/value form the name, or use aria-labelledby/aria-describedby (or a bound :aria-label) that includes the current status value.

Suggested change

	role="button" tabindex="0" aria-label="View System Health"
	role="button" tabindex="0"

[Copilot]

aria-label overrides the element’s visible text for the accessible name. With role="button", this will cause screen readers to announce only “View Compute Resources” and not the CPU/MEM values displayed inside. Consider removing aria-label so the visible label/value form the name, or use aria-labelledby/aria-describedby (or a bound :aria-label) that includes the current CPU/MEM values.

Suggested change

	role="button" tabindex="0" aria-label="View Compute Resources"
	role="button" tabindex="0"
	:aria-label="firewall.loading
	? 'View compute resources. Loading metrics.'
	: `View compute resources. CPU ${toFiniteNumber(firewall.cpu_percent, 0)} percent. Memory ${toFiniteNumber(firewall.mem_percent, 0)} percent.`"

[Copilot]

aria-label overrides the element’s visible text for the accessible name. With role="button", this will cause screen readers to announce only “View Data Ingestion” and not the ingestion indicators represented by the contents. Consider removing aria-label so the visible label forms the name, or use aria-describedby to provide a concise textual summary of the current ingestion states.

Suggested change

	role="button" tabindex="0" aria-label="View Data Ingestion"
	role="button" tabindex="0"