Use semantic header element with ARIA labels

[jbingham17]

Summary

• Replaced <div> with <header> element and added role="banner" for semantic markup
• Added aria-label to the load average display for screen reader clarity

Test plan

• Verify header renders correctly with the semantic element
• Confirm screen readers announce the load average values properly

🤖 Generated with Claude Code

Summary by CodeRabbit

• Refactor
  • Improved semantic structure of the header container using proper HTML elements for enhanced compatibility with accessibility technologies.
  • Enhanced load average display information for screen readers, improving visibility of system metrics to users relying on assistive devices.

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Expected boolean, received object at "inheritance"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to Reviews > Disable Cache setting

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 e4ab7a2 and aafef8c.

📒 Files selected for processing (1)

• src/components/Header.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*

⚙️ CodeRabbit configuration file

**/*: - Ignore minor or stylistic concerns. - Restrict feedback to errors, security risks, or functionality-breaking problems. - Do not post comments on code style, formatting, or non-critical
improvements.

• Keep reviews short: flag only issues that make the PR unsafe to merge. - Limit review comments to 3–5 items maximum, unless additional blockers
  exist.
• Group similar issues into a single comment instead of posting multiple
  notes.
• Skip repetition — if a pattern repeats, mention it once at a summary
  level only.
• Do not add general suggestions, focus strictly on merge-blocking
  concerns.
• If there are no critical problems, respond with minimal approval
  (e.g., 'Looks good'). Do not add additional review.
• Avoid line-by-line commentary unless it highlights a critical bug or security hole. - Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues. - Ignore minor optimization opportunities — focus solely on correctness and safety. - Provide a top-level summary of critical blockers rather than detailed per-line notes. - Comment only when the issue must be resolved before merge — otherwise remain silent. - When in doubt, err on the side of fewer comments — brevity and
  blocking issues only.
• Avoid posting any refactoring issues

Files:

• src/components/Header.tsx

---

Walkthrough

The Header component was updated with semantic HTML improvements and enhanced accessibility. The root container changed from a div to a header element with role="banner". An aria-label was added to the Load average display to expose numeric load values to assistive technologies without modifying the visible text. The component continues to render uptime, session elapsed time, hostname, platform/arch, and task count with no changes to data sources or formatting. No exported or public entity signatures were modified.

---

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