fix(ui): add missing aria-labels and alt attributes for better accessibility

[NotxNoodles]

Description

Added missing aria-label attributes to icon-only buttons (theme toggle, transaction actions) and alt tags to decorative profile images. This improves accessibility (a11y) and screen-reader compatibility across the application.

Note: I am making this small contribution to familiarize myself with the Angular codebase and contribution workflow in preparation for my GSoC 2026 proposal for the MCP AI Assistant project!

Related issues and discussion

N/A - Spotted these missing attributes during a codebase review.

Screenshots, if any

N/A (These are underlying HTML attributes for screen readers, so there are no visual UI changes).

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.
• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

• Bug Fixes
  • Enhanced accessibility throughout the application with aria-labels on interactive elements like the theme toggle and transaction action buttons.
  • Improved image element accessibility with appropriate alt text and presentation attributes.
  • Added translation support for new accessibility labels across multiple components.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)

• skip-ai-review

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: afe19f9b-0fef-45cd-b04f-82975cc34281

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ 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

Walkthrough

The pull request adds accessibility attributes across multiple UI components. Aria-labels with theme-state binding and translation keys are introduced to the theme-toggle and transaction actions button. A group image element receives accessibility attributes, and three new translation entries support these enhancements.

Changes

Cohort / File(s)	Summary
Accessibility Attributes in Components src/app/groups/groups-view/groups-view.component.html, src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html, src/app/shared/theme-toggle/theme-toggle.component.html	Added aria-label bindings with dynamic translation text and alt/role attributes. Theme toggle button aria-label switches between dark and light mode labels based on state.
Translation Entries src/assets/translations/en-US.json	Added three new translation keys: "Transaction Actions", "Switch to Dark Mode", and "Switch to Light Mode" to support aria-label bindings in components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• IOhacker
• alberto-art3ch

🚥 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 directly summarizes the main change: adding aria-labels and alt attributes for accessibility improvements across multiple components.
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

---

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.}

[alberto-art3ch]

Please see my comment

[alberto-art3ch]

Please add the translation in the other languages

[IOhacker]

Pending Jira ticket and translation files

[github-actions]

This pull request seems to be stale. Are you still planning to work on it? We will automatically close it in 30 days.