Saavutettavuus
SidebarNavItem-komponentin active-prop asettaa aina automaattisesti aria-current="page"-attribuutin ruudunlukijoille.
Jos sivulla on useita navigaatioelementtejä (HTML:n nav-elementti), navigaatio on hyvä erottaa muista navigaatioelementeistä
aria-label-attribuutilla.
Sidebariin tulostettavia linkki- ja painikelistoja voi tarvittaessa erottaa visuaalisesti lisäämällä listojen väliin hr-tagin (ks. esimerkki alla). Mikäli ruudunlukijan ei haluta lukevan erotinviivaa tulee siihen lisätä aria-hidden-attribuutti.
Esimerkit
Rakenne ja tilat
const ExampleSidebar = () => {
const [isOpen, setIsOpen] = useState(true);
const [isOverlay, setIsOverlay] = useState(false);
const showAlert = (e) => {
if (e) e.preventDefault();
alert("onClick event");
};
const toggleOverlay = (event, value) => {
event.stopPropagation();
setIsOpen(value);
};
return (
<>
<Button appearance="outline" onClick={(e) => toggleOverlay(e, !isOpen)} className="kds-mb-6 kds-mr-2">
Näytä / piilota valikko
</Button>
<Button appearance="outline" onClick={() => setIsOverlay(!isOverlay)} className="kds-mb-6">
Overlay-tila: {isOverlay ? "päällä" : "pois päältä"}
</Button>
<div className="kds-overflow-hidden kds-h-screen kds-bg-light">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoKela height="48" width="83" />
</a>
}
className="kds-relative kds-h-full" // Vain esimerkille
title="Sivun tai palvelun otsikko"
description="Sivun tai palvelun lyhyt kuvausteksti"
closeLabel="Sulje navigaatiovalikko"
aria-label="Päänavigaatio"
isOpen={isOpen}
isOverlay={isOverlay}
toggle={() => setIsOpen(!isOpen)}
navLinks={
<>
<SidebarNavHeading>Painikkeet</SidebarNavHeading>
<SidebarNavItem
as="button"
linkColor
iconBefore={<IconCaretLeft />}
preventAutoToggle
onClick={() => showAlert()}
>
Takaisin
</SidebarNavItem>
<ul>
<li>
<SidebarNavItem as="button">Painike</SidebarNavItem>
</li>
<li>
<SidebarNavItem as="button" onClick={(e) => showAlert(e)}>
Painike + onClick
</SidebarNavItem>
</li>
<li>
<SidebarNavItem as="button" active>
Painike - aktiivinen sivu
</SidebarNavItem>
</li>
<li>
<SidebarNavItem as="button" iconAfter={<IconCaretRight />}>
Painike kuvakkeella
</SidebarNavItem>
</li>
<li>
<SidebarNavItem as="button" disabled>
Painike, estetty
</SidebarNavItem>
</li>
<li>
<SidebarNavItem as="button" active disabled>
Painike, aktiivinen ja estetty
</SidebarNavItem>
</li>
</ul>
<hr aria-hidden />
<SidebarNavHeading>Linkit</SidebarNavHeading>
<ul>
<li>
<SidebarNavItem href="#">Linkki</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" onClick={(e) => showAlert(e)}>
Linkki + onClick
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" active>
Linkki, aktiivinen
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" iconAfter={<IconCaretRight />}>
Linkki kuvakkeella
</SidebarNavItem>
</li>
<li>
<SidebarNavItem disabled>Linkki, estetty</SidebarNavItem>
</li>
<li>
<SidebarNavItem active disabled>
Linkki, aktiivinen ja estetty
</SidebarNavItem>
</li>
</ul>
</>
}
/>
</div>
</>
);
};
render(<ExampleSidebar />);
Esimerkki komponentin soveltamisesta OmaKelassa. Esimerkki ei vastaa täysin palvelun todellista navigaatiota.
const SimpleSidebar = () => {
const [isOpen, setIsOpen] = useState(true);
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} className="kds-mb-6">
Näytä / piilota valikko
</Button>
<div className="kds-overflow-hidden kds-h-screen kds-bg-light">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoOmaKela height="48" width="175" />
</a>
}
className="kds-relative kds-h-full" // Vain dokumentaation esimerkille
aria-label="Päänavigaatio"
isOpen={isOpen}
toggle={() => setIsOpen(!isOpen)}
navLinks={
<>
<SidebarNavHeading>Katsele omia tietoja</SidebarNavHeading>
<ul>
<li>
<SidebarNavItem href="#" active>
Etusivu
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Omat etuudet</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Omat asiakirjat</SidebarNavItem>
</li>
</ul>
<SidebarNavHeading className="mt-4">Asioi verkossa</SidebarNavHeading>
<ul>
<li>
<SidebarNavItem href="#">Tee hakemus</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Lähetä liite</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Ilmoita muutoksista</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Valita päätöksestä</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Asioi toisen henkilön puolesta</SidebarNavItem>
</li>
</ul>
</>
}
/>
</div>
</>
);
};
render(<SimpleSidebar />);
Esimerkki komponentin soveltamisesta kela.fi:ssä. Esimerkki ei vastaa täysin palvelun todellista navigaatiota.
const ExampleSidebar = () => {
return (
<>
<div className="kds-overflow-hidden kds-h-screen kds-bg-light">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoKela height="48" width="83" />
</a>
}
className="kds-relative kds-h-full" // Vain KDS-dokumentaation esimerkille
aria-label="Päänavigaatio"
isOpen={true}
toggle={() => false}
navLinks={
<>
<SidebarNavItem
as="button"
linkColor
iconBefore={<IconCaretLeft />}
preventAutoToggle
onClick={() => console.log("click")}
>
Henkilöasiakkaat
</SidebarNavItem>
<SidebarNavItem href="#" className="kds-mt-2">
<SidebarNavHeading>Asumisen tuet</SidebarNavHeading>
</SidebarNavItem>
<ul>
<li>
<SidebarNavItem href="#" iconAfter={<IconCaretRight />}>
Yleinen asumistuki
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" iconAfter={<IconCaretRight />}>
Mihin menoihin tukea voi saada?
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" iconAfter={<IconCaretRight />}>
Miten tulot vaikuttavat?
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Milloin asumistuki täytyy tarkistaa?</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#">Muut asumisen tuet</SidebarNavItem>
</li>
</ul>
<hr />
<SidebarNavHeading className="kds-mt-8">Oikopolut</SidebarNavHeading>
<ul>
<li>
<SidebarNavItem href="#" iconBefore={<IconPersonsCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Asiakaspalvelu
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" iconBefore={<IconDecoInfoCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Hakemuksesta päätökseen
</SidebarNavItem>
</li>
<li>
<SidebarNavItem href="#" iconBefore={<IconMathCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Laskurit
</SidebarNavItem>
</li>
</ul>
</>
}
/>
</div>
</>
);
};
render(<ExampleSidebar />);
Esimerkki Sidebarin käytöstä Nav-komponenttien kanssa.
const ExampleSidebar = () => {
return (
<>
<div className="kds-overflow-hidden kds-h-screen kds-bg-light">
<Sidebar
logo={
<a href="#" aria-label="Etusivulle" className="kds-inline-block">
<LogoKela height="48" width="83" />
</a>
}
className="kds-relative kds-h-full" // Vain KDS-dokumentaation esimerkille
aria-label="Päänavigaatio"
isOpen={true}
toggle={() => false}
>
<Nav>
<NavHeading className="kds-mt-2">
<NavLink href="#" active>
Asumisen tuet
</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#">Yleinen asumistuki</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Mihin menoihin tukea voi saada?</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Miten tulot vaikuttavat</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Milloin asumistuki täytyy tarkistaa?</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#">Muut asumisen tuet</NavLink>
</NavListItem>
</NavList>
<hr />
<NavHeading className="kds-mt-8">
<NavLink>Oikopolut</NavLink>
</NavHeading>
<NavList>
<NavListItem>
<NavLink href="#" iconBefore={<IconPersonsCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Asiakaspalvelu
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconBefore={<IconDecoInfoCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Hakemuksesta päätökseen
</NavLink>
</NavListItem>
<NavListItem>
<NavLink href="#" iconBefore={<IconMathCircle color={COLOR_KELA_BLUE_60} size="m" />}>
Kaskurit
</NavLink>
</NavListItem>
</NavList>
</Nav>
</SideBar>
</div>
</>
);
};
render(<ExampleSidebar />);