fix(i18n): format carousel dates in the reader's language - #270
TheMeinerLP merged 2 commits into
Conversation
Sorry, something went wrong.
Red on six formatter calls pinned to de-DE across three carousel items. Refs: I18N-02, A11Y-05
Refs: I18N-02, A11Y-05
|
Rebased onto 7714164 and re-verified against it — the @nuxtjs/seo 5.3.9 bump that landed in between does not move the counts (319 / 36 / 21, 147 tests, build green). CI is green on the rebased head. One limit of the verification above, which the description overstates. The carousel content holds only image and blog slides in both locales: de: ['image', 'image', 'blog', 'blog', 'blog'] en: ['image', 'image', 'blog', 'blog', 'blog'] So the three before/after dates all came from CarouselItemBlog. CarouselItemNews and CarouselItemEvent received the same mechanical substitution but were never rendered — no slide of either type exists to exercise them. Checked what those paths will produce once they are, since Intl is the only thing deciding: de | 13 | Jun | 09:05 en | 13 | Jun | 09:05 AM Both correct for their locale. All four event call sites sit inside computeds that read locale.value, so they re-evaluate on a language switch, and each is already guarded by an isNaN check on the parsed date. |
Sorry, something went wrong.
Implements the remainder of I18N-02 / A11Y-05, test-first. #236 translated the carousel's ARIA labels; the dates stayed German.
Measured
/en, the same three slides, before and after:
/de is unchanged. Six toLocaleDateString/toLocaleTimeString calls across three item components were pinned to 'de-DE', so English visitors got German dates beside English headings — and event times in a German 24-hour clock.
Why not d()
The blog cards already use vue-i18n's d(), which is the right tool there. The carousel cannot: its event tile formats { day: '2-digit' } alone for the number and { month: 'short' } alone for the label beneath it, and d() cannot express that without named datetimeFormats entries — which would mean inventing a format vocabulary and is a larger, more opinionated change.
So the call stays and only the language stops being fixed: locale.value instead of 'de-DE'. One argument per call site.
The guard
Flags any toLocaleDateString/toLocaleTimeString call with a literal locale tag, across components, pages, layouts and composables. It asserts against the project's locale list rather than the string 'de-DE', so a third language cannot leave a new hardcoded tag behind unnoticed. The self-test pins that locale.value and vue-i18n's d() are both accepted.
Note on the diff
eslint --fix also removed a trailing-whitespace line in CarouselItemImage.vue — mechanical, unrelated, and the source of the -1 error.
Gates
Suite: 147 tests, 49 files. Build green. Ratchet down to 319 / 36 / 21.
Refs: I18N-02, A11Y-05
🤖 Generated with Claude Code
https://claude.ai/code/session_017uWFJwn6dswmNtR8kKB86s