Accessibility: Nowe pseudoklasy

0:00Cześć w poprzednich lekcjach omówiliśmy już w jaki sposób

0:04stylować wskaźnik fokusu i jakie są różne tego techniki chciałem

0:08teraz powiedzieć jakie są pseudoklasy których możesz używać już teraz albo

0:13których będziesz mógł używać w przyszłości gdy przeglądarki zaimplementują faktyczny algorytm

0:17chodzi mi tutaj o focus-within i focus-visible focus-visible

0:21niestety nie jest jeszcze wspierany w przeglądarkach mogę tylko ci powiedzieć jak on

0:25docelowo ma działać natomiast co do focus-within możemy faktycznie zakodować

0:29jakiś przykład z tym generalnie zostaliśmy

0:33tutaj na tym etapie że mamy podkreślenie zrobione przez box-shadow no

0:38i po zaznaczeniu elementu on się też świeci na zielono co możemy zrobić więcej

0:43to dać użytkownikowi klawiatury znać bądź użytkownikowi wizualnemu

0:47tak naprawdę na jakim elemencie obecnie się znajdujemy w jakiej sekcji

0:51czyli jeżeli będziemy wybierali ciasto no to podświetli nam się że tutaj

0:55robimy ciasto jeżeli robimy tutaj składniki no to będą się podświetlały składniki

0:59i można to zrobić właśnie dzięki focus-within zrobimy

1:04sobie tutaj dodatkowy div div o klasie

1:08no powiedzmy container i tutaj

1:13całą tą sekcje z toppingsami i

1:17topping pickerem tak

1:22dobrze zamkniemy w tym divie no

1:28i na klasie container możemy użyć klasy focus-within

1:33pseudoklasy focus-within focus-within działa

1:37w ten sposób że jeżeli element wewnątrz tego kontenera będzie

1:42miał focus czyli na przykład jeżeli sfokusujemy tutaj ten

1:46input no to ten container możemy w tym momencie ostylować czyli

1:51jeśli damy na container focus-within nie visible ustawimy

1:55background na black

2:00darker wydaje mi się że zrobiłem taką zmienną w css-ie no

2:06to faktycznie widać że ten element się podświetlił jest teraz ciemniejszy

2:10niż był wcześniej tak oczywiście tutaj się nam ten box-shadow zapala

2:15poniżej ponieważ label before ma z-index na minus 1

2:19moglibyśmy to prawdopodobnie naprawić robiąc na

2:23pojedynczym inputcie z-index 1 zobaczmy

2:28czy to zadziałało zadziałało nie do końca zróbmy tutaj

2:32może na 0 na razie zobaczmy co z tego będzie ok

2:36i działa w porządku po prostu trzeba troszkę to dostosować no i faktycznie widzimy

2:40że jeżeli jesteśmy wewnątrz tej sekcji no to ona jest ciemniejsza niż cała reszta strony

2:44oczywiście mogli byśmy ją innym kolorem podświetlić natomiast żeby nie było tutaj tego szumu informacyjnego

2:48możemy to zrobić po prostu lekko ciemniejszym kolorem no i możemy taki

2:53container oczywiście też zrobić dla pozostałych elementów czyli tutaj

2:57do wyboru pizzy choose your dough też zrobimy

3:01tego diva zamykamy

3:05emoji też możemy zamknąć w ten container dlaczego nie zapisujemy

3:13no tutaj się nam style troszkę rozjechały po

3:17prostu podejrzewam że musielibyśmy tutaj zrobić container

3:23text-align center no

3:30i w tym momencie jest już taka sama sytuacja mamy tylko jednego diva więcej

3:34co semantycznie nie wpływa zupełnie na odczyt tych informacji przez

3:38czytnik ekranowy no i jeżeli wejdziemy do takiego diva no to on się nam podświetli możemy

3:42nawet na kontenerze zrobić sobie jakiś padding żeby było ładniej

3:46powiedzmy 0.5 rema no i border-radius

3:51powiedzmy na 0.2 rema zobaczmy jak to będzie wyglądało może

3:55troszkę ostrzejszy i może troszkę więcej tego paddingu damy jedynka i

4:00tutaj możemy dać pół i teraz gdy wchodzimy w tą sekcje no to

4:04faktycznie widzimy w której sekcji się znajdujemy jest to po

4:08prostu dodatkowy wskaźnik dla użytkownika który faktycznie widzi ale

4:12nawiguje się klawiaturą którą sekcję w tym momencie wypełniamy oczywiście jeżeli jesteśmy

4:16na sekcji z inputami typu radio no to tutaj musimy się strzałkami nawigować

4:21po tym jezeli jesteśmy na checkboxach no to się przez nie po prostu tabujemy więc

4:25to jest focus-within focus-visible niestety nie jest dobrze wspierany można

4:30go co prawda używać na mozilli z przedrostkiem moz-focusring natomiast

4:34jest to bardzo specyficzne dla tej jednej przeglądarki ideą focus-visible

4:38jest to że wskaźnik skupienia będzie pojawiał się tylko i wyłącznie

4:42jeśli ktoś nawiguje się klawiaturą czyli jeśli ja bym tutaj myszką

4:46wybrał to pepperoni no to używając klasy focus-visible

4:50nie podświetliło by mi się tutaj to na zielono nie miałbym tego oznaczenia ponieważ

4:54czasami nasze designy są skonstruowane w taki sposób że to się nie powinno po prostu dziać

4:59natomiast jeżeli ktoś poruszałby się faktycznie za pomocą klawiatury no to

5:03ten wskaźnik statusu dla fokusu byłby

5:07zreprezentowany w tym momencie są polyfille na focus-visible

5:11można też to zrobić własnoręcznie wykrywając po prostu w javascripcie nawigację

5:16tabulacją ustawiając sobie na przykład klasę na body

5:20i z keyboard navigation no i na podstawie tej klasy włączać bądź

5:24wyłączać wskaźnik focusu focus-within natomiast jest bardzo dobrze wspierany

5:29i generalnie nawet jeżeli nie będzie wspierany na danej przeglądarce to jest to tylko

5:33dodatek bez tego tak czy siak nasze interfejsy

5:37będą dostępne ponieważ możemy się nawigować i mamy zwykły wskaźnik

5:42fokusu tak czy siak to co chciałbym żebyście wynieśli z tej lekcji jest to

5:46że w css-ie ciągle powstają nowe standardy nowe pseudoklasy

5:51pseudoelementy które też mają duży wpływ na accessibility i na przykład jak focus-within

5:55czy focus-visible focus-within możecie używać już dzisiaj focus-visible być może

5:59w przyszłości bądź za pomocą polyfilli w przeglądarce