Add accessible labels to StatusBar inputs

[jbingham17]

Summary

• Added <label> elements with htmlFor to the filter input and refresh rate select
• Used sr-only class to keep labels visually hidden but accessible to screen readers

Test plan

• Verify filter input and refresh select still function correctly
• Confirm screen readers announce the labels for both form controls

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Enhanced accessibility with improved form labels for filter and refresh rate controls, ensuring better screen reader support and keyboard navigation.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added accessibility labels to form inputs in the StatusBar component by associating label elements with corresponding input and select controls using htmlFor and id attributes to improve semantic HTML structure.

Changes

Cohort / File(s)	Summary
Accessibility Enhancements src/components/StatusBar.tsx	Added htmlFor attributes to labels and corresponding id attributes to the process filter input and refresh rate select controls for improved accessibility and semantic HTML structure.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A rabbit hops with glee so bright,
Labels now guide with clarity and light,
Form controls bind with ids so true,
Accessibility blooms in all we do! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

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.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly summarizes the main change: adding accessible labels to StatusBar input controls, which matches the changeset perfectly.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

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

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/components/StatusBar.tsx (2)

34-48: ⚠️ Potential issue | 🟡 Minor

Inconsistency between visible and accessible label text.

The visible label (line 35) displays "Refresh:" while the accessible label (line 36) announces "Refresh rate" to screen readers. This creates an inconsistent user experience, mirroring the same issue in the filter section. The visible <span> is not semantically associated with the select element.

Apply the same solution as suggested for the filter section to maintain consistency across the component.

As per coding guidelines, React components should be reviewed for accessibility and proper semantic HTML structure.

♻️ Proposed refactor (Option 1 - Recommended)

 <div className="refresh-section">
-  <span className="refresh-label">Refresh:</span>
-  <label htmlFor="refresh-rate" className="sr-only">Refresh rate</label>
+  <label htmlFor="refresh-rate" className="refresh-label">Refresh rate:</label>
   <select
     id="refresh-rate"

🤖 Prompt for AI Agents

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

In `@src/components/StatusBar.tsx` around lines 34 - 48, The visible "Refresh:"
text and the screen-reader-only label "Refresh rate" are inconsistent and not
semantically tied to the select; update the markup so the visible label is the
actual <label> for the select (use htmlFor="refresh-rate") and make its text
match the accessible label (e.g., "Refresh rate"), remove the separate sr-only
label or the duplicate <span>, and keep the select id "refresh-rate" and class
"refresh-select" so the label is properly associated (apply the same change you
used in the filter section).

---

22-33: ⚠️ Potential issue | 🟡 Minor

Inconsistency between visible and accessible label text.

The visible label (line 23) displays "Filter:" while the accessible label (line 24) announces "Filter processes" to screen readers. This creates an inconsistent user experience. Additionally, the visible <span> on line 23 is not semantically associated with the input.

Consider one of these approaches for consistency:

• Option 1: Convert the visible span to a proper label and remove the sr-only label
• Option 2: Update the sr-only label text to match the visible text ("Filter")
• Option 3: Remove the visible span and use the accessible label without sr-only (make it visible)

As per coding guidelines, React components should be reviewed for accessibility and proper semantic HTML structure.

♻️ Proposed refactor (Option 1 - Recommended)

 <div className="filter-section">
-  <span className="filter-label">Filter:</span>
-  <label htmlFor="process-filter" className="sr-only">Filter processes</label>
+  <label htmlFor="process-filter" className="filter-label">Filter processes:</label>
   <input
     id="process-filter"

🤖 Prompt for AI Agents

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

In `@src/components/StatusBar.tsx` around lines 22 - 33, In StatusBar, the visible
span "Filter:" is not semantically associated with the input and its sr-only
label text differs; replace the span.filter-label with a proper <label
htmlFor="process-filter"> element (keeping id="process-filter" on the input) and
remove the duplicate sr-only label so the visible and accessible label text
match, ensuring the input's value and onChange (value={filter},
onChange={(e)=>onFilterChange(e.target.value)}) remain unchanged.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9a5fdb1 and 4f38775.

📒 Files selected for processing (1)

• src/components/StatusBar.tsx

🧰 Additional context used

📓 Path-based instructions (1)

src/components/**

⚙️ CodeRabbit configuration file

Review React components for accessibility, proper use of hooks, and consistent naming conventions.

Files:

• src/components/StatusBar.tsx

🤖 Prompt for all review comments with AI agents

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

Outside diff comments:
In `@src/components/StatusBar.tsx`:
- Around line 34-48: The visible "Refresh:" text and the screen-reader-only
label "Refresh rate" are inconsistent and not semantically tied to the select;
update the markup so the visible label is the actual <label> for the select (use
htmlFor="refresh-rate") and make its text match the accessible label (e.g.,
"Refresh rate"), remove the separate sr-only label or the duplicate <span>, and
keep the select id "refresh-rate" and class "refresh-select" so the label is
properly associated (apply the same change you used in the filter section).
- Around line 22-33: In StatusBar, the visible span "Filter:" is not
semantically associated with the input and its sr-only label text differs;
replace the span.filter-label with a proper <label htmlFor="process-filter">
element (keeping id="process-filter" on the input) and remove the duplicate
sr-only label so the visible and accessible label text match, ensuring the
input's value and onChange (value={filter},
onChange={(e)=>onFilterChange(e.target.value)}) remain unchanged.