Był już challenge C++ (a nawet dwa ;)), był już challenge PHP… Czego brakuje? Oczywiście challenge'u JS! Chociaż to nie będzie taki czysty JS, tylko bardziej DOM, a więc dużo HTML5 i ARIA… Ale do rzeczy:
Jak wygląda pole select w formularzu każdy dobrze wie. Ale oczywiście klient jest niezadowolony z jego wyglądu, bo nie pasuje do reszty bombastycznej strony. Rozwiązania typu http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/ odpadają w przedbiegach, bo ostylowana ma być również lista, która się pokazuje po kliknięciu w pole. Zatem zostaje jedynie napisanie tego od podstaw.
I tutaj są dwa haczyki. Pierwszy: klient dostanie 800k zł dotacji z Unii, ale jedynie pod warunkiem, że strona będzie całkowicie dostępna dla wszystkich niepełnosprawnych i wykluczonych technologicznie (o użytkownikach mobilnych nie wspominając!). To de facto pociąga za sobą konieczność zmapowania 1:1 natywnego select i zapewnienia działania bez JS. Wypada się zaznajomić z ARIA oraz sposobem obsługi select z poziomu klawiatury. Drugi: pole to musi się normalnie przesyłać formularzem.
Na szczęście klient nie używa select[multiple], więc o tyle dobrze.
Podsumowując: należy odtworzyć pole typu select używając do tego HTML, CSS, JS i ARIA tak, żeby działało dokładnie tak samo, było rozpoznawane przez programy typu NVDA jako odpowiedniki select i dodatkowo, żeby można było ostylować każdy element tego pola.
Garść wskazówek:
- Celem zadania jest odtworzenie takiego pola http://www.kurshtml.edu.pl/html/lista_rozwijalna,formularze.html przy użyciu HTML, CSS, JS i ARIA. Przykładowe rozwiązanie tego zadania (od razu uprzedzam, że nie jest poprawne) wygląda tak: http://www.forumweb.pl/javascript/szukam-zadan-do-nauki-javascript/495060#495060 (a pod spodem lista rzeczy, na które warto zwrócić uwagę ;))
- Kwestia działania bez JS - są dwie szkoły. Pierwsza, o wiele łatwiejsza, to po prostu pokazanie normalnego select tym, którzy nie mają JS. Druga szkoła sugeruje takie napisanie tego pola, żeby JS de facto nie był wgl potrzebny (a przynajmniej jego rola sprowadzała się do kwestii typu obsługa klawiatury). Co do drugiej szkoły, mam taką oto podpowiedź: http://bzdety.comandeer.pl/no-js.html
- Kwestia obsługi klawiaturą. Polecam pobawić się tym polem na stronach KursHTML.edu.pl. Co się dzieje gdy naciskamy strzałkę w dół, w górę, spację itd (warto to sprawdzić zarówno dla rozwiniętego, jak i zwiniętego pola!). Co więcej - wszystkie pola formularzy reagują na TAB, więc nasze też musi. Wypada więc poczytać sobie o atrybucie [tabindex] ;)
- Kwestia wysyłania razem z formularzem. Znów są dwie szkoły. Pierwsza to po prostu napisanie prostej funkcji w JS, która by obslugiwała nasze pole i wszystkie zmiany w nim przenosiła na oryginalne pole select. Druga szkoła - znów odsyłam do http://bzdety.comandeer.pl/no-js.html ;)
- Kwestia stylowalności, czyli nagle chce mieć pole zielone, a nie czerwone i ma być to prosta czynność. Innymi słowy: cały wygląd najlepiej zamknąć w klasach CSS. Osobiście kierowałbym się tutaj metodologią BEM: https://en.bem.info/method/ ale w gruncie rzeczy nie jest to wgl istotne. Grunt, żeby cały wygląd dało się ustalić przez CSS. To wiąże się np także z tym, że rozwinięcie pola = nadanie mu klasy .open lub podobnej
- Kwestia dostępności - a więc "killer ficzer" zadania ;) Polecam tutaj zapoznać się z programem NVDA (http://www.nvaccess.org/) i posłuchać (tak, posłuchać) w jaki sposób przedstawia on pole select userowi - to jest ideał, do którego dążymy. Takie wyniki osiągnąć można tylko dzięki użyciu ARIA - odpowiednie przykłady znaleźć można na stronie OpenAjax Alliance (http://oaa-accessibility.org/examples/). Nie ukrywam, że jest to najtrudniejsza część zadania… ale bez niej to nie byłby challenge ;)
Dla bardzo ambitnych i tych, którym się bardzo nudzi: a może by tak opakować to w Web Components? ;) Krótki overview tej technologii: http://webroad.pl/javascript/3505-web-components + przykładowe komponenty (akurat oparte na Polymerze, też opisanym w tym artykule): https://github.com/Comandeer/dGUI http://dgui.comandeer.pl
Nie ukrywam, że tego typu rozwiązaniem jestem zainteresowany osobiście ;)
Powiedzmy sobie szczerze - to zadanie iście szatańskie i jeden z trudniejszych challenge'ów jeśli chodzi o JS/DOM w polskiej Sieci. Dodam jeszcze, że na razie poprawne rozwiązanie nie powstało (ale istnieje ;)).
