Обеспечение доступности стало проще с помощью Angular CDK

Обеспечение доступности стало проще с помощью Angular CDK

От автора: выделение фокусом и навигацию с помощью клавиатуры необходимо учитывать при разработке для обеспечения доступности. Многие пользователи при браузинге полагаются на клавиатуру. Если пользователь не использует другие механизмы ввода, им будет сложно взаимодействовать и перемещаться по сайту, если клавиатура будет недоступна для навигации.

В этой статье мы рассмотрим, как Angular CDK упрощает добавление этой возможности. Мы создадим список поиска и добавим параметр для выбора элементов с помощью клавиатуры. Вот демо-версия, которая иллюстрирует наш окончательный результат:

Начнем с создания компонента списка:

Это простой компонент. Он получает элемент через ввод и отображает содержимое через ng-content. Теперь давайте создадим компонент приложения:

Это основа. Мы перебираем массив пользователей и отображаем имя пользователя. Теперь у нас есть список для поиска, поэтому давайте добавим взаимодействие с клавиатурой.

Класс ListKeyManager

ListKeyManager управляет активными параметрами в списке элементов на основе взаимодействия с клавиатурой. Он предназначен для использования с компонентами, которые соответствуют шаблону role=»menu» или role=»listbox».
Любой компонент, который использует ListKeyManager, должен выполнять следующее:

Создавать запрос @ViewChildren для управляемых параметров.

Инициализировать ListKeyManager, передавая параметры.

Передать события клавиатуры из управляемого компонента в ListKeyManager.

Существует две разновидности ListKeyManager, ActiveDescendantKeyManager и FocusKeyManager. Начнем с ActiveDescendantKeyManager.

Класс ActiveDescendantKeyManager

Мы создаем экземпляр класса ActiveDescendantKeyManager, который расширяет класс ListKeyManager и передает ему список запросов.

Мы также вызываем метод withWrap(), так как хотим закрыть ним список, когда в заданном направлении (циклическом) больше нет элементов.

Мы прослушиваем событие ввода через нажатие клавиши и передаем событие методу onKeyDown() объекта keyManager. Активный элемент будет определяться на основе навигации пользователя с помощью клавиатуры.

Когда пользователь нажимает кнопку ввода, мы можем захватить активный элемент с помощью свойства activeItem объекта keyManager.

Теперь давайте посмотрим, как настроить активный элемент. Каждый управляемый элемент должен реализовать интерфейс Highlightable:

Когда пользователь переходит, Angular вызывает метод setActiveStyles() для нового активного элемента опции и setInActiveStyles() для предыдущего элемента. Это позволяет нам составлять наш компонент.

Класс FocusKeyManager

Класс FocusKeyManager используется, когда элементы списка выделяются фокусом из браузера напрямую. Каждый управляемый элемент должен реализовывать интерфейс FocusableOption:

Когда пользователь перемещается по списку, Angular вызывает метод focus() для нового активного элемента списка.

Выделение фокусом через табуляцию

Пропуск элементов

У нас есть два варианта пропуска элементов во время навигации. Первый — установить для свойства элемента disabled значение true. Например:

Второй вариант — определить метод skipPredicate(). Например:

Режим typeahead

Мы можем включить режим typeahead. Это позволяет пользователям устанавливать активный элемент, введя его. Это означает, что когда пользователь выполняет поиск, первый результат автоматически устанавливается как активный. Давайте добавим функцию поиска.

Обратите внимание, что в режиме headhead мы должны реализовать метод getLabel().

И, конечно же, помимо всего этого вы можете динамически устанавливать активный элемент, вызывая такие методы, как: setFirstItemActive(), setLastItemActive(), updateActiveItem(index), setActiveItem(item) и многое другое.

FocusTrap

Возможно, наступит время, когда вы обнаружите, что вам необходимо выделить фокусом узел DOM — таким образом, когда пользователи нажимают Tab или Shift + Tab или нажимают на них, они не могут выйти из определенного цикла фокусируемых элементов (это полезно для модалов , например).

Директива cdkTrapFocus удерживает фокус при нажатии клавиши табуляции внутри элемента. Давайте рассмотрим пример:

Это все. Ниже приведены примеры:

ActiveDescendantKeyManager

FocusKeyManager

Автор: Netanel Basal

Источник: //netbasal.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: