Сделайте любой список удобным для ввода с клавиатуры за считанные минуты
Превратите список Angular, доступный только с помощью щелчка, в полнофункциональный список с настоящей клавиатурной навигацией... быстро. 👕 Создано для разработчиков Angular. Приобретите футболку Shieldworks «United by Craft» → https://shop.briantree.se/products/sh...
В этой пошаговой сборке мы добавляем Angular CDK ListKeyManager для поддержки клавиш ArrowUp/ArrowDown, Home/End и кругового переноса, сохраняя при этом корректную семантику ARIA и управление фокусом. Вы увидите базовый шаблон и директиву, подключите обработку нажатия клавиш, реализуете ListKeyManagerOption и Highlightable, настроите менеджер при фокусе/щелчке, чтобы избежать проблемы «двойного нажатия», и завершите работу с функциями для опытных пользователей, и всё это с минимальным количеством кода. Идеально подходит для улучшения доступности (a11y), пользовательского опыта и производительности в современных приложениях Angular. ------------------------------------------------------------------------------ 🔔 Подпишитесь, чтобы смотреть больше обучающих материалов и советов по Angular → [🔗 https://www.youtube.com/c/briantreese...
] 👍 Поставьте лайк этому видео, если оно оказалось вам полезным — это очень поможет каналу! ------------------------------------------------------------------------------ 🔗 Ссылки на демо-версии: До (https://stackblitz.com/edit/stackblit...)
После (https://stackblitz.com/edit/stackblit...)
----------------------------------------------------------------------------- 📚 Дополнительные ресурсы: Angular CDK A11y: Обзор ListKeyManager (официальная документация) https://material.angular.dev/cdk/a11y...
WAI-ARIA Authoring Practices: Listbox Pattern https://www.w3.org/WAI/ARIA/apg/patte...
Руководство по практике ARIA (APG) https://www.w3.org/WAI/ARIA/apg/
Мой курс «Angular: стилизация приложений»: https://www.pluralsight.com/courses/a...
Мой курс «Angular на практике: беззонное обнаружение изменений»: https://app.pluralsight.com/library/c...
------------------------------------------------------------------------------ 📖 Главы: 0:00 - Введение 0:28 - Почему важна навигация с помощью клавиатуры: пробел в доступности 1:01 - Базовый обзор: Разметка и фокусировка списка в Angular 3:15 - Цель: добавить навигацию с помощью стрелок с помощью Angular CDK ListKeyManager 3:47 — Подключение: Обработка нажатий клавиш с помощью ListKeyManager 6:13 — Обновление директивы Option: Реализация ListKeyManagerOption и Highlightable 7:33 — Синхронизация состояний: Обновление applyListState для хуков CDK 8:49 — Устранение неполадок Focus: Подготовка менеджера к нажатию и фокусу 10:55 — Бонус: Круговой перенос + Home/End в одну строку 11:50 — Краткое содержание и дальнейшие шаги: От списка к доступному списку ------------------------------------------------------------------------------ 🧰 Об используемых инструментах Мы используем ListKeyManager из Angular CDK для управления навигацией с помощью клавиатуры по пользовательским пунктам списка, не требуя дополнительной логики управления со стрелками. Директива реализует ListKeyManagerOption и Highlightable для отображения меток и активных стилей. Мы сохраняем роли ARIA (listbox/option), управляем focus/tabindex и улучшаем UX с помощью .withWrap() и .withHomeAndEnd(). ------------------------------------------------------------------------------ #angular #angularcdk #accessibility #a11y #webdev #frontend #typescript #aria #ux #listbox
