OverlayNav

Esikatselu

Käyttötarkoitus

OverlayNav-komponenttia käytetään sisällön päälle avautuvan navigaatiovalikon toteuttamiseen (esimerkiksi mobiilinavigaatio).

Komponentti on tarkoitettu käytettäväksi silloin, kun ei käytetä Sidebar-sivupohjaa, joka tarjoaa mobiilinavigaation valmiina.

Komponentti toimii kehyksenä navigaatiolle. Varsinainen navigaatiorakenne toteutetaan valikon sisään sijoitettavalla Nav-komponentilla.

Saavutettavuus

Komponentti huomioi saavutettavuuden seuraavasti:

• Kohdistus ja ruudunlukijan virtuaalikursori lukitaan valikon sisään, kun valikko on auki.
• Valikko suljetaan Esc-painikkeella (onClose).
• Komponentin renderöimää HTML-elementtiä voi muokata as-propin avulla (oletuksena section).

Sovelluksen vastuulle jää huomioida seuraavat asiat:

• Kohdistus säilytetään valikon avaavassa painikkeessa ja palautetaan siihen valikon sulkeutuessa, jos kohdistus on valikon sisällä (onClose-funktion tai useEffect-hookin avulla).
• Valikko voidaan määritellä alueeksi lisäämällä sille aria-label silloin kun valikko sisältää muitakin elementtejä kuin vain navigaation.
• Määrittää insideElements-propin avulla ne HTML-elementit, joihin valikon lisäksi pääsee kohdistamaan.
• Valikon avaavalle painikkeelle tulee lisätä aria-controls- ja aria-expanded-attribuutit.
• Valikon sisäisten elementtien saavutettavuus.

Esimerkit

Alla olevat esimerkit on muokattu koodieditoria varten, joten ne eivät täysin vastaa todellista käyttöä. Oikea esimerkki löytyy Sivupohja Tab-navigaatiolla -sivulta tai tämän sivun yläreunasta, kun selainikkunan leveyttä pienennetään.

Kun isOverlay-prop on asetettu arvoon true (oletus), navigaatiovalikko sijoittuu sivun sisällön päälle ja peittää koko ruudun.

Navigaatiovalikon etäisyyttä sivun yläreunasta voi säätää useResizeObserver-hookin avulla. Hookin avulla etäisyyden voi asettaa esimerkiksi seuraamaan dynaamisesti ylätunnisteen korkeutta.

Navigaatiovalikon toteuttaminen

Yksinkertaistettu esimerkki navigaatiovalikon avaamisesta ja sulkemisesta.

Navigaatiovalikon yhdistäminen ylätunnisteeseen

Esimerkki navigaatiovalikon yhdistämisestä MainBar-komponentilla toteutettuun ylätunnisteeseen.

Huom! Poista oikeasta toteutuksesta kds-relative ja kds-absolute määritykset ja välitä offset-propilla valikon etäisyys sivun yläreunasta.

Huomioitavaa selaintuessa

• OverlayNav käyttää inert-attribuuttia selaimissa, jotka tukevat sitä. Muut käyttävät aria-hidden-attribuuttia. Lue lisää: inert(Avautuu uuteen välilehteen)

Tunnetut ongelmat

• Firefoxilla valikkoelementti saa virheellisesti kohdistuksen, kun elementit eivät mahdu kerralla näkyviin ja valikko saa vierityspalkin.
  • Tämä on korjattu tilapäisesti siirtämällä kohdistus joko ensimmäiseen elementtiin valikossa tai sen ulkopuolelle.
  • Käytä focusOutRef-proppia, jos kohdistus siirtyy väärään elementtiin, kun kohdistus poistuu valikosta.