greggy/landingpage-haus-schleusingen
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(flags): replace hand-coded inline SVGs with official flag-icons assets

Browse Source 
The previous inline flag SVGs were visually broken — most notably the
'en' Union Jack, which was reduced to a single X plus a cross and did
not resemble the real flag at all. The 'de' and 'ru' stripes also had
slight off-by-pixel rounding errors.

Switched to lipis/flag-icons (CC-BY 4.0) shipped as static files under
public/img/flags/. These are the canonical, professionally-designed
flag icons with correct proportions and all the details of the real
flags. Loaded via plain <img> tags (no JS, no external CDN at
runtime, no FOUC, no extra request after the page is cached).

Locale code mapping: en -> gb (per ADR-002, en = en-GB). Unknown
locales fall back to a 1x1 transparent gif so the layout stays
intact.
This commit is contained in:
Hermes
2026-06-04 19:43:23 +00:00
parent 70691ff242
commit 391985cd42
7 changed files with 82 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
tests/Controllers/LocaleSwitcherTest.php
View File

@@ -97,34 +97,35 @@ final class LocaleSwitcherTest extends TestCase
public static function flagDataProvider(): array
{
return [
'DE Germany' => ['de', '#FFCC00'],
'EN UnionJack' => ['en', '#C8102E'],
'UK Ukraine' => ['uk', '#FFD500'],
'RU Russia' => ['ru', '#D52B1E'],
'DE Germany' => ['de', 'de.svg'],
'EN en-GB' => ['en', 'gb.svg'],
'UK Ukraine' => ['uk', 'ua.svg'],
'RU Russia' => ['ru', 'ru.svg'],
];
}
#[Test]
public function flagSvgReturnsValidSvgForEverySupportedLocale(): void
public function flagImgReturnsValidImgForEverySupportedLocale(): void
{
foreach (Locale::SUPPORTED as $code) {
$svg = LocaleSwitcher::flagSvg($code);
self::assertStringStartsWith('<svg', $svg);
self::assertStringContainsString('viewBox="0 0 24 16"', $svg);
self::assertStringContainsString('aria-hidden="true"', $svg);
self::assertStringContainsString('focusable="false"', $svg);
self::assertStringContainsString('class="flag"', $svg);
self::assertStringEndsWith('</svg>', $svg);
$img = LocaleSwitcher::flagImg($code);
self::assertStringStartsWith('<img', $img);
self::assertStringContainsString('class="flag"', $img);
self::assertStringContainsString('width="24" height="18"', $img);
self::assertStringContainsString('alt=""', $img);
self::assertStringEndsWith('>', $img);
}
}
#[Test]
public function flagSvgHasFallbackForUnknownLocale(): void
public function flagImgHasFallbackForUnknownLocale(): void
{
$svg = LocaleSwitcher::flagSvg('xx');
self::assertStringStartsWith('<svg', $svg);
self::assertStringContainsString('class="flag"', $svg);
self::assertStringEndsWith('</svg>', $svg);
$img = LocaleSwitcher::flagImg('xx');
self::assertStringStartsWith('<img', $img);
self::assertStringContainsString('class="flag"', $img);
// 1×1 transparent gif keeps the layout stable even when the
// locale code is not one of our four.
self::assertStringContainsString('data:image/gif', $img);
}
#[Test]
@@ -142,11 +143,11 @@ final class LocaleSwitcherTest extends TestCase
{
// The closed dropdown shows the current locale's flag in the trigger
$html = (new LocaleSwitcher('de', '/'))->render();
// The first <svg class="flag"> in the document is the trigger
self::assertStringContainsString('<svg class="flag" viewBox="0 0 24 16"', $html);
// The first flag SVG must contain the German colours
$deFlag = LocaleSwitcher::flagSvg('de');
// The first <img class="flag"> in the document is the trigger and it
// must point at the German flag asset under /img/flags/.
$deFlag = LocaleSwitcher::flagImg('de');
$pos = strpos($html, $deFlag);
self::assertNotFalse($pos, 'expected German flag SVG in the trigger (first <svg> in document)');
self::assertNotFalse($pos, 'expected German flag <img> in the trigger (first <img class="flag"> in document)');
self::assertStringContainsString('src="/img/flags/de.svg"', $deFlag);
}
}