Podrobný seznam změn

Tato stránka nese detailní popis změn — co se přesně změnilo, jak se komponenta chová po úpravě, proč k opravě došlo a co je potřeba udělat při aktualizaci. Stručný přehled na jeden pohled najdete na stránce Seznam změn.

v4.7.1 ​

Balíčky @gov-design-system-ce/components, styles, icons, templates, react, angular a vue jsou posunuty ze 4.7.0 na 4.7.1; fonts a utils jsou posunuty jen verzí, bez změny obsahu. Změny React balíčku jsou popsány v samostatné části na konci.

Breaking changes a migrace ​

• Wizard (gov-wizard-item) – odstraněn prop disabled: Prop byl od začátku implementovaný jen napůl. Ve stylech (gov-wizard-item.scss) pro něj neexistovalo jediné pravidlo, takže zakázaná položka vypadala úplně stejně jako aktivní, a v šabloně se předával jen uvnitř větve pro sbalitelnou položku – u nesbalitelné položky (<div>) neměl žádný efekt. Jediné, co skutečně dělal, bylo nativní disabled na spouštěcím <button>, které položku vyřadilo z pořadí tabulátoru a znemožnilo její rozbalení; klávesnicí se na krok nedalo dostat a čtečka ho v režimu čtení ohlásila jen jako „nedostupný“ bez jakéhokoli vysvětlení. Stav navíc nemá podobu v designu (v návrhu komponenty žádný zakázaný stav není) a ani sourozenecká komponenta gov-stepper ho nezná. Místo dodělávání vizuálu, který nikdo nenavrhl, je prop odstraněn: průvodce je seznam kroků (role="list" / role="listitem"), ne sada ovládacích prvků, a „krok, který ještě není na řadě“ už vyjadřuje pořadové číslo ve slotu prefix spolu s barvou (color). Dopad: <gov-wizard-item collapsible disabled> se nově vykreslí bez atributů disabled a aria-disabled – krok, který dosud rozbalit nešel, se rozbalit dá. Pokud obsah kroku zobrazovat nechcete, položku neoznačujte jako collapsible; tím zůstane statická a její obsah zůstane skrytý (pokud nenastavíte is-expanded). Žádná jiná změna chování ani vzhledu wizardu. Wrappery: proxy komponenty pro Angular a Vue se generují ze Stencilu, takže vstup disabled ztrácejí. V Angularu vazbu [disabled] na gov-wizard-item odstraňte (bez CUSTOM_ELEMENTS_SCHEMA může šablona s neznámou vlastností skončit chybou kompilace), ve Vue se hodnota nově ignoruje. React GovWizardItem prop disabled také ztrácí (z typu GovWizardItemProps i z vykresleného <button>), takže zápis <GovWizardItem disabled> v TypeScriptu nově hlásí chybu.
• Informační lišta (gov-infobar) – odstraněna hodnota secondary propu color: Výčet InfobarColors (gov-infobar/constants.ts) obsahoval i secondary, takže ji kontrakt propu color, validace i generovaná tabulka propů uváděly jako platnou, ačkoli pro ni neexistovalo žádné pravidlo ve stylech: gov-infobar.scss generuje barevné varianty jen z barev toastu, mezi kterými secondary není, a lišta se vykreslila jako bílý pruh. Hodnota je z výčtu odstraněna a typ propu se zužuje na primary | neutral | error | success | warning. Dopad: vykreslení se nemění, stylovaná varianta secondary nikdy neexistovala. Zápis color="secondary" nově zaloguje varování o neplatné hodnotě. Pro TypeScript jde o zúžení typu, takže color="secondary" v React GovInfobar (typ propu se přebírá z JSX.GovInfobar), ve Stencil JSX nebo v typově kontrolované šabloně Angularu skončí chybou kompilace. Hodnotu nahraďte jednou z podporovaných. Wrappery vlastní změnu nemají, typ se zužuje přes závislost na @gov-design-system-ce/components.
• Skeleton (gov-skeleton, React GovSkeleton) – bez přístupného názvu je nově dekorativní: Komponenta dosud napevno nastavovala každé instanci role="progressbar", tabindex="0" a aria-busy / aria-valuemin / aria-valuemax, ale přístupný název nedodávala, takže každý skeleton byl nepojmenovaný progressbar a samostatná zastávka v pořadí tabulátoru. Nově dostane role="progressbar", aria-busy="true", aria-valuemin="0", aria-valuemax="100" a tabindex="0" jen skeleton s neprázdným aria-label nebo aria-labelledby; bez názvu se vykreslí s aria-hidden="true" a bez těchto atributů. Stejně se nově chová i React GovSkeleton, který je samostatnou implementací. Samotná změna přístupnosti nemění propy ani vzhled (opravy stylů skeletonu jsou v části Opravy, předávání onClick v Reactu v části React wrapper). Dopad: pojmenujte jeden skeleton v každé načítané oblasti (např. aria-label="Načítání výsledků vyhledávání") a ostatní nechte bez názvu. Testy, které hledají skeleton podle role (getByRole('progressbar')), a pořadí fokusu, které skeletony zahrnovalo, je potřeba upravit. Vnitřní načítací řádek gov-form-autocomplete (a tím i gov-form-multi-select) je nově skrytý před asistivními technologiemi. Angular a Vue změnu přebírají za běhu přes závislost na @gov-design-system-ce/components.
• Barvy – modrá paleta primary sladěna s brandbookem JVS (viditelná změna): Primitiva primary odpovídají webové paletě JVS. Oproti publikované 4.7.0 se mění hodnoty kroků 700 až 1050, kroky 50 až 600 zůstávají (primary-600 = JVS Modrá #00469B). Část sémantických tokenů a tokenů šablon se zároveň posunula o krok níž. Názvy tokenů se nemění, žádný token nepřibyl ani neubyl. Dopad: ve světlém režimu mají odkazy a texty v primární barvě (--text-primary-color) JVS Modrou #00469B a hover/active primárních tlačítek jsou tmavší; v tmavém režimu se mění pozadí primárních ploch, obrysová primární tlačítka a pozadí stránky; v šablonách patička a navigace. Kdo používá --color-primary-700 až --color-primary-1050 přímo, dostane nové hodnoty. Stránka Barvy v dokumentaci nově uvádí JVS Tmavě modrou u kroku Primary 900 (dříve 1000). Po aktualizaci si překontrolujte dotčené obrazovky. Přehled změn oproti 4.7.0:
  • --color-primary-700: #003E8A → #0E3578
  • --color-primary-800: #06397E → #102657
  • --color-primary-900: #0C3372 → #0C1838 (JVS Tmavě modrá)
  • --color-primary-950: #0A2450 → #091129
  • --color-primary-1000: #0C1838 → #060B1B
  • --color-primary-1050: #03070F → #04060E
  • světlý režim: --text-primary-color primary-700 → primary-600 (#003E8A → #00469B); --interactive-timer-primary-solid primary-800 → primary-700 (#06397E → #0E3578); se stejným krokem, ale novou hodnotou --button-solid-primary-hover (primary-700, #003E8A → #0E3578) a --button-solid-primary-active (primary-800, #06397E → #102657)
  • tmavý režim: --background-primary-subtle primary-950 → primary-900 (#0A2450 → #0C1838); --background-primary-subtlest primary-900 → primary-800 (#0C3372 → #102657); --button-outlined-primary primary-800 → primary-700 (#06397E → #0E3578); --button-outlined-primary-active primary-900 → primary-800 (#0C3372 → #102657); --button-outlined-primary-hover primary-950 → primary-900 (#0A2450 → #0C1838); --interactive-timer-primary-solid a --interactive-timer-primary-subtle primary-800 → primary-700 (#06397E → #0E3578); se stejným krokem, ale novou hodnotou --background-page (primary-1050, #03070F → #04060E) a --button-solid-primary-active (primary-700, #003E8A → #0E3578)
  • šablony (templates.css v balíčku styles a tokeny v balíčku templates): světlý --component-nav-text-link primary-900 → primary-800 (#0C3372 → #102657), --component-nav-text-primary primary-800 → primary-700 (#06397E → #0E3578), --component-footer-background primary-900 → primary-800 (#0C3372 → #102657) a --component-footer-separator primary-600 → primary-500 (#00469B → #3771B8); tmavý --component-footer-background primary-950 → primary-900 (#0A2450 → #0C1838) a --component-footer-separator primary-600 → primary-500
  • Banner (gov-banner mimo velikost xl): koncová barva přechodu v pozadí (primary-900) #0C3372 → #0C1838
• Hlavička (šablona) – desktopové rozložení až od lg (1024 px), viditelná změna mezi 768 a 1023 px: Hlavička v templates.css si nově drží mobilní rozložení s hamburgerem až do šířky 1023 px; řádková navigace první úrovně, lišta akcí (__action), oddělovač a desktopové vyhledávání nastupují až od 1024 px. V 4.7.0 se přepínalo na breakpointu md (768 px). Při šířce tabletu se řádek navigace spolehlivě nevešel: položky první úrovně, vyhledávací pole a lišta akcí soupeřily o jeden řádek a přebytek padal do generované položky „Další“. Přepnutí mq($from/$until: md) → lg se týká gov-header.scss (včetně varianty --small), gov-header-navigation.scss, gov-header-search.scss a gov-header-suggestions.scss. Globální pomocné třídy .gov-mobile-only / .gov-desktop-only zůstávají na md; hlavička je pro pásmo md–lg přepisuje lokálně, aby ovládání jazyka a motivu mezi 768 a 1023 px nezmizelo. Logo má výšku 56 px a 64 px dosáhne až od 1024 px (v 4.7.0 od 768 px); pravidlo 56 / 64 px podle manuálu JVS se nemění, posouvá se jen breakpoint. Stejná změna platí pro vlastní styly balíčku @gov-design-system-ce/templates i pro jeho skript hlavní navigace (dist/scripts/main-navigation.js, TABLET_SIZE 768 → 1024), takže chování menu v JS odpovídá novému breakpointu v CSS. Dopad: kdo používá markup hlavičky se styly šablon, uvidí mezi 768 a 1023 px hamburger místo řádkové navigace a logo 56 px místo 64 px. Komponenty ani API se nemění.

Změny ​

• Banner (gov-banner) – volitelná dekorativní ikona přes nový prop icon: Dosud se u foreground="icon" vykreslovala jediná, napevno zapsaná grafika (base64 SVG v $shared-foregrounds v gov-banner-variables.scss) a nešla ničím nahradit. Nový prop icon přijímá ikonu jako řetězec typ/název (stejně jako prop icon u gov-chip nebo gov-tag, např. complex/portal) a vykreslí ji přes gov-icon v dekorativní vrstvě .gov-banner__icon (aria-hidden="true") místo původní grafiky; host přitom dostane třídu gov-banner--has-icon. Prop je volitelný a beze změny chování, pokud jej neuvedete – bannery bez icon se vykreslí přesně jako dosud. Neplatná hodnota (jiný tvar než typ/název) se ignoruje a použije se výchozí grafika; název smí obsahovat jen malá písmena a pomlčky, takže ikony s číslicí v názvu (např. globe2, folder2-open, link-45deg) se zatím použít nedají. Prop se uplatní jen pro foreground="icon" u velikostí s/m/l; u foreground="image" a u velikosti xl nemá vliv. Stejně jako dosavadní dekorace se ikona zobrazuje až od breakpointu lg. Velikost ikony vychází z velikosti banneru a je přepsatelná CSS proměnnou --icon-size. React implementace (GovBanner) přijímá prop icon jako ReactNode (např. <GovIcon/>); protože React GovBanner nemá výchozí foreground, je nutné uvést foreground="icon" explicitně.
• Ikony – 34 nových ikon v sadě components: award, buildings, calendar-event, car-front, card-checklist, cash-coin, cash-stack, chat-dots, chat-text, clock, envelope-plus, file-earmark-text-fill, flag, folder2-open, funnel, geo-alt, globe2, heart-pulse, house, houses, link-45deg, map, mortarboard, pencil, person, send, share, shield, sliders, sort-down, star, three-dots-vertical, trash a tree. Sada components roste z 57 na 91 ikon, sady colored a complex se nemění. Zdrojem je Bootstrap Icons (MIT); ikony jsou převedeny do konvence sady (fill="none" / path[fill="currentColor"]). Šablony ve Storybooku i ve Fractalu na tyto ikony dosud odkazovaly přes nikdy nepublikovanou sadu templates; nově používají type="components", takže se ikony vykreslují z publikované sady. Seznam componentsIcons pro galerii ikon ve Storybooku (gov-icon/list.js) je doplněn o stejné položky; komponenta gov-icon se nemění.
• Pravidla – Jak na tvorbu formuláře: povinná pole se označují hvězdičkou: Stránka dosud uváděla, že se povinná pole hvězdičkou neoznačují, což neodpovídalo chování komponent. Pravidlo je nahrazeno dvěma: povinná pole se označují hvězdičkou, kterou vykreslí komponenta sama, když poli nastavíte atribut required (do textu popisku ji nepište ručně), a formulář s povinnými poli má nad prvním polem vysvětlivku, například Pole označená hvězdičkou (*) jsou povinná. Ukázky kódu ve Storybooku zároveň vypisují boolean atributy bez hodnoty (required místo required="true").
• Dokumentace pro vývojáře – templates.css není pro markup šablon volitelný: Oddíl Styly na stránce Pro vývojáře je rozdělen na tři části. Základ pro web-komponenty uvádí pět souborů (tokens.css, styles.css, layout.css, components.css, animations.css), které web-komponentám stačí. Kdy potřebujete další soubory vysvětluje, že markup organismů a šablon a třídy .gov-block, .gov-text-content a .gov-mb--* vyžadují templates.css (bez něj se vykreslí zcela bez stylů), content.css slouží pro redakční HTML v .gov-content a print.css je volitelný. Import po jednotlivých komponentách popisuje granulární exporty ./components/gov-*.css a ./templates/gov-*.css. Dosud stránka označovala content.css, templates.css i print.css souhrnně jako volitelné. Návod Použití v čistém HTML v kroku 2 nově jmenuje pět základních souborů i požadavek na templates.css.
• Fractal označen jako deprecated: Fractal (web šablon) už není udržovaný a zdrojem pravdy pro šablony je Storybook. Odkazová tlačítka v dokumentaci se jmenují „Fractal (deprecated)“ (na stránce hlavičky a navigace „Fractal Navigation (deprecated)“ a „Fractal Header (deprecated)“) a nesou vysvětlující title; úvodní stránky Organismů a Šablon začínají varováním. Fractal sám zobrazuje nad obsahem banner s odkazy na Storybook a na dokumentaci, v titulku má „(deprecated)“ a jeho úvodní stránka začíná upozorněním. Publikovaný balíček @gov-design-system-ce/templates se tím nemění.

Opravy ​

• Našeptávač (gov-form-autocomplete) – seznam návrhů zobrazoval jen první položku: Při asynchronním vyhledávání přes setSearchCallback, kdy komponenta vykresluje načítací řádek, se v seznamu objevila pouze první nalezená položka. Položky seznamu neměly klíč (key), takže Stencil znovu použil načítací <li> jako první výsledek; položka výsledku zároveň nastavovala innerHTML a obsahovala sloty list-item-left / list-item-right, innerHTML přepsal sledované uzly slotů a vykreslování se po první položce přerušilo. Položky mají nově stabilní klíče (message-empty, loading, item-${index}) a oba sloty jsou odstraněny. Nikdy nic nezobrazily, protože jejich obsah přepsal právě innerHTML, takže jejich odebrání nemá funkční dopad; ze starších poznámek k migraci v Seznamu změn byla odstraněna zmínka o jejich přidání. Oprava se týká i gov-form-multi-select, který vnitřně používá gov-form-autocomplete se stejným asynchronním vyhledáváním.
• Control group (gov-control-group) – no-border, no-inner-border a fit-content nefungovaly přes JS property: Styly se řídí atributy hostitele, ale tyto tři propy se na atributy nepropisovaly, takže při nastavení jako property (Angular [noBorder], Vue :no-border, el.noBorder = true) se tiše ignorovaly. Propy se nově reflektují na atributy (reflect: true), stejně jako color, který fungoval už dříve přes explicitní propis v render() a nově se jen reflektuje. Opraveny jsou i popisy propů: no-border odstraní vnější rámeček celé skupiny, no-inner-border skryje dělicí čáry mezi prvky a vnější rámeček ponechá a fit-content zúží skupinu na šířku obsahu (dosud chybně popsáno jako plná šířka). Vedlejší efekt: hodnoty nastavené přes property jsou nově vidět jako atributy hostitele. React GovControlGroup je samostatná implementace a změna se ho netýká.
• Skeleton (gov-skeleton) – kruh jako elipsa a zamrzlý přechod: (1) shape není reflektovaný prop, takže při nastavení přes JS property (Vue :shape, Angular [shape], React, el.shape = "circle") na hostiteli nevznikl atribut shape="circle" a pravidlo velikosti [size=…]:not([shape="circle"]) přepsalo výšku; kruh se vykreslil jako elipsa. Pravidlo nově vylučuje i třídu .circle, kterou nastavuje komponenta i React implementace. (2) Při prefers-reduced-motion se u skeletonu s animací progress (výchozí) neodstranil přechodový gradient: pravidlo barev ([color=…].progress) mělo vyšší specifičnost a komponenta i React GovSkeleton atribut color vždy nastavují (výchozí neutral), takže se to týkalo prakticky všech skeletonů a na obrazovce zůstal zamrzlý pruh. Reset je nově až za barevnými pravidly a pokrývá i [color].pulse / [color].progress, takže se zobrazí plochá barva placeholderu. Změna je v globálním CSS komponent i v components.css balíčku styles a v jeho kopii v balíčku templates.
• Layout (gov-layout-column) – nezalomitelný obsah vytlačil boční sloupec: Sloupec měl výchozí flexovou min-width: auto, takže se nemohl zúžit pod šířku nejširšího nezalomitelného obsahu (buňka tabulky s nowrap, dlouhý identifikátor) a boční sloupec (aside) se posunul mimo kontejner. Sloupec má nově min-width: 0 a přetečení zůstává uvnitř sloupce s obsahem. Platí pro web-komponentu i třídu .gov-layout-column, kterou vykresluje React, v globálním CSS komponent i v components.css.
• Tlačítko (gov-button) – atributy aria-* zapsané během načítání nebo po přesunu v DOM: Komponenta přenáší atributy aria-* z hostitele na vnitřní <button> jednou v componentWillLoad a další změny sleduje AttributeObserver, který startoval až v componentDidLoad a po odpojení z DOM se znovu nespustil. Atribut zapsaný mezi těmito okamžiky nebo po přesunu tlačítka v DOM tak zůstal jen na hostiteli (v hlavičce se kvůli tomu rozcházelo aria-expanded u položek přesunutých do menu „Další“). Atributy se nově převezmou i po startu observeru v componentDidLoad a v connectedCallback, který observer po přesunu znovu spustí. Týká se web-komponenty, Angularu a Vue; React GovButton je samostatná implementace.
• Hlavička (šablona) – rozbalovací panely a vnořená menu: Tři rozbalovací panely navigace (.gov-subnavigation, .gov-mega-menu a menu „Další“ .gov-deferred-navigation) sdílejí nový mixin a mají od lg jednotný vzhled (absolutní pozice pod řádkem navigace, min. šířka 280 px, pozadí --background-block-primary). Megamenu se už neroztahuje na 100vw s pevným odsazením shora, ale drží se vodorovných okrajů hlavičky. Zarovnání poslední rozbalovací nabídky vpravo pokrývá i :last-child a třída .gov-navigation__last-visible-item platí pro podnabídku i pro menu „Další“, takže panely nepřetékají přes pravý okraj stránky. Podnabídky položek přesunutých do menu „Další“ se v něm vykreslují přímo místo display: none a skript hlavní navigace (main-navigation.js v balíčku templates) nově registruje spouštěče i na vnořených úrovních, takže vnořená menu jdou otevřít. Řádek navigace má vodorovný okraj --templates-margin-l jako zbytek hlavičky (ve variantě --small nulový).
• Patička (šablona) – ikony sociálních tlačítek v Reactu: Pravidlo .gov-footer a, .gov-footer a span { color: var(--component-footer-text-link) !important } v templates.css přebarvovalo i ikonu uvnitř tlačítka, kterou React wrapper vykresluje jako <span class="gov-icon">. Ikony sociálních sítí pak měly barvu odkazů patičky (#CEE3F4) na bílém tlačítku a byly téměř neviditelné. Selektor je zúžen na a span:not(.gov-icon); markup s <gov-icon> se vykresluje beze změny. Týká se templates.css v balíčku styles i jeho kopie v balíčku templates; vlastní styly Fractalu se nemění.
• Karty – carousel (šablona) – chybějící okrajové přechody: Styly .gov-carousel__left-shadow / .gov-carousel__right-shadow existovaly jen ve Fractalu a do templates.css se nepřenesly. Nově jsou jeho součástí: přechod z --background-page do průhledna přes okraj carouselu (šířka 5.625rem, od sm 11.875rem), který funguje ve světlém i tmavém režimu a neblokuje kliknutí (pointer-events: none). Třídy přepíná aplikace vlastním skriptem. Funkční šipky v nadpisu sekce (posun o celé karty, zakázaný stav, aria-controls) jsou zatím jen v ukázce ve Storybooku.
• Styly – templates.css: doplněny .gov-block, .gov-responsive-img a tokeny --templates-width-max-*: Při přenosu z Fractalu chyběly dvě pomocné třídy a sada tokenů šířky. .gov-block (pozadí --background-block-primary, vnitřní odsazení --spacing-l, zaoblení --corner-radius-l) je obal obsahu v šablonách stránek, .gov-responsive-img zaobluje obrázky (--corner-radius-s). Tokeny --templates-width-max-xs (6.25rem) až --templates-width-max-4xl (50rem) platí pro všechny breakpointy, 5xl až 8xl mají pod sm 50rem a od sm 56.25rem až 75rem. Uvnitř templates.css je nic nepoužívá; ve Storybooku ale chybějící token dělal z max-width: var(--templates-width-max-4xl) neplatnou deklaraci a text šablon běžel přes celou šířku. Týká se balíčku styles i kopie templates.css v balíčku templates.
• Hlavička stránky (.gov-page-heading, šablona) – sladění s Figmou: Hero obrázek (picture img) je oříznutý na poměr 128 : 75 (aspect-ratio: 128/75, object-fit: cover, plná šířka), anotace (.gov-text-content) má max. šířku 50rem, tlačítka sdílení (.gov-social) nemají mezeru a seznamy .gov-icon-list, .gov-tags a .gov-social nemají v hlavičce svislé vnější okraje. Dopad: kdo používá markup hlavičky stránky s templates.css, uvidí oříznutý obrázek a těsnější rozestupy.
• Styly – granulární soubory obsahují i data-* selektory: Selektory [data-size], [data-disabled] a [data-open], které React implementace používá místo rezervovaných atributů, se dosud doplňovaly jen do souhrnného components.css. Nově je build doplňuje do každého souboru @gov-design-system-ce/styles/components/gov-*.css, takže React komponenty mají správné styly i při importu stylů po jednotlivých komponentách. Souhrnný components.css se nemění.
• Dokumentační web – gov-dialog se otevíral prázdný: V produkčním (SSR) buildu dokumentace se gov-dialog otevřel prázdný a jeho slotovaný obsah se vysypal nad dialog. Web-komponenty se registrovaly už při načtení modulu, před hydratací Vue, a hydratace zahodila pomocný komentář, podle kterého Stencil přesouvá slotovaný obsah komponent bez shadow DOM. Registrace (defineCustomElements()) nově proběhne až po hydrataci (onMounted + nextTick). Knihovna se nemění; stejný problém ale může mít každá Vue nebo Nuxt SSR aplikace, která komponenty registruje před hydratací.
• Dokumentační web – levé menu ztrácelo pozici posunu: Na desktopu nemělo menu vlastní posuvnou oblast, takže se po každém přechodu mezi stránkami vrátilo na začátek. Menu je nově lepivé (sticky) s vlastní posuvnou oblastí, pozici posunu si ukládá do sessionStorage a po načtení ji obnoví, případně posune aktivní položku do viditelné části menu.
• Dokumentační web – zvýraznění syntaxe v tmavém režimu: Tmavá paleta ukázek kódu se ve skutečnosti neuplatňovala. Ukázky nově v tmavém režimu (a v režimu auto při tmavém nastavení systému) používají tmavou paletu; palety jsou github-light-high-contrast a github-dark-default a splňují kontrast WCAG AA (nejméně 4,5 : 1). Uložené téma se nastaví skriptem v hlavičce stránky ještě před prvním vykreslením, takže světlý režim neprobliká, a lang="cs" je nově přímo v HTML místo dodatečného nastavení skriptem.
• Fractal – písmo a obrázky na webu šablon: Na nasazeném webu Fractalu (designsystem.gov.cz/templates) minul přepis cest na prefix /templates tři zdroje: místo souboru s písmem Roboto se vracela záložní HTML stránka, ikony PWA ze site.webmanifest a obrázek v ukázce stepperu vracely 404. Cesty jsou nově relativní, případně zapsané tak, aby je přepis zachytil. Publikovaný balíček @gov-design-system-ce/templates se funkčně nemění.

Přístupnost ​

• Stránkování (gov-pagination, React GovPagination) – tlačítko aktuální stránky nese aria-current="page" místo aria-current="true", takže čtečka obrazovky ohlásí „aktuální stránka“, ne jen „aktuální“. Ostatní stránky aria-current nemají. Styly se nemění (aktuální stránku značí třída .is-active); vlastní CSS nebo testy cílící na [aria-current="true"] je potřeba upravit.
• Skeleton (gov-skeleton, React GovSkeleton) – skeleton bez přístupného názvu je dekorativní (aria-hidden="true") a není v pořadí tabulátoru, roli progressbar dostane jen pojmenovaný skeleton. Podrobnosti a migrace viz Breaking changes a migrace.
• Šablony stránek ve Storybooku – opravy nalezené novými a11y testy: Dvanáct šablon (Aktuality, Centrum podpory, Článek, Domovská stránka, Kariéra, Kontakty, Mapa webu, O nás, Organizační struktura, Povinně zveřejňované informace, Pro média a Výsledky vyhledávání) má nové testy přístupnosti: axe ve světlém i tmavém režimu a podle šablony i kontrolu landmarků, jedinečnosti id, platnosti ARIA odkazů, fokusu uvnitř aria-hidden a osnovy nadpisů. Odložené nálezy (např. nadpisy h5 ve sloupcích patičky) jsou zapsány v tests/a11y/known-violations.md. Týká se jen ukázek ve Storybooku, publikované balíčky se nemění. Opravy v markupu ukázek:
  • Hlavička stránky (jednoduchá i komplexní) – drobečková navigace už není skrytá atributem aria-hidden="true" (obsahovala fokusovatelné odkazy) a nese accessible-label="Drobečková navigace".
  • Komplexní hlavička stránky – ikony data a autora jsou dekorativní (aria-hidden) a popisky „Datum publikace:“ a „Autor článku:“ jsou ve skrytém textu gov-sr-only.
  • Duplicitní id nadpisu obsahu (Povinně zveřejňované informace, Organizační struktura, Článek, Centrum podpory) – mobilní obsah stránky má vlastní prefix id, takže se id neopakuje a <aside aria-labelledby> se pojmenuje viditelným desktopovým nadpisem.
  • Úrovně nadpisů – nadpis obsahu v šablonách Článek, Centrum podpory (FAQ bloky) a Kariéra (Detail pozice) je h2 místo h3; desktopový nadpis je holý <h2> bez třídy, takže přebírá větší typografii h2. Nadpisy karet v šabloně Kontakty a karet pozic v šabloně Kariéra jsou h2 místo h3 beze změny vzhledu (typografii nese gov-card__headline).
  • O nás – doplněno chybějící uzavření </main></gov-container>, takže patička už není vnořená v <main> ani v kontejneru a stránka má landmark contentinfo.
  • Kariéra – ikony s aria-label ve sdíleném seznamu ikon nesou role="img" (týká se všech šablon se seznamem ikon) a vyhledávací formulář má id kariera-search místo duplicitního search.
  • Pro média – karty tiskových zpráv generují platné <time datetime> i pro datum ve tvaru „10. prosince 2024“ (dosud vznikalo datetime="undefined- prosince 2024-10").
  • Výsledky vyhledávání – přístupný název nese jen první skeleton v každé oblasti, popisek prázdného stavu je opraven na „Nebyly nalezeny žádné výsledky“ a dokumentace šablony má sekci Přístupnost.
  • Hlavní navigace (skript ve Storybooku) – napojení aria-controls / aria-expanded čeká na skutečnou hydrataci tlačítka mobilního menu místo pevné prodlevy.

React wrapper ​

Balíček @gov-design-system-ce/react je posunut ze 4.7.0 na 4.7.1 souběžně s ostatními balíčky. Odstranění propu disabled u GovWizardItem, zúžení typu color u GovInfobar (bez secondary) a nové chování GovSkeleton bez přístupného názvu jsou popsány v části Breaking changes a migrace, prop icon u GovBanner v části Změny.

Opravy ​

• ID prvků přes useId() – nesoulad při SSR hydrataci: GovFormInput, GovFormTextarea, GovFormSelect, GovFormCheckbox, GovFormRadio, GovFormSwitch, GovFormRange, GovFormMessage, GovChip, GovDialog, GovCollapsible, GovTabs a GovPagination generovaly ID prvků přes Math.random() přímo při vykreslení. Při SSR (např. Next.js) se tak ID ze serveru a z klienta lišila, React hlásil nesoulad při hydrataci a vazby aria-labelledby, aria-describedby, aria-controls i label[for] mohly ukazovat na neexistující prvky. ID nově vzniká ze sdíleného hooku useElementId(prefix, identifier?) nad Reactovým useId(), explicitní identifier má přednost. GovFormCheckbox, GovFormRadio a GovFormSwitch nově předávají slotovanému popisku výsledné ID včetně explicitního identifier, takže label[for] odpovídá inputu. Dopad: tvar generovaných ID se mění z Prefix-<náhodné hex skupiny> na Prefix-<výstup useId()> (u GovTabs GovTabContent-<useId>-<index>); formát závisí na verzi Reactu (:r0: v React 18 a 19.0, «r0» v 19.1, _r_0_ od 19.2). Na generovaná ID nespoléhejte v CSS; pro querySelector v Reactu 18 a 19.0 použijte CSS.escape(). Ostatní komponenty (GovBreadcrumbs, GovDropdown, GovFormAutocomplete, GovFormFile, GovFormMultiSelect, GovStepperItem, GovToast, GovTooltip (spouštěč tooltipu), GovUserNavigation a GovWizardItem) zatím generují ID postaru a při SSR mohou nesoulad dál způsobit.
• GovButton – identifier se vykresluje jako id: Prop identifier byl deklarovaný, ale nevykresloval se: propadl do zbylých atributů jako doslovný atribut identifier, takže tlačítko nemělo žádné id. Tím se rozpadala i vazba aria-labelledby v GovCollapsible, který spouštěč vykresluje přes GovButton. Nově se na <button> i na odkazové variantě <a> vykreslí id z identifier, případně z id; pokud jsou zadány oba, má přednost identifier.
• 'use client' u GovDialog, GovTabs, GovCollapsible, GovPagination a GovUserNavigation: Moduly používaly React hooky a API prohlížeče bez direktivy 'use client', takže je Next.js App Router považoval za serverové komponenty a jejich vykreslení ze serverové komponenty skončilo chybou TypeError: useState is not a function. Direktivu mají nově GovDialog, GovTabs, GovCollapsible a GovPagination i hook useElementId; kompilace ji v dist zachovává. CI nově kontroluje direktivu ve zdrojích i v sestaveném balíčku. Stejnou direktivu dostala i exportovaná GovUserNavigation, jejíž vykreslení ze serverové komponenty padalo stejně. Pro jistotu ji mají i interní moduly s hooky, které kontrola odhalila (useTooltip, useTooltipState, stav našeptávače a oba useClickOutside); ty se z balíčku neexportují a importují je jen komponenty, které direktivu už mají, takže samy chybu nezpůsobovaly.
• GovLink – external nastavuje target a rel: Prop external dosud jen vykreslil ikonu externího odkazu; odkaz se otevřel ve stejné záložce a cizímu webu poslal hlavičku Referer. Nově, stejně jako webová komponenta gov-link, nastaví na vnitřním <a> target="_blank" a rel="noreferrer". Dopad: <GovLink external> se otevírá v nové záložce; target předaný spolu s external se ignoruje a vlastní rel se přepíše na noreferrer.
• GovSkeleton – role a tab stop jen s přístupným názvem, předává onClick: React implementace je samostatný div a nově se chová stejně jako webová komponenta: role="progressbar", aria-busy, aria-valuemin / aria-valuemax a tabIndex={0} dostane jen při neprázdném aria-label nebo aria-labelledby, jinak aria-hidden="true". Deklarovaný, ale dosud zahazovaný onClick se nově předává.

Přístupnost ​

• GovPagination – tlačítko aktuální stránky nese aria-current="page" místo aria-current="true", shodně s webovou komponentou.

v4.7.0 ​

Balíčky @gov-design-system-ce/core, styles, icons a templates; React balíček (@gov-design-system-ce/react) má vlastní řadu verzí a je popsán v samostatné části na konci.

Breaking changes a migrace ​

• Cookie lišta (gov-cookiebar) – zneplatněné propy: label-cookie-details, label-cookie-name, label-cookie-provider, label-cookie-purpose a label-cookie-expiration jsou ponechány pro zpětnou kompatibilitu, ale nic nedělají — všechny patřily k odstraněné tabulce jednotlivých cookies. Pokud je používáte, nahraďte je propy label-privacy + privacy-url; jinak není potřeba nic měnit.
• Chip (gov-chip) – geRef() → getRef(): imperativní metoda s překlepem v názvu je přejmenována, čímž se komponenta sjednocuje se všemi ostatními (ty getRef() vystavují už dnes). Konzumenti volající chipEl.geRef() — přímo nebo přes seznam proxy metod v Angularu — musí přejít na chipEl.getRef(). Signatura a návratová hodnota se nemění (Promise<HTMLLinkElement | HTMLSpanElement | HTMLButtonElement>), změnil se jen název.
• React – viditelná změna vzhledu a požadavek na verzi stylů: React implementace nyní vydává atributy, na které components.css skutečně cílí, takže se výstup React komponent vykreslí správně — ale viditelně jinak než dosud. Po aktualizaci si překontrolujte dotčené obrazovky. Balíček @gov-design-system-ce/react zároveň vyžaduje @gov-design-system-ce/styles ve verzi 4.6.4 nebo vyšší; se starší verzí stylů se komponenty vykreslí nesprávně.
• Banner (gov-banner) – odstraněna varianta foreground="logo", výchozí hodnota je icon: Dekorativní lev v pozadí banneru byl odebrán na základě rozhodnutí UX/UI (banner ho zobrazovat nemá). Hodnota logo je odstraněna z výčtu BannerForeground i z SCSS ($shared-foregrounds), takže ji @Watch validátor nově odmítne varováním o neplatné hodnotě, a výchozí hodnota propu foreground se mění z logo na icon — sourozenecká varianta se stejnou cestou vykreslení a stejným pozicováním u velikosti s. Dopad: bannery, které foreground neuvádějí, se vykreslí s dekorativní ikonou místo lva; bannery se foreground="logo" přijdou o dekoraci úplně a je třeba je přepsat na icon (dekorativní grafika bez obrázku) nebo image (vlastní obrázek ve slotu image). Varianta image a velikost xl, která foreground vůbec nepoužívá, zasaženy nejsou.
• Styly – odebrány varianty html/* z balíčku @gov-design-system-ce/styles: Soubory @gov-design-system-ce/styles/html/… už balíček neobsahuje a zmizely i z mapy exports (z 204 položek na 97). Vybíraly varianty komponent výhradně přes atributy data-*, které ale žádný z wrapperů nerenderuje — komponenty s nimi měly správné rozměry a žádnou barvu. Dokumentace je přitom pro React doporučovala. Pokud je používáte, přepište importy na kořenové cesty (@gov-design-system-ce/styles/components.css atd.); do té doby build skončí chybou o nenalezeném modulu. Generátor packages/styles/attributes.mjs byl odstraněn z buildu.

Změny ​

• Cookie lišta (gov-cookiebar) – redesign: Podrobné nastavení kategorií se přesunulo z rozbalovacího panelu uvnitř lišty do modálního okna (gov-dialog), samotná lišta je nyní plovoucí karta ukotvená vlevo dole a tabulka jednotlivých cookies byla nahrazena jedním odkazem na zásady zpracování osobních údajů. Doplněna podpora tmavého režimu a responzivní chování. Veřejné API zůstává beze změny — metody getConsent() a show() i událost gov-consent mají stejné signatury.
  • Nové propy: label-settings-title (titulek modálu), accessible-close-label (popisek zavíracího tlačítka modálu), label-always-on (text chipu u zamčené kategorie), label-privacy a privacy-url (text a cíl odkazu na zásady zpracování).
  • Odkaz na zásady se vykreslí pouze tehdy, když aplikace dodá neprázdný privacy-url — komponenta už nevytváří „mrtvý" odkaz na #.
  • Fokus po otevření: pokud jsou nastavené kategorie, přebírá fokus past fokusu v gov-dialog; bez kategorií se fokus nastaví na samotnou lištu.
  • Pozicování je nyní řízené jedním lokálním tokenem --gov-cookiebar-inset (inset shorthand + max-width: 45rem) místo opakovaných calc() řetězců pro každý breakpoint. Vzhled je identický a token lze přepsat z aplikace.
• Toast (gov-toast) – ukazatel odpočtu běží zleva doprava: tmavší překryv (.gov-toast__timer) se plní od levého okraje doprava a plné šířky dosáhne přesně ve chvíli, kdy se toast sám zavře. Dříve začínal na plné šířce a zprava se zkracoval. Ukazatel se navíc vykresluje jen tehdy, když odpočet skutečně běží (time > 0) — trvalé toasty (time = 0) ho neobsahují vůbec. Barvy, tokeny ani levý akcent subtle se nemění.
• Toast (gov-toast) – odpočet respektuje prefers-reduced-motion: při zapnutém omezení pohybu se animace plnění vypne a překryv se skryje (místo aby nad toastem zamrzl v mezistavu). Toast se přitom stále zavře v naplánovaném čase — časovač v JS je na CSS animaci nezávislý.
• Styly – nový opt-in balík templates.css: styly šablon (header, footer, karty, tabulky, filtry, galerie, obsah stránky, mapa a další, včetně pomocných tříd a tokenů --component-footer-*) jsou nově kompilované do samostatného balíku @gov-design-system-ce/styles/templates.css. Do hlavního components.css se nedostanou — kdo šablony nepoužívá, nic navíc nestahuje. Jde o postupný přenos stylů z původního balíčku šablon (Fractal) do design systému.
• Tabulka (šablona) – modifikátor --no-border: gov-table-complex umí vypnout vnější rám obalu tabulky. Součást opt-in balíku templates.css, nikoli hlavního components.css; komponenta se nemění.
• Ikony – 15 nových ikon v sadě components: eye-slash (skryté heslo v gov-form-input), cookie (odznak pro znovuotevření cookie lišty), link, clock-history, arrow-up, envelope, facebook, instagram, linkedin, youtube a pět ikon typů souborů (file-earmark, filetype-pdf, filetype-xls, filetype-png, filetype-jpg). Zdrojem je Bootstrap Icons (MIT), převedeno do konvence sady (fill="none" / path[fill="currentColor"]). Šablony na ně dříve odkazovaly přes neexistující sadu templates, takže se vykreslovaly prázdné.
• Šablony – nová šablona cookie lišty: organismus cookiebar demonstrující komponentu gov-cookiebar, aktualizovaný pro redesign.
• Záložky (gov-tabs) – vyhledávání potomků: gov-tabs-item se dohledávají filtrem přímých potomků místo kombinátoru :scope >. Chování je identické (stále jen přímí potomci, vnořené záložky vyloučené), odpadá jen závislost na selektoru :scope.
• Ukázkové projekty (skeletony): Pro každé prostředí (čisté HTML, React, Angular, Vue) vznikl minimální skeleton — jedna stránka, několik komponent, nic k mazání. Instalují design systém z registru jako běžná aplikace, takže jako první věc v projektu ověřují i obsah publikovaných balíčků. Odkazy najdete na stránce Pro vývojáře.
• provideGovDesignSystem() pro Angular: Nová funkce pro standalone aplikace. Dosud bylo jedinou zdokumentovanou cestou naimportovat GovDesignSystemModule, což ve standalone komponentě přinese direktivy, ale zahodí providery — komponenty se nikdy nezaregistrovaly a vykreslily se jako neaktivní elementy s holým textem, bez jakékoli chyby v konzoli. GovDesignSystemModule funguje beze změny, aplikace založené na NgModulech nemusí nic upravovat.
• @gov-design-system-ce/vue — mapa exports: Plugin ComponentLibrary je nově dostupný jako @gov-design-system-ce/vue/plugin. Dosud šel naimportovat jen hlubokou cestou @gov-design-system-ce/vue/dist/plugin, protože balíček neměl exports a index plugin nereexportoval. Původní zápis zůstává funkční.
• Dokumentace pro vývojáře přepsána do češtiny a doplněna o rozdíly mezi jednotlivými wrappery — mapování slotů na props v Reactu, povinné isCustomElement ve Vue, nastavení assets a styles v Angularu.
• Odebrány stránky pro Next.js a Nuxt.js: Pro tato prostředí neexistuje skeleton ani ověřený postup, takže návody byly odstraněny místo toho, aby popisovaly nevyzkoušené nastavení. Pro Next.js platí návod pro React, pro Nuxt návod pro Vue.

Opravy ​

• Rozbalovací seznam (gov-form-select) – ve Firefoxu byly skryté možnosti: komponenta obsahovala pravidlo gov-form-select option:not([selected]) { display: none }, kterým se předstíralo zobrazení vybrané hodnoty. Firefox ale display na <option> uvnitř nativního <select> respektuje, takže se v rozbaleném seznamu skryly všechny nevybrané položky a nabídka vypadala jako jednoprvková. CSS hack je odstraněn a vybraná hodnota se nyní synchronizuje imperativně na nativním elementu (syncSelectValue() z connectedCallback a z @Watch nad value), takže nativní nabídka vykreslí celý seznam ve všech prohlížečích. Veřejné API (propy / události / sloty) se nemění.
• Cookie lišta (gov-cookiebar) – rozpad karty při přepsání pozicování: Kořenové pravidlo komponenty nedeklarovalo display, takže blokové zobrazení bylo jen vedlejším efektem position: fixed. Jakmile aplikace pozicování přepsala (např. position: static, aby se lišta zobrazila v běžném toku stránky), vlastní element se vrátil k výchozímu display: inline a pozadí, zaoblení i stín se vykreslily zvlášť pro každý řádek — karta se opticky rozpadla na barevné fragmenty. Doplněno explicitní display: block; výchozí vykreslení v position: fixed je beze změny.
• Dialog (gov-dialog) – past fokusu u dialogu otevřeného při načtení: dialog vykreslený hned jako otevřený (open="true" při prvním renderu) nyní nastaví past fokusu — přesune do sebe fokus a nainstaluje obsluhu klávesnice (cyklení Tab + zavření Escape). Dříve tato logika žila jen v @Watch('open'), který Stencil spustí při změně propu, ne pro jeho počáteční hodnotu, takže čerstvě otevřený dialog nechal fokus na <body> a neměl klávesovou past. Zároveň byla opravena podmínka ve focusTrap(), která se odkazovala na globální open (window.open, vždy truthy) místo this.open. Právě díky tomu funguje u cookie lišty cesta „znovu otevřít z odznaku s kategoriemi" — ta vytváří gov-dialog znovu s open=true.
• Textové pole (gov-form-input) – tlačítko odhalení hesla ukazuje stav: ikona se přepíná mezi eye-slash (skryto) a eye (odhaleno) a tlačítko nese aria-pressed odpovídající stavu. Podle vzoru WAI-ARIA pro přepínací tlačítko je aria-label nově statický neutrální „Zobrazit heslo" (accessible-show-password-label) místo přepínání mezi dvěma popisky, takže čtečka stav oznámí jednou (přes aria-pressed), ne dvakrát. Prop accessible-hide-password-label je zachován pro kompatibilitu API.
• Našeptávač (gov-form-autocomplete) – throttle-time se ignoroval: debounce vestavěný do komponenty nefungoval, protože se obsluha vstupu vytvářela znovu v render() při každé změně stavu a časovač se tím pokaždé resetoval. searchCallback se nyní volá jednou za nastavené okno, jak dokumentace uvádí, místo při každém stisku klávesy.
• Grid item (gov-grid-item) – col-span / row-span ve frameworcích: propy col-span a row-span (i responzivní varianty col-span-{sm,md,lg,xl} / row-span-{sm,md,lg,xl}) se nově propisují do atributů hostitele. SCSS na těchto atributech staví grid-column / grid-row, ale propy se nepropisovaly — takže integrace, které hodnotu nastavují jako property (Vue proxy defineContainer, Angular vazba [column]), atribut nikdy nezapsaly a buňka spadla na grid-column: auto bez rozpětí. Konzumenti pracující s atributy (čisté HTML, ručně psaná React implementace) zasaženi nebyli. Veřejný kontrakt se nemění.
• Empty (gov-empty) – validace propu size: @Watch validátor porovnával hodnotu proti AccordionSizes (xs–xl) místo vlastního EmptySizes (s/m/l) a varování logoval pod názvem komponenty gov-accordion — zbytek po kopírování. Nyní validuje správný výčet a loguje jako gov-empty.
• Stránkování (gov-pagination) – výchozí type se dočasně změnil a je vráceno zpět: mezi verzemi se výchozí hodnota propu type změnila z button na select a přidala se hodnota classic; obojí je vráceno — type má opět výchozí button a classic je z výčtu (i z React wrapperu, Storybooku, šablon a ukázkových aplikací) odstraněno. Pro konzumenty je čistý dopad nulový; záznam je zde jen kvůli dohledatelnosti a proto, aby bylo zdokumentováno, že hodnota classic nikdy nevyšla.
• @gov-design-system-ce/react nedeklaroval tslib: Sestavený balíček obsahuje import { __rest } from "tslib" v deseti souborech (důsledek importHelpers: true), ale tslib nebyl uvedený mezi závislostmi. Instalace z registru tak mohla skončit chybou Rolldown failed to resolve import "tslib". Ukázkové aplikace v monorepu problém nezachytily, protože wrapper aliasují na zdrojové soubory.
• @gov-design-system-ce/vue nedeklaroval @stencil/vue-output-target: Sestavený dist/index.js z něj importuje defineContainer za běhu, ale balíček ho neuváděl mezi závislostmi. Stejná příčina zamaskování jako výše — packages/sample-vue si závislost deklaruje sám.
• @gov-design-system-ce/vue nedeklaroval vue jako peer dependency: Doplněno vue ^3.4.0. Správci balíčků tak mohou Vue správně deduplikovat a upozornit na nekompatibilní verzi.
• @gov-design-system-ce/vue se publikoval bez kódu: Balíček deklaruje files: ["dist"], ale dist se nesestavoval, takže archiv obsahoval pouze package.json a README.md. Doplněno sestavení core-react a core-vue do build skriptu.
• @gov-design-system-ce/styles — chybný klíč publishConfig: Klíč byl zapsán jako publishonfig, takže se nastavení access: public neuplatnilo.
• Dokumentace nesprávně doporučovala pro React styly html/*: Varianta html/* vybírá varianty komponent výhradně přes atributy data-*, zatímco React wrapper renderuje atributy bez prefixu. Komponenty proto měly správné rozměry a žádnou barvu. Správné jsou kořenové soubory stylů, které používá i packages/sample-react.
• Dokumentace nesprávně popisovala kopírování ikon: Uváděný příklad kopíroval všechny ikony do jediného adresáře (--flat), ale gov-icon je stahuje z cesty ${iconsPath}/${type}/${name}.svg. Při zploštění struktury skončí každá ikona chybou 404, aniž by se cokoli objevilo v konzoli. Podadresáře components, complex a colored musí zůstat zachované.
• Dokumentace nesprávně odůvodňovala rozdělení stylů Shadow DOM: Žádná komponenta design systému Shadow DOM nepoužívá.
• Dokumentace neuváděla výchozí hodnotu iconsPath: Skutečná výchozí hodnota je /assets/icons, nikoli ./assets/icons. Doplněny také dosud nezdokumentované volby warningLog, errorLog a log.
• Dokumentace – nefunkční odkazy na stránce Přístupnost webových stránek: Odkazy „Vzorové prohlášení o přístupnosti" a „Jak vyplnit prohlášení o přístupnosti" mířily na PDF v dia.gov.cz/wp-content/uploads/…, které DIA stáhla (obojí 404). Nahrazeny jedním odkazem na průběžně udržovanou stránku Prohlášení o přístupnosti | DIA.
• Dokumentace – odkaz na zákon č. 99/2019 Sb. vedl na stažené PDF: Odkaz v kapitole WCAG mířil na PDF se zněním zákona na dia.gov.cz (404). Nyní vede do e-Sbírky, tedy na oficiální a aktualizované znění.
• Dokumentace – ukázková URL v SEO manuálu se vykreslovala jako odkazy: VitePress má ve výchozím nastavení zapnutý linkify, takže z placeholderů psaných jako běžný text (https://domena.cz/sitemap.xml, domena.cz/stranka/?utmparametr=1, http://www.example.com/robots.txt) dělal klikatelné odkazy — domena.cz přitom vrací 403. Placeholdery jsou nově zapsané jako inline kód, takže se nelinkují.
• Dokumentace – odstraněn odstavec odkazující na ukončený projekt PMA3: Stránka Pravidla pro umisťování loga doporučovala jako vzor web pma3.gov.cz, který byl po ukončení projektu stažen (502). Odstavec je odstraněn bez náhrady.
• Dokumentace – mrtvý odkaz na sadu ikon Material: Stránka Ikony odkazovala v seznamu dalších zdrojů na material.io/tools/icons/?style=baseline. Adresa přesměrovává na fonts.google.com/icons?selected=Material+Icons, která vrací 404. Nahrazeno odkazem na Material Symbols — sada je dnes distribuovaná právě tam, takže je upraven i název položky.
• Dokumentace – zastaralá a zaměněná sekce Google Analytics v SEO manuálu: Text psal v budoucím čase, že „Google však tuto verzi bude vypínat k 1. 7. 2023", ačkoli Universal Analytics je vypnutý; přeformulováno do minulého času s GA4 jako aktuální verzí. Navazující věta „Více o postupu nasazení Google Search Console…" byla navíc v sekci Google Analytics a odkazovala na nápovědu Search Console — zbytek po kopírování, protože identická věta stojí správně i o dvě sekce níž. Nyní odkazuje na nastavení Google Analytics. Odkazy na nápovědu Google samotné funkční byly; support.google.com jen odpovídá 404 na HTTP metodu HEAD, takže je automatické kontroly odkazů hlásí falešně.

Přístupnost ​

• Záložky (gov-tabs) – kontejner role="tablist" držel spouštěče role="tab" uvnitř vloženého <ul> / <li>, čímž se rozpadala povinná vazba tablist → tab (kritické nálezy axe aria-required-children / aria-required-parent). Strukturální <ul> / <li> nyní nesou role="presentation", takže semantika seznamu kontrakt tablistu nepřerušuje; vizuálně beze změny. Stejná oprava provedena i v React implementaci.
• Informační lišta (gov-infobar) – aria-hidden u rozbalovacího obsahu byl invertovaný: ve složeném stavu se obsah asistivním technologiím hlásil jako viditelný a v rozbaleném jako skrytý. Nyní odpovídá skutečnému stavu a atributu hidden.
• Zaškrtávací pole (gov-form-checkbox) – nerozhodnutý (indeterminate) stav nyní hlásí aria-checked="mixed" místo "false", podle vzoru WAI-ARIA pro třístavový checkbox.
• Multi-select (gov-form-multi-select) – seznam vybraných položek je prezentační výčet odebíratelných chipů, ne widget pro výběr. Odstraněny nesprávné role listbox / option (každý chip obsahuje tlačítko pro odebrání, což axe hlásil jako nested-interactive, a seznam neměl přístupný název).
• Našeptávač (gov-form-autocomplete) – vnitřní input nyní používá role="combobox" (dříve searchbox, který nepovoluje aria-expanded / aria-owns) a komponenta předává svůj identifier do id vnitřního inputu, takže spárovaný gov-form-label poskytne přístupný název. Týká se i gov-form-multi-select, který našeptávač obsahuje.
• Range (gov-form-range) – číselné pole vedle posuvníku (vykreslené při nastaveném input) nemělo přístupný název, nyní nese aria-label.
• Dialog (gov-dialog) – přístupný popisek zavření se vykresloval jako aria-label / aria-labelled-by přímo na hostiteli <gov-backdrop> bez role, místo aby se předal propy komponenty. axe hlásil dva vážné nálezy WCAG 2.1 AA (aria-prohibited-attr a překryv s role="button" bez přístupného názvu). Popisek se nyní dostane na vnitřní tlačítko správnou cestou.
• Loading (gov-loading) – překryv gov-backdrop (vykreslující vnitřní role="button") neměl přístupný název a porušoval pravidlo axe aria-command-name na každé stránce s loaderem. Nyní dostává accessibleLabel="Loading".
• Chip (gov-chip) a Backdrop (gov-backdrop) – aria-disabled se serializuje na "true" / "false" místo prázdného atributu. Surová boolean hodnota se vázala přímo, což Stencil vykreslil jako aria-disabled=""; nyní prochází pomocnou funkcí stejně jako u referenčního gov-button.

React wrapper ​

Balíček @gov-design-system-ce/react má vlastní řadu verzí – v4.7.0 vyšla souběžně s core / styles v4.6.4.

Upgrade z 3.4.0 na 4.7.0: Balíček je posunut z 3.4.0 (poslední publikovaná verze) na 4.7.0, čímž je zarovnán s verzí zbytku monorepa. Jde o první publish ve 4.x linii — stejný krok, jaký proběhl u @gov-design-system-ce/vue ve verzi 4.6.3. Veřejné API se nemění; verze 3.4.0 už měla stejnou podobu komponent a závisela na @gov-design-system-ce/components@^4.2.9.

Změny ​

• Odstraněn systematický rozpor mezi React implementací a components.css: React komponenty nejsou proxy nad Web Componentou, ale samostatná implementace vykreslující light-DOM markup. Ta ale vydávala atributy s prefixem data- (data-size, data-color, data-invalid …), zatímco components.css cílí na prosté atributy ([size], [color], [invalid] …). Audit všech 48 komponent našel 38 dotčených. Oprava vydává atributy deklarativně přímo na kořenovém elementu: atributy, které React 19 na <div>/<span> zachová, se předávají prostě; tři atributy, které React zahazuje (size, disabled, open), se vydávají jako data-size / data-disabled / data-open a components.css je od v4.6.4 umí obsloužit také (viz níže). Řešení je SSR-korektní a nezpůsobuje probliknutí při prvním vykreslení. Signatury propů se nemění.
• components.css rozšířeno o data-* varianty selektorů (součást styles v4.6.4): ke každému selektoru cílícímu na rezervovaný atribut ([size], [disabled], [open]) přibyl dvojník s data- prefixem, takže jedna sada stylů obsluhuje jak Web Componentu / Vue / Angular / čisté HTML (prosté atributy), tak React implementaci. Pouze přidává – stávající selektory jsou beze změny.
• gov-form-control – nové propy invalid a disabled: validační a zakázaný stav nešel z Reactu vůbec vyjádřit. Nyní se propisuje do atributů [invalid] / [disabled], které přebarvují popisek a ztlumují ovládací prvek.
• Cookie lišta – vlastní React implementace: gov-cookiebar má nově React reimplementaci odpovídající redesignu — vestavěné akce, ukládání souhlasu do cookie a nastavení kategorií v modálním okně (gov-dialog).

Opravy ​

Následující komponenty se v Reactu vykreslovaly nesprávně nebo vůbec:

• gov-button ignorovalo size – každé tlačítko se vykreslilo ve výchozí velikosti m. disabled nyní prvek jak ztlumí, tak zablokuje interakci (nativní disabled na vnitřním <button>, aria-disabled a zamezená navigace u odkazové varianty). Fungují i expanded / expanded-mobile (plná šířka) a loading (rotující indikátor).
• gov-dialog bylo trvale neviditelné – nenastavovalo třídu hydrated ani atribut open, na který components.css váže zobrazení.
• gov-form-input / gov-form-checkbox neaplikovaly size (výchozí m) ani invalid – odtud ~17px vysoký input se zdvojeným rámečkem a zaškrtávací pole o rozměru 0 × 0.
• gov-theme-switch neaplikoval theme ani size a smrskl se na ~2 px.
• gov-form-switch byl vizuálně nefunkční – nepropisoval size / checked / invalid / disabled ani modifikátor __no-label; size navíc nyní defaultuje na m jako ve Stencil zdroji (bez velikosti se indikátor nevykreslil vůbec).
• gov-chip byl zcela bez stylu (neaplikoval size / type / color / disabled).
• gov-tabs neaplikovalo size / type / color a neoznačovalo panely jako hydrated, takže obsah záložek byl skrytý.
• gov-loading / gov-skeleton nespouštěly animaci (chybné třídy animací).
• gov-badge nevydával data-size ani prosté content, takže se neuplatnila ani velikost, ani varianty content=empty|icon|number.
• Slotované ikony a nadpisy se nevykreslovaly se stylem u gov-empty, gov-error-code, gov-infobar, gov-link, gov-banner, gov-blockquote – chyběl jim atribut slot, který CSS selektory vyžadují.
• Propis prostých atributů (dříve data-*) opraven u dalších 31 komponent: gov-accordion, gov-accordion-item, gov-avatar, gov-backdrop, gov-badge, gov-banner, gov-card, gov-collapsible, gov-control-group, gov-empty, gov-flex, gov-form-control, gov-form-group, gov-form-label, gov-form-message, gov-form-password-power, gov-form-radio, gov-form-range, gov-form-search, gov-form-select, gov-form-textarea, gov-grid, gov-grid-item, gov-icon, gov-link, gov-loading, gov-message, gov-pagination, gov-spacer, gov-tag, gov-tile.
• gov-tile – velikost šipky (chevronu) opravena souběžnou úpravou v core (gov-tile.scss nyní cílí i na třídní selektor .gov-icon), protože React vykresluje <span class="gov-icon">, na který se elementový selektor nechytil.
• GovButton v odkazové variantě nevykresloval atribut href – odkazy neměly cíl.

Přístupnost ​

• gov-collapsible – neplatný atribut aria-control přejmenován na aria-controls.
• gov-dialog – překryv pozadí (gov-backdrop, který vykresluje vnitřní role="button") neměl přístupný název, protože se předával přes chybné názvy propů. Nyní se název odvozuje z accessibleCloseLabel.
• gov-loading – vnořenému překryvu se předává accessibleLabel="Loading", takže jeho role="button" není bezejmenné.
• GovSkeleton – přijímá a předává aria-label / aria-labelledby na prvek s role="progressbar"; bez přístupného názvu takový prvek neprojde kontrolou přístupnosti.
• gov-form-range – číselné pole vedle posuvníku dostalo aria-label.
• gov-tabs – strukturální <ul> / <li> uvnitř role="tablist" nyní nesou role="presentation", čímž se opravuje porušení vazby tablist → tab (kritické nálezy aria-required-children / aria-required-parent). Stejná oprava provedena i ve Stencil zdroji.