Skip to content

fix(locale): English fallback for unconfigured consumers (WCAG 4.1.2)#276

Open
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/locale-t-wcag-fallback-196
Open

fix(locale): English fallback for unconfigured consumers (WCAG 4.1.2)#276
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/locale-t-wcag-fallback-196

Conversation

@sridhar-3009
Copy link
Copy Markdown
Contributor

Problem

When useLocale() is called without a locale plugin (e.g. createLocalePlugin() not installed), createLocaleFallback returned the raw dot-notation key as the string — e.g. t('Dialog.close')'Dialog.close'. This violates WCAG 4.1.2 (Name, Role, Value): screen readers announce "Dialog.close" instead of a human-readable label.

Closes #196

Solution

Add an @vuetify/v0/locale/messages/en subpath export containing all English component strings. createLocaleFallback now looks up keys against that dictionary and returns the English translation, so t('Dialog.close')'Close' even with no locale plugin.

Also adds an onMissing hook to LocaleOptions, LocaleAdapterContext, and V0LocaleAdapter, giving configured consumers a way to supply custom fallbacks when a key is missing from their locale.

Changes

  • packages/0/src/locale/messages/en/index.ts — new: English strings for all component aria keys
  • packages/0/package.json — add ./locale/messages/en conditional export
  • packages/0/src/composables/useLocale/index.tscreateLocaleFallback uses lookupEn() + _interpolate(); add onMissing to LocaleOptions
  • packages/0/src/composables/useLocale/adapters/adapter.ts — add onMissing? to LocaleAdapterContext
  • packages/0/src/composables/useLocale/adapters/v0.ts — call onMissing before raw-key fallback
  • packages/0/src/composables/useLocale/index.test.ts — 9 new tests: onMissing hook, createLocaleFallback English defaults
  • Updated component tests (Avatar, Breadcrumbs, NumberField, Pagination) to expect English strings instead of raw keys

Test plan

  • pnpm test:run — 151 files, 6110 tests pass
  • pnpm typecheck — no errors
  • pnpm repo:knip — no unused exports
  • Without locale plugin: t('Dialog.close')'Close'; t('Pagination.status', { page: 2, pages: 10 })'Page 2 of 10'
  • With locale plugin: existing behavior unchanged; onMissing fires only for missing keys after fallback chain

Adds @vuetify/v0/locale/messages/en subpath export with English strings for
all component aria keys. createLocaleFallback now returns meaningful English
text instead of raw key strings, ensuring aria-labels are human-readable
even when no locale plugin is installed.

- Add packages/0/src/locale/messages/en/index.ts with all component strings
- Add ./locale/messages/en conditional export to package.json
- createLocaleFallback: t(key) now looks up English strings via lookupEn()
- Add onMissing hook to LocaleOptions / LocaleAdapterContext / V0LocaleAdapter
- Update component tests that expected raw key fallback to expect English strings
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 6, 2026

Open in StackBlitz

commit: 6a25e6d

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.

[Bug Report] locale.t() needs a key-level fallback — WCAG 4.1.2 gap

1 participant