𝗣𝗿𝗼𝗯𝗹𝗲𝗺𝘆 𝘇 𝗳𝗼𝗸𝘂𝘀𝗲𝗺 𝗶 𝘄𝘀𝗽𝗼𝗿𝗰𝗶𝗲 𝗽𝗿𝗼𝗰𝗲𝘀𝘂 𝗱𝗼𝗽𝗿𝗮𝗰𝗼𝘄𝘆𝘄𝗮𝗻𝗶𝗮

Budowanie dostępnych komponentów React wymaga czegoś więcej niż tylko dodawania etykiet ARIA. Musisz zadbać o to, jak użytkownicy poruszają się po interfejsie za pomocą klawiatury.

Dokumentuję moją drogę budowania w pełni dostępnego komponentu nawigacji od zera. W tej aktualizacji skupiam się na dwóch głównych obszarach: naprawie pułapek klawiaturowych oraz przygotowaniu pod sprawniejsze zarządzanie podlistami.

𝗡𝗮𝗽𝗿𝗮𝘄𝗮 𝗽𝘂ł𝗮𝗽𝗸𝗶 𝗸𝗹𝗮𝘄𝗶𝗮𝘁𝘂𝗿𝗼𝘄𝗲𝗷

Częsty problem pojawia się, gdy użytkownik używa Shift+Tab, aby wejść do komponentu. Jeśli fokus trafi na link wewnątrz zamkniętej podlisty, obramowanie fokusu znika. Jest to poważny błąd dla użytkowników korzystających z klawiatury.

Aby to naprawić, wprowadziłem zmianę w logice:

• Jeśli fokus trafi na ostatni element zamkniętej podlisty, system przenosi go na przycisk nadrzędny w górnym rzędzie. • Używam nasłuchiwania zdarzenia onFocus, aby wykryć ten konkretny ruch. • Logika sprawdza, czy skupiony element jest ostatnim elementem w komponencie. • Jeśli tak, kod identyfikuje przodka w górnym rzędzie i przenosi tam fokus.

Dzięki temu użytkownik nigdy nie traci miejsca, w którym się znajdował w interfejsie.

𝗞𝗼𝗻𝗳𝗶𝗴𝘂𝗿𝗮𝗰𝗷𝗮 𝘇𝗮𝗺𝘆𝗸𝗮𝗻𝗶𝗮 𝗽𝗼𝗱𝗹𝗶𝘀𝘁

Gdy zamykasz menu nadrzędne, wszystkie otwarte podmenu wewnątrz niego również powinny zostać zamknięte. Tak działają standardowe systemy operacyjne.

Aby obsłużyć to w React bez powodowania problemów z wydajnością, uniknąłem przechowywania funkcji w stanie (state). Przechowywanie funkcji w stanie powoduje niepotrzebne ponowne renderowanie (re-renders).

Zamiast tego zastosowałem inne podejście:

• Utworzyłem Map wewnątrz useRef. • Ta mapa (Map) przechowuje funkcje zamykania powiązane z elementami nadrzędnymi. • Gdy żądana jest tablica nawigacji, system wstrzykuje te funkcje do obiektów. • Użycie Ref pozwala mi na aktualizację tych połączeń bez wywoływania ponownego renderowania.

Stanowi to fundament pod czyste i przewidywalne zachowanie menu.

Następnie zaimplementuję właściwą logikę zamykania tych podlist.

Źródło: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l