Jetpack Compose

Role tlačítka na klikatelném prvku (Jetpack Compose)

Klikatelný Row nebo Card, který se chová jako tlačítko, ale technicky žádný Button není, TalkBack ohlásí jen jako obecně klikatelný prvek — ne jako „tlačítko". Bez výslovně nastavené role uživatel nepozná, že jde o akci srovnatelnou s tlačítkem.

1. Špatně — clickable bez role

Row(
    modifier = Modifier
        .fillMaxWidth()
        .clickable { onOpenDetail() }
        .padding(horizontal = 16.dp, vertical = 12.dp)
) {
    Text(title)
}

Funkčně klikatelné, ale sémanticky jen „klikatelné", ne „tlačítko".

2. Správně — role = Role.Button

Row(
    modifier = Modifier
        .fillMaxWidth()
        .clickable(
            onClickLabel = "Otevřít detail",
            role = Role.Button,
            onClick = { onOpenDetail() }
        )
        .padding(horizontal = 16.dp, vertical = 12.dp)
) {
    Text(title)
}

role je parametr přímo na Modifier.clickable. Nastaví typ prvku pro accessibility služby — TalkBack teď řádek ohlásí jako „tlačítko", se stejným gestem (dotyk/dvojité poklepání), jaké fungovalo i předtím. Role sama o sobě žádné gesto nemění, je to čistě otázka toho, co se ohlásí.

3. Když klikání zajišťuje jiný modifier

toggleable a selectable mají svůj vlastní parametr role stejným způsobem jako clickable. Pro cokoliv jiného (combinedClickable, vlastní pointerInput, nebo prvek bez vlastního klikání, který přesto potřebuje roli) jde roli nastavit přímo:

Modifier.semantics { role = Role.Button }

Proč to takhle je

  • role je čistě sémantická vlastnost — nemění gesto ani chování, jen to, co accessibility služba ohlásí a jak s prvkem případně dál pracuje.
  • Role je uzavřená množina hodnot definovaná frameworkem (Button, Checkbox, Switch, RadioButton, Tab, Image, DropdownList, ValuePicker, Carousel) — nejde vytvořit vlastní libovolnou roli, konstruktor třídy je privátní.
  • Který ze dvou zápisů použít, záleží na tom, odkud přichází klikání: clickable/toggleable/selectable mají roli jako vestavěný parametr, cokoliv jiného jde přes Modifier.semantics { role = ... }.

Pravidla

  • WCAG 4.1.2 (Název, role, hodnota) — role prvku musí být programově zjistitelná, ne jen odvoditelná z vizuálního vzhledu.

Zdroje

Štítky

Komentáře

Zatím zde nejsou žádné komentáře. Buďte první, kdo napíše svůj názor.

Přidat komentář k „Role tlačítka na klikatelném prvku (Jetpack Compose)“