Review rodiny Choice — nálezy, bug list, rozhodnutí pro AD

Datum: 2. 9. 2026 večer · reviewer: Claude (jako senior UX/UI) · zadal Štěpán (AD) Předmět: rodina Choice (checkbox · radio · switch · segmented-control · option-chips) po stories MR !2823 (mergnuto). Provedeno novým postupem (schválen 2. 9. 2026): inventura použití → stavová matice z kódu → story jako port → docs proti kódu. Každý nález ověřen proti origin/main acrm (4f9af7cb4, klon /root/acrm-main), stránkám /ds/components/choice/*?tab=examples (screenshoty review-choice-<sub>.png) a validatoru ds:validate:usage.

0. Shrnutí

Všech pět podkomponent má reálné použití v appce (22 · 4 · 8 · 25 · 9 souborů), takže rodina nemá „mrtvou" podkomponentu jako Button (Kbd hint, Save, Split). Problém je o vrstvu níž: stories a docs kanonizují části, které appka nepoužívá (.acrm-check-row + .acrm-check-input, .is-mixed, indeterminate — 0 míst mimo katalogovou DsInputsPage), a naopak nezachycují, co appka dělá většinově (radio s popisem nese inline styl ve 3 ze 4 míst; vybraný option chip má trailing „×" v 6 z 9 souborů; switch se v appce vždy píše role="switch" + aria-checked, story píše aria-pressed).

Kompozice jsou z větší části vymyšlené, ne portované: „Calendar · Month/Week · New meeting" v Section top baru neexistuje (Kalendář jede na legacy .cbar s přepínačem vpravo; Úkoly dávají přepínač do pravého clusteru a primár vědomě mimo slot), „settings list" se switchi neexistuje, „menu rows" u checkboxu jsou divy s inline styly místo button.acrm-popover-item z CheckMenu, „own value" u chipů kombinuje prvky, které v PruvodceFirmyPage stojí jinak.

Stavová matice ukázala tři chybějící stavy v kódu, které appka reálně potřebuje: .acrm-switch nemá :disabled (7 z 8 použití disabled posílá), .acrm-radio nemá disabled (dialer si ho dopisuje per-page), .acrm-check-label nemá disabled (story „disabled" ukazuje browser default + nezměněný popisek). K tomu v appce běží druhý switch (.tk-more .sw, 30×17), dvě segmented CSS (.dp-seg živé, .sgb-seg mrtvé), dva emitory .acrm-segmented mimo komponentu (PostaPage, SegmentBuilder Seg), šest obalů checkboxu (.sgb-check, .aichat-check, .asg-check, .dlr-check, .tk-check, .tl-rcheck), radio kreslené třídou checkboxu (2 místa) a 7 živých WARN nálezů validatoru na main, protože pravidla pro checkbox/radio jsou jen WARN a mají výjimky ck/cb/sgb-ck.

Web po opravách z Button review nelže: legacy story se do coverage nepočítá, status je beta bez AD schválení. Dvě věci zůstaly: legacy stories (components--inputs--checkboxes, components--segmented-app-only-) se pořád zobrazují vedle nové Default, a auto-výška iframů (D5) na těchto stránkách nefunguje (1–3 řádky obsahu + ~250 px bílé).

Bilance: 5 podkomponent, všechny canon-eligible; 4 části kandidát (bez použití); 19 D-bugů, 19 A-bugů, 8 rozhodnutí AD.

1. Nálezy per podkomponenta (ověřeno v kódu)

1.1 Checkbox — <Checkbox> · .acrm-check · .acrm-check-label · .acrm-checkbox

Inventura použití

Stavová matice z kódu (ds.css:168–187, inputs.css:660–716, foundation ring ds.css:2795)

Story audit

• Default: vedle nové Default se zobrazuje legacy components--inputs--checkboxes (české popisky, 4 položky) — týž vzor jako D10 u Buttonu (D1).
• Variants: „styled box — .acrm-check-row" = markup, který appka nepoužívá; skutečný styled výskyt je uvnitř button.acrm-popover-item[role=menuitemcheckbox] (CheckMenu.tsx:198–227) (D2).
• States: „indeterminate" a „styled — mixed" = 0 použití; „disabled" ukazuje browser default (D4).
• Composition: „option group under a field label" bez file:line, popisky vymyšlené (reálně TransferDialog.tsx:173–195: .dlg-label + 4 Checkbox kaskáda); „menu rows (CheckMenu anatomy)" = divy s inline border/borderRadius/padding/height místo CheckMenu (D3).
• Inline styly mimo chrome: minWidth 240, border, borderRadius, padding, height: var(--control-h) na „menu" (D3).

Duplicity v appce (A7, A8): .sgb-check (builder-panels.css:302 — a to je zdroj, ze kterého byl .acrm-check-label portován), .aichat-check (assistant.css:163, 3 soubory — obaluje <Checkbox> vlastním labelem), .asg-check (mail.css:1521), .dlr-check (dialer.css:559), .dp-allday (packages/ui, ds-ok), .tk-check (task-dialog.css:71, 18 px) a .tl-rcheck (task-list.css:146, 18 px pill) — poslední dva jsou „stav úkolu", ne volba (R8).

Docs vs kód: usage/a11y popisují .acrm-check-row + .acrm-check-input jako kanon a slibují focus ring styled boxu přes .acrm-check-input — v appce neexistuje (D12). Validator popsán jako WARN — pravda, ale pravidlo checkbox-native-no-ds akceptuje i ck, cb, sgb-ck a skenuje jen apps/web/src (D17, A7).

1.2 Radio — .acrm-radio-group · .acrm-radio · .acrm-radio-input · .acrm-radio-dot

Inventura použití: 4 soubory — NastaveniPage.tsx:3022–3042, SouhlasPripojeniPage.tsx:130–148, settings/AccessPresets.tsx:98–113, company/CompanyMergeTable.tsx:259–272, 322–327. 3 ze 4 (vše kromě merge tabulky) používají layout s popisem a nesou stejný inline styl style={{ marginTop: 'var(--sp-1)' }} na tečce + alignItems: flex-start (A5). Merge tabulka používá radio vodorovně v buňkách (mgt-cell acrm-radio).

Radiogroupy mimo kanon: callwrapup/FollowupMail.tsx:46–56 (role=radiogroup + input[type=radio].acrm-check v .dlr-check — radio kreslené jako checkbox), products/MeetingProductsSection.tsx:204–210 (totéž), deal/DealDialog.tsx:597 (.dl-primary radiogroup z tlačítek), callwrapup/QualGate.tsx:122 (radiogroup z .acrm-optchip[role=radio]), segment/OwnerFilter.tsx:48 (single-choice chipy bez role) (A6, A15).

Stavová matice z kódu (inputs.css:608–655)

Story audit: States „off/on" = holé <span class="acrm-radio"> bez inputu (nefokusovatelný, nekanonický markup) a duplikát Defaultu; Default/Composition popisky vymyšlené („All companies…", „Formatted / Plain text"), bez file:line — reálný port: SouhlasPripojeniPage:130 (volba s popisem) nebo AccessPresets:98 (D5).

Docs vs kód: usage.md kanonizuje inline styl jako anatomii („margin-top: var(--sp-1) on the dot — NastaveniPage pattern"), seznam použití neúplný (chybí AccessPresets, CompanyMergeTable), „no horizontal radio rows" odporuje merge tabulce (D13). a11y.md sedí s CSS.

1.3 Switch — .acrm-switch-row · .acrm-switch

Inventura použití: 8 souborů, 26 tlačítek — ImportPage.tsx:704, settings/StitkyTab.tsx:305, settings/TypyCiselTab.tsx:160, settings/TelephonySection.tsx:188,205, settings/VztahyTab.tsx:233, settings/VendorAccessSection.tsx:83,98, settings/WorkflowsSection.tsx:139,215, mail/ComposeForm.tsx:3485. 8/8 píší role="switch" + aria-checked; 7/8 posílají disabled={busy…}. Popisek: text za tlačítkem (Import, Stitky, Telephony, VendorAccess), jen aria-label v řádku tabulky (TypyCisel, Vztahy, Workflows), text před tlačítkem (ComposeForm .mc-track-lbl, weight 400).

Stavová matice z kódu (inputs.css:758–797)

Story audit: States používá aria-pressed (story není port — appka 8/8 role="switch"; validator switch-not-acrm klíčuje na role="switch", story mu proklouzne) (D6). Composition „stacked options" bez file:line (reálně VendorAccessSection:83–110, TelephonySection:188–215); „settings list — --row-h + borderBottom" v appce neexistuje — řádky v TypyCisel/Vztahy jsou řádky tabulky s ghost tlačítky + switch, Workflows má .stat pilulku + switch (D7). Varianta „popisek vlevo" (ComposeForm) chybí.

Duplicita: .tk-more .sw (task-dialog.css:374–399; TaskDialog.tsx:1142–1148) = druhý switch 30×17 řízený skrytým checkboxem .tk-more-input, aria-hidden — bez role=switch, takže validator ho nevidí (A9).

Docs vs kód: usage.md „the story uses aria-pressed — both are accepted" legitimizuje odchylku (D14); a11y.md „set aria-label on the button (all app usages do)" nepravda — ComposeForm:3487 má jen title (D14, A18).

1.4 Segmented control — <Segmented> · .acrm-segmented

Inventura použití: <Segmented> 25 souborů (KalendarPage:1476, TasksPage:700, JournalPage:174,184, HovoryPage:610, NastaveniPage:2806, ContactLogDialog:606…); grow 8× (NakladyPage:456, DialerPage:1683, PortfolioBuilderPage:538, PortfolioFields:155,175, AccountingEntityDialog:397, InvoicePaymentDialog:177, ContactLogDialog:606); icon 3× (DialerPage:1688, InvoicePaymentDialog:182, ContactLogDialog:494). Raw .acrm-segmented mimo komponentu: PostaPage.tsx:560, segment/SegmentBuilder.tsx:58–85 (vlastní Seg, role=group bez jména) (A10). Duplicitní CSS: .dp-seg (orders.css:276; DiscussionSection.tsx:177 — rámeček --border, ikony, .on), .sgb-seg (builder-panels.css:113 — 0 použití v tsx) (A11). .pr-seg, .fin-stack-seg, .seg-ic jsou jiné věci (řádek segmentu v railu, sloupec grafu, ikona segmentu) — ne duplicity.

Stavová matice z kódu (ds.css:221–260, Segmented.tsx)

Story audit: Default zobrazuje i legacy components--segmented-app-only- (české „Uživateli/Týmu" s ikonami, bez ariaLabel — porušuje vlastní docs) (D1, D9). With icon: ikony user/users-group, calendar/calendar-week vymyšlené — reálná místa DialerPage:1683 (phone-off/voicemail, grow ve Field) a InvoicePaymentDialog:177 (building-bank/wallet, grow) (D9). Composition „Calendar · Month/Week u titulu · New meeting primaryAction": nikde. KalendarPage = legacy .cbar + Segmented za .sp (vpravo) + .acrm-btn primary; TasksPage:693–710 = SectionTopBarSpacer · Segmented · primár jako poslední child, vědomě ne slot primaryAction (komentář: slot vkládá výplň a rozdělil by cluster); JournalPage:173–190 = titul · Segmented · Segmented · picker, bez primáru. Story sloučila dva reálné layouty do třetího (D8, R4, A19). „form field — grow" ≈ PortfolioFields:172 (Kvalifikovaný investor Ano/Ne), popisky „Visible to User/Team" vymyšlené.

Docs vs kód: usage.md „the registry lists .acrm-btn under this sub … drop it" — registr .acrm-btn nevede (věta zastaralá); „Put the control next to the title; the primary stays on the right" — appka má oba layouty (D15, R4). a11y.md sedí (Segmented.tsx:33 role=group + aria-label; Icon bez labelu dává aria-hidden, ds-icons.tsx:266).

1.5 Option chips — .acrm-optchips · .acrm-optchip

Inventura použití: 9 souborů — PruvodcePage.tsx:323,342, PruvodceFirmyPage.tsx:286,304,364, segment/TagFilter.tsx:50, segment/DealStageFilter.tsx:48, segment/OwnerFilter.tsx:48, segment/InteractionFilter.tsx:69, callwrapup/WrapupBand.tsx:45, callwrapup/QualGate.tsx:43. Kontejner .acrm-optchips používá jen WrapupBand; ostatních 6 používá .sgb-opts (builder-panels.css:73 — totožný flex/wrap/gap) (A13). Trailing „×" ve vybraném chipu: 6 souborů (Pruvodce, PruvodceFirmy, TagFilter, DealStageFilter, OwnerFilter, InteractionFilter) bez opory v CSS (A14, R2). aria-pressed chybí ve 3 (PruvodcePage, PruvodceFirmyPage, OwnerFilter). Single-choice chipy: OwnerFilter (bez role), QualGate (role=radio + aria-checked, roving tabindex, klávesová zkratka .kbd uvnitř chipu — dialer.css:10) (A15, R3). „Add" chip (PruvodceFirmyPage:364) = akce v šatech toggle, vedle input.sgb-input; uložené hodnoty jsou .acrm-tag, ne chipy (R5).

Stavová matice z kódu (inputs.css:718–753, dialer.css:462–476)

Story audit: States off/on = duplikát Defaultu. With icon ≈ InteractionFilter:66–76 (kanály), ale bez × a bez file:line (D10). Composition „wizard step" mění kontejner (.sgb-opts → .acrm-optchips) a hint (.sgb-hint → Field hint) oproti PruvodcePage:962; „own value — trailing add chip" ukazuje kombinaci option chipy + Add, která v PruvodceFirmyPage:355–367 nestojí (tam je input + Add, hodnoty jako .acrm-tag) (D10). Kbd v chipech existuje (QualGate:52), story říká opak (D11).

Docs vs kód: usage.md „PruvodceFirmyPage adds a trailing × — page-level extra" (ve skutečnosti 6 souborů); a11y.md „Chips without aria-pressed (PruvodceFirmyPage)" (ve skutečnosti 3); „Don't: chips as single-choice" vs 2 reálná místa, z toho QualGate ratifikovaný AD 13. 8. (D16, R3).

1.6 Napříč rodinou

• Popisek volby má čtyři sazby a tři barvy: .acrm-check-label --small (500 12px) / --fg-secondary; .acrm-radio a .acrm-switch-row literál 500 13px / --ink-800; .acrm-check-row 500 13px / --ink-700; .acrm-optchip 500 12.5px / --ink-700. Žádná přes token (AD 25. 8.: popisek pole = --label) (A17, R6).
• Disabled: index.usage.md to vede jako „known limit across the family". Podle nové metody to není limit, ale A-bug — appka disabled reálně posílá (switch 7/8, radio dialer, checkbox 6×) (A1–A3, D17).
• Validator: switch-not-acrm HARD, checkbox-native-no-ds a radio-native-no-ds WARN → na main dnes 7 živých nálezů (FollowupMail:49, AssignPopup:149/156, MeetingProductsSection:204, SegmentScreen:937/1071, PruvodcePage:1150) a nikoho nezastaví. Segmented a option chips nemají pravidlo žádné (A7, A10, A13).
• Web: legacy stories se stále zobrazují jako první příklad Default (D1); auto-výška iframů (D5 z Button review) na těchto stránkách nefunguje — screenshoty ukazují 1–3 řádky obsahu + ~250 px bílé (D18); věty „Focus: …" uvnitř stories jsou prose v plátně (D19).

2. Bug list — DS (registr, stories, docs, web)

3. Bug list — aplikace (kanon v kódu)

4. Rozhodnutí pro AD

5. Co teď

1. Bez dotazů (follow-up MR do acrm + DS): D1, D3, D5–D7, D9, D13, D14, D17–D19; A1–A11, A13 (kontejner), A18. Pořadí: nejdřív A1–A3 (stavy v CSS), pak stories States (D4, D6), pak kompozice jako porty s file:line, pak docs. Validator: radio-native-no-ds a checkbox-native-no-ds na HARD bez výjimek + scan packages/ui/src; nová pravidla segmented-raw, optchips-container, switch-pill-no-role, check-label-bespoke (bod 6 metody).
2. Čeká na AD: R1–R8 (jedno po druhém). Do rozhodnutí zůstávají stories Checkbox Variants/States (mixed), Option chips With icon/Composition a Segmented Composition ve stavu beta; nic z rodiny se neoznačuje approved.
3. Stories k odstranění nebo přepracování: z registru components--inputs--checkboxes, components--segmented-app-only-; zrušit components--radio--states, components--option-chips--states (duplikáty Defaultu); přepracovat components--checkbox--variants, components--checkbox--states, components--checkbox--composition, components--switch--states, components--switch--composition, components--segmented-control--with-icon-kbd, components--segmented-control--composition, components--option-chips--with-icon-kbd, components--option-chips--composition.
4. Ticket rodiny se nezavírá — až po merge oprav a AD potvrzení na webu (bod 7 metody).