Az accordiont tartalmak elrejtésére és felfedésére használjuk.
Fejlesztői dokumentáció
Header: Tartalmazza az accordion címét és vezérli a panel nyitását és zárását.
Toggle icon: A panel nyitott vagy zárt állapotát jelző ikon.
Panel: Az accordion tartalmát befoglaló panel.
Az accordion két méretben – small és large – használható. A méretet a rendelkezésre álló helynek megfelelően kell kiválasztani.
Az accordion háttér nélkül és háttérrel is használható, annak függvényében, hogy milyen befoglaló elemen jelenik meg.
Az accordion alapértelmezetten collapsed (zárt) állapotú. A panel rejtett, az ikon lefelé mutat.
Expanded (nyitott) állapotban a panel nyitott, az ikon felfelé mutat.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
Az accordion minimális szélessége 10rem.
Ha a header hosszabb, mint a rendelkezésre álló hely, akkor több sorba törik. A panel magassága a benne lévő tartalomhoz igazodik.
A header teljes területe interaktív.
Az accordionok nyitása és zárása nem befolyásolja a többi accordiont. Egyszerre több accordion is nyitva lehet.
A tartalmilag összetartozó accordionokat a háttér összevonásával csoportosíthatjuk.
Az accordionokkal áttekinthetőbbé tehetjük a tartalmakat. Általában akkor használjuk, ha nagy mennyiségű információt kell közölnünk, de korlátozott a rendelkezésre álló hely.
Világos és egyértelmű headerek segítségével a felhasználó gyorsan áttekintheti a teljes tartalmat, és megnyithatja a számára szükséges részeket.
Bármennyire világos és egyértelmű az accordion headerje, lesznek olyan felhasználók, akik nem fogják megnyitni, ezért nélkülözhetetlen, kritikus információk megjelenítésére nem használjuk.
Ha a felhasználónak minden információt el kell olvasnia, az accordionok megnyitása felesleges interakciós költséggel jár.
Ilyen esetekben érdemes inkább címsorokkal és alcímekkel tagolni a tartalmat.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A design system sztenderd interakciós állapotainak logikája miatt a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
A kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A header interaktív, és Tabbal lehet navigálni közöttük. Ha a panel interakív elemet tartalmaz, az interaktív elem is bekerül a tabsorrendbe.
Az accordiont Enterrel vagy Space-szel lehet aktiválni.
Az accordionok állapotát programatikusan kezeljük, ezért az ikonokat elrejtjük az asszisztív technológiák elől.
Az accordion headerje gombba van ágyazva, amelynek az aria-expanded attribútumát tartjuk karban. A gombot és a panelt a gombon található aria-controls attribútum köti össze.
Az accordion headerjének heading levelje a heading-level attribútummal állítható, így az oldal hierarchiájába illeszkedően lehet őket használni.
Az accordion groupok listaelemként vannak implementálva. Ha csak egy accordion van, azt nem kell listába tenni.
