fix(ui): add missing aria-labels and alt attributes for better accessibility by NotxNoodles · Pull Request #3318 · openMF/web-app

NotxNoodles · 2026-03-05T20:12:11Z

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.

…ibility

coderabbitai · 2026-03-05T20:12:33Z

Warning

Rate limit exceeded

@NotxNoodles has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 27 minutes and 39 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f52e0772-0763-4ce4-abed-d3d54737d2e2

📥 Commits

Reviewing files that changed from the base of the PR and between cebf558 and 6edac30.

📒 Files selected for processing (12)

src/assets/translations/cs-CS.json
src/assets/translations/de-DE.json
src/assets/translations/es-CL.json
src/assets/translations/es-MX.json
src/assets/translations/fr-FR.json
src/assets/translations/it-IT.json
src/assets/translations/ko-KO.json
src/assets/translations/lt-LT.json
src/assets/translations/lv-LV.json
src/assets/translations/ne-NE.json
src/assets/translations/pt-PT.json
src/assets/translations/sw-SW.json

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

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

alberto-art3ch

Please see my comment

alberto-art3ch · 2026-03-05T20:49:12Z

src/assets/translations/en-US.json

      "Town / Village": "Town / Village",
      "Trail ID": "Trail ID",
      "Transaction": "Transaction",
+      "Transaction Actions": "Transaction Actions",


Please add the translation in the other languages

IOhacker

Pending Jira ticket and translation files

Added the 3 new translation keys introduced for accessibility improvements (Transaction Actions aria-label, Switch to Dark Mode, Switch to Light Mode) to all 12 non-English language files. English text is used as a fallback until native translations are contributed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replace English fallback values with proper localized translations for the 3 accessibility keys (Transaction Actions, Switch to Dark Mode, Switch to Light Mode) across all 12 non-English language files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

cebf558

…ibility

alberto-art3ch requested changes Mar 5, 2026

View reviewed changes

IOhacker requested changes Mar 5, 2026

View reviewed changes

NotxNoodles and others added 2 commits March 20, 2026 23:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix(ui): add missing aria-labels and alt attributes for better accessibility#3318
NotxNoodles wants to merge 3 commits intoopenMF:devfrom
NotxNoodles:fix/accessibility-labels

NotxNoodles commented Mar 5, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 5, 2026 •

edited

Loading

Rate limit exceeded

`.coderabbit.yaml` has unrecognized properties

Uh oh!

alberto-art3ch left a comment

Uh oh!

alberto-art3ch Mar 5, 2026

Uh oh!

IOhacker left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

NotxNoodles commented Mar 5, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues and discussion

Screenshots, if any

Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

.coderabbit.yaml has unrecognized properties

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

alberto-art3ch left a comment

Choose a reason for hiding this comment

Uh oh!

alberto-art3ch Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

IOhacker left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NotxNoodles commented Mar 5, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 5, 2026 •

edited

Loading

`.coderabbit.yaml` has unrecognized properties