A table of contents (tartalomjegyzék) segítségével a felhasználók áttekinthetik az oldalak szöveges tartalmát, és az őket érdeklő részekhez navigálhatnak.
Fejlesztői dokumentáció
Title: A komponens címe, alapértelmezetten Tartalom.
Link: Az oldalon belülre mutató linkek.
Indicator: Az aktív linket kiemelő keret.
A komponens két szintű hierarchiát támogat. A második szintet az Indented opcióval kontrollálható behúzással jelezzük.
A komponens interaktív elemei a design system sztenderd interakciós állapotainak logikáját követik.
A komponens linkjei külön interaktív területeket képeznek.
Ha görgetésnél egy szekció eléri a képernyő közepét, a szekcióhoz tartozó link automatikusan aktív állapotúra vált.
A tartalomjegyzék a szöveges tartalom jobb vagy bal oldalán, illetve a tartalomba ágyazva használható.
Mobileszközökön a tartalomba ágyazva használjuk, de érdemes megfontolni a tartalomjegyzék elrejtését.
A tartalomjegyzékben szereplő szekciók egyedi URI fragmenttel rendelkeznek, így ezek közvetlenül is megoszthatóak lesznek.
A komponenst érdemes úgynevezett sticky módon implementálni, azaz úgy, hogy kövesse a görgetést. Így bármikor elérhető lesz a felhasználó számra, ami növeli a használhatóságot.
Mivel a komponens élőben frissül, a felhasználó mindig tudni fogja, hol tart az oldalon belül.
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 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 komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A link tabbal fókuszálható és enterrel aktiválható.
A komponens navigációként van implementálva.
