Как использовать директиву Angular CDK Trap Focus

Ловушка фокуса — очень важная функция специальных возможностей в веб-приложении. В этом посте я сначала помогу вам понять, что это такое, затем почему это важно, и, наконец, я покажу, как быстро и легко добавить эту концепцию в ваши приложения Angular там, где это необходимо. И это довольно просто благодаря Angular CDK. Хорошо, давайте перейдем к делу.

Доступность может быть немного трудной для понимания или даже для размышления, если вы тот, кто может легко видеть, слышать и использовать Интернет на разных устройствах, поэтому также может быть легко создавать вещи, которые не будут хорошо работать для тех, кто не мочь.

Что такое ловушка фокуса?

Ловушка фокуса — это функция, которая помогает этим людям улучшить впечатления. Это способ управления вниманием пользователя внутри данного контейнера.

Возьмем, к примеру, модальное окно. Если пользователь открывает модальное окно без управления фокусом, когда он начинает навигацию с помощью клавиатуры с помощью клавиши табуляции, элементы за модальным окном продолжают получать фокус. Это странно и не то, чего ожидает пользователь, не так ли? Нам нужно программно сфокусировать их внутри модального окна.

Но этого недостаточно; если мы остановимся здесь, просматривая модальное окно, в конечном итоге мы пройдем по всем элементам, на которых можно сделать фокус, а затем снова вернемся к фокусировке на элементах в исходном документе за модальным окном.

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

Хорошо, теперь, когда мы знаем, что такое ловушка фокуса, мы, вероятно, начинаем понимать, что для создания этой функциональности придется приложить некоторые усилия, верно?

Ну, не в Angular. С CDK это довольно легко сделать, используя директиву cdkTrapFocus из A11yModule .

Директива Angular cdkTrapFocus

Давайте посмотрим на пример. Здесь у нас есть веб-приложение для обувного бренда Vans.

Вверху у нас есть кнопка регистрации. Когда мы щелкаем по нему, а затем перемещаемся по нему, мы видим, что фокус перемещается вокруг элементов на заднем плане.

Не то, что мы хотим, верно?

Хорошо, давайте добавим cdkTrapFocus . Первое, что нам нужно сделать, чтобы его использовать, — это импортировать A11yModule .

регистрация-modal.comComponent.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }

Для тех из вас, кто не знаком с этой аббревиатурой, Ally — это аббревиатура слова «доступность». Оно исходит из концепции, что слово начинается с буквы А, заканчивается на букву Y, а между ними одиннадцать символов.

Angular CDK имеет несколько функций специальных возможностей в своем модуле специальных возможностей, и директива cdkTrapFocus — одна из них.

Итак, как только мы его импортируем, мы можем использовать его в шаблоне. Нам просто нужно добавить его в элемент, который обертывает нашу форму.

регистрация-modal.comComponent.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 

Фокус на инициализации с помощью cdkTrapFocusAutoCapture @Input

Хорошие новости: директива cdkTrapFocus имеет встроенную функцию автофокусировки. Мы можем использовать cdkTrapFocusAutoCapture @Input . Этот ввод автоматически фокусирует первый фокусируемый элемент в директиве при его инициализации. По умолчанию оно имеет значение false, поэтому нам необходимо указать значение true.

 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>

Теперь, когда мы открываем модальное окно, поле имени правильно сфокусировано, когда оно открыто. И при переходе по вкладке, когда мы доберемся до кнопки закрытия, мы вернемся к полю имени. Кроме того, если мы нажмем shift + tab для перехода назад, мы пойдем в обратном порядке, не выходя из модального окна.

Таким образом, это не только очень полезно для всех пользователей, но и очень легко реализовать.

И последнее, на что следует обратить внимание: директива фокуса ловушки отслеживает последний сфокусированный элемент перед его инициализацией, поэтому, когда мы закрываем модальное окно, фокус возвращается на кнопку, которая его открыла.

Отлично, мы только что сэкономили массу работы и сделали наше модальное окно более доступным.

Хотите увидеть это в действии?

Ознакомьтесь с демонстрационным кодом и примерами этих методов в примере stackblitz ниже. Если у вас есть какие-либо вопросы или мысли, не стесняйтесь оставлять комментарии.