fix: #3628118 Style the language switcher block in the header and mark each link with its language

Rajab Natshahrequested to merge
issue/vartheme_bs5_rightup-3628118:3628118-style-the-language into 1.0.x

Issue: https://www.drupal.org/project/vartheme_bs5_rightup/issues/3628118

Adds a Language Switcher component (hidden from the Canvas library, so editors place core's block), rendered through templates/navigation/links--language-block.html.twig, with a .theme preprocess that sets lang equal to each link's hreflang, and a webpack components entry.

Header text colour, 16px at weight 500, 0.5rem between links, 24px targets, a visible focus ring, and the current language underlined; core's aria-current="page" is kept.

Before: link colour rgb(0, 0, 0) on the black header at 1440 on /ar, so the switcher was invisible. After: white. Checked on the home page, an article and an episode page, English and Arabic, at 1440 and 390 px: no overflow, header height unchanged, axe reports no violations, each link carries lang="en" or lang="ar".

Not verified: tablet widths, Firefox and Safari, a screen reader. The shared links.html.twig never prints its nav-link class on linked items, so the component styles the links itself for this block only.

Follow-up check with the four theme merge requests (#3628116, #3628117, #3628118, #3628120) merged on one site: a crawl of 152 paths in two languages at 1440 and 390 px (608 page loads) found no WCAG 2.2 AA violation other than target-size on the English Gin login page (also present before these changes), no horizontal overflow and no broken image; the Editoria11y panel, read as an administrator on 24 pages in both languages, flagged only the audio player's manual transcript check. The merge request pipeline finished green.

AI-Generated: Yes

Checkpoints:

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

🤖 Generated with Claude Code

Edited by Rajab Natshah

Merge request reports