Style the language switcher block in the header and mark each link with its language

Problem/Motivation

A multilingual The Rightup site needs a way to switch language. Core's language switcher block can be placed in the header as a Canvas component, but the theme gives it no styling: its links render at the default link colour, black on the black header, so the switcher is invisible while it stays focusable. The links also carry hreflang but no lang, so a screen reader reads each language's name in the page's language (WCAG 3.1.2, Language of Parts). Measured on a right-to-left page at 1440px: link colour rgb(0, 0, 0) on the header.

Steps to reproduce

1. Install The Rightup and a second language, and place core's Language switcher block in the header (Canvas page template, header group).
2. Look at the header: no visible links. Tab through it: focus lands on an invisible link.

Proposed resolution

• A Language Switcher component (not offered in the Canvas library, so editors place the block) rendered through links--language-block.html.twig.
• Header text colour, 16px at weight 500, 0.5rem apart, 24px minimum targets, a visible focus ring, and the current language underlined. Core's aria-current="page" is kept, so the current language is not shown by colour alone.
• A lang attribute equal to each link's hreflang, added in a preprocess.

Measured after the change on the home page, an article and an episode page, in LTR and RTL, at 1440 and 390 px: no overflow, header height unchanged, axe reports no violations.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ❌ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ➖ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

User interface changes

• A visible, accessible language switcher in the header of a multilingual site. A single-language site has no switcher block, so nothing changes.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• A visible, accessible language switcher in the header of a multilingual site. A single-language site has no switcher block, so nothing changes.

AI-Generated: Yes. Drafted and tested with Claude Code, reviewed by the contributor.