A11y: hiányzó aria attribútumok a publikus interaktív elemeken

[Xentinus]

Jelenség

Az aria-label a repóban csak az admin appban szerepel (AdminSidebar.vue, WorldMap.vue); a publikus oldalon egy sem. Ahol ez konkrét hiányt okoz:

1. Nyelvválasztó (LangToggle.vue) — két gomb, "HU" és "EN" felirattal, a kiválasztott állapot csak CSS-osztályból látszik:

<button :class="{ active: lang === 'hu' }" @click="setLang('hu')">HU</button>
<button :class="{ active: lang === 'en' }" @click="setLang('en')">EN</button>

A képernyőolvasó tehát két azonos rangú gombot talál, és nem tudja megállapítani, melyik nyelv aktív. A "HU" felirat önmagában sem mondja meg, hogy nyelvválasztásról van szó.

2. Munka-szűrő (WorkSection.vue) — ugyanez: a szűrőgombok aktív állapota csak vizuális, és a gombcsoportnak nincs neve, tehát nem derül ki, mit szűrnek.

3. Link másolása (DetailNav.vue) — a gomb felirata a művelet után "Másolva"-ra vált, de ez aria-live nélkül nem hangzik el; a képernyőolvasós felhasználó nem tudja meg, hogy a másolás megtörtént.

Javaslat

1. LangToggle: role="group" + aria-label a konténerre (pl. „Nyelvválasztás"), és a gombokon aria-pressed (toggle-szemantika) vagy aria-current="true" az aktívra. A gombokon lang attribútum is illik (lang="hu" / lang="en"), hogy a felolvasás helyes legyen.
2. WorkSection szűrő: role="group" + aria-label a .filters konténerre, és aria-pressed a gombokon. A szűrés eredményét érdemes aria-live="polite" régióban jelezni (pl. „7 projekt").
3. DetailNav másolás-gomb: aria-live="polite" a visszajelzésre, vagy aria-label, ami a művelet nevét adja meg a látható felirattól függetlenül.
4. Az ui.ts i18n szótár kapja meg ezeket a szövegeket is — az aria-label látogatói szöveg, tehát két nyelven kell.
5. Átnézni a SiteNav-ot és a StatusPanel-t is ugyanezzel a szemmel (a nav elem megvan, de nevet nem kap; két nav esetén a névnek van jelentése).

Érintett fájlok

• portfoliocms.client/src/components/common/LangToggle.vue, DetailNav.vue, SiteNav.vue, StatusPanel.vue
• portfoliocms.client/src/components/home/WorkSection.vue
• portfoliocms.client/src/i18n/ui.ts