Skip to content

fix(#10929): replace hardcoded English aria-labels with translation bindings on icon-only menu buttons#11061

Open
shivv23 wants to merge 17 commits into
medic:masterfrom
shivv23:fix/hardcoded-aria-labels-translations
Open

fix(#10929): replace hardcoded English aria-labels with translation bindings on icon-only menu buttons#11061
shivv23 wants to merge 17 commits into
medic:masterfrom
shivv23:fix/hardcoded-aria-labels-translations

Conversation

@shivv23
Copy link
Copy Markdown

@shivv23 shivv23 commented May 13, 2026

Summary

Replaces hardcoded English aria-label attributes on icon-only menu buttons with proper translation bindings, adding translations for all 10 supported languages.

Details

The accessibility bug

Four icon-only menu buttons had hardcoded aria-label values in English:

Component Hardcoded value
Tool bar "Application menu"
Contacts more-menu "Actions menu"
Messages more-menu "Actions menu"
Reports more-menu "Actions menu"

These buttons have no visible text — they rely entirely on aria-label for screen readers. Non-English users would hear English text, making the app partially inaccessible.

The fix

HTML templates (4 files): Replaced aria-label="..." with Angular's [attr.aria-label]="'...' | translate" so the label is fetched from translation files at runtime.

Translation files (11 files): Added actions.menu and application.menu keys to all 10 language files in api/resources/translations/:

Language actions.menu application.menu
en Actions menu Application menu
es Menú de acciones Menú de la aplicación
fr Menu des actions Menu de l'application
hi कार्य मेनू एप्लिकेशन मेनू
ne कार्य मेनु एप्लिकेसन मेनु
sw Menyu ya vitendo Menyu ya programu
ar قائمة الإجراءات قائمة التطبيق
bm Waleyasira la menu Application la menu
id Menu tindakan Menu aplikasi
pt Menu de ações Menu do aplicativo

Also added to config/default/translations/messages-en.properties for default config coverage.

Impact

Screen reader users will now hear labels in their device language. No visual changes.

Testing

Verify the translated labels render correctly:

# Build the webapp and check that aria-label attributes contain translated values
ng serve --configuration=production

Closes #10929

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Icon-only menu buttons have hardcoded English aria-label text

1 participant