RenewCMS/features/language_switcher_conformance.qa.md

Language switcher conformance QA

Accepted by the user on 2026-10-04 together with the slice specification. Decisions folded in: spa_internationalization picker scenarios are amended; theme and language rows are menuitemradio and the account menu and sheet stay open after a choice; the auth popover is specified from docs/design/components.md because the boards draw only the chip.

Automated (Vitest + Vue Test Utils, task test:web)

Mock /v1 per case and assert that a language change makes no /v1 request. Reset the stored renewcms-language between tests. Do not freeze the system date.

1. UserMenu (desktop) and AccountMenuSheet (mobile): open the menu and assert the entry order Profile, separator, "Theme" label, System/Light/Dark, separator, "Language" label, English/Français, separator, Log out. Assert the label classes. LanguagePicker and any combobox must be absent.
2. Roles and ARIA: theme rows and language rows are menuitemradio with aria-checked on the current one and a check icon. Language rows carry lang "en"/"fr" and native names. With locale fr the names stay "English"/"Français" while "Theme"/"Language" become "Thème"/"Langue".
3. Account menu selection: choosing Français in each surface switches the visible copy, sets document lang and storage, keeps the menu open, and leaves route, theme and an unsaved display-name draft on /profile unchanged. Choosing English restores it. Choosing a theme keeps the mobile sheet open.
4. Account menu keyboard: arrow order and wrap across all entries, Enter/Space applies and keeps open, Escape and outside click close with no language change.
5. AuthShell: the footer is rendered with the language chip next to UColorModeSelect when belowSm is true and false, with no footer slot content, and slot content stays to the left. Assert aria-haspopup, aria-expanded, aria-label "Language: English" / "Langue : Français", the icon, the native name and the absence of a select.
6. Auth popover: opens via click, Enter, Space and ArrowDown; role menu named "Language", two menuitemradio rows with lang and checked state; selection applies the language, closes it and returns focus to the chip; Escape and outside click dismiss with no change. Typed form values on /login survive the switch.
7. Each auth screen (login, register, pending, verify, forgot-password, reset-password, accept-invite) mounts with the chip present.
8. Persistence: stored fr gives chip "Français"; the choice survives log out and re-render of /login; a localStorage write failure still switches for the session.
9. Catalog parity: en/fr keys include "Theme" and "Language: {0}" with matching parameters.
10. Update web/src/i18n/spa.spec.ts, web/src/i18n/i18n.spec.ts and any AuthShell, UserMenu or AccountMenuSheet spec asserting menuitemcheckbox or the old picker. Remove LanguagePicker and its tests if the component is removed.
11. Run task test:web and the type check; inspect the diff for introduced comments.

Visual (task visual:check -- <screen>, hard gate at 10 %)

Desktop and mobile, light and dark, reusing the boards' sample data.

• profile, state "Account menu": board deskMenu and mobMenu with the Theme and Language labels, Light and English checked.
• Every auth screen and state (log-in, register, pending, verify, forgot-password, reset-password, accept-invite): all captures change because of the language chip (hasFooter: true), including mobile where the footer is new. Clock-sensitive states stay skip: 'clock-sensitive'.
• The boards draw no open auth language popover, so it has no visual gate. It is covered by the automated and manual checks.

Manual (screenshots cannot cover)

• Keyboard focus order and visible focus ring in the account menu, the chip and the popover; focus return to the chip.
• Hover, press and motion on the rows and the chip.
• Popover placement above the chip and containment at 390 px width, including the 36 px offset next to the 44 px mobile chip. Touch targets at 44 px on mobile.
• French readability of "Thème", "Langue" and "Langue : Français" in the labels, chip and popover.
• Language retained after reload and logout.