Ловушка фокуса — очень важная функция специальных возможностей в веб-приложении. В этом посте я сначала помогу вам понять, что это такое, затем почему это важно, и, наконец, я покажу, как быстро и легко добавить эту концепцию в ваши приложения Angular там, где это необходимо. И это довольно просто благодаря Angular CDK. Хорошо, давайте перейдем к делу.   https://youtu.be/JKHAjYJ5T2o?embedable=true  Доступность может быть немного трудной для понимания или даже для размышления, если вы тот, кто может легко видеть, слышать и использовать Интернет на разных устройствах, поэтому также может быть легко создавать вещи, которые не будут хорошо работать для тех, кто не мочь.  Что такое ловушка фокуса?  Ловушка фокуса — это функция, которая помогает этим людям улучшить впечатления. Это способ управления вниманием пользователя внутри данного контейнера.  Возьмем, к примеру, модальное окно. Если пользователь открывает модальное окно без управления фокусом, когда он начинает навигацию с помощью клавиатуры с помощью клавиши табуляции, элементы за модальным окном продолжают получать фокус. Это странно и не то, чего ожидает пользователь, не так ли? Нам нужно программно сфокусировать их внутри модального окна.  Но этого недостаточно; если мы остановимся здесь, просматривая модальное окно, в конечном итоге мы пройдем по всем элементам, на которых можно сделать фокус, а затем снова вернемся к фокусировке на элементах в исходном документе за модальным окном.  Вместо этого нам нужно зафиксировать фокус, чтобы, когда пользователь фокусируется на последнем элементе модального окна, фокус снова перемещался на первый фокусируемый элемент модального окна на следующей вкладке.  Хорошо, теперь, когда мы знаем, что такое ловушка фокуса, мы, вероятно, начинаем понимать, что для создания этой функциональности придется приложить некоторые усилия, верно?  Ну, не в 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  Хорошие новости: директива   имеет встроенную функцию автофокусировки. Мы можем использовать     . Этот ввод автоматически фокусирует первый фокусируемый элемент в директиве при его инициализации. По умолчанию оно имеет значение false, поэтому нам необходимо указать значение true. cdkTrapFocus cdkTrapFocusAutoCapture @Input   <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>  Теперь, когда мы открываем модальное окно, поле имени правильно сфокусировано, когда оно открыто. И при переходе по вкладке, когда мы доберемся до кнопки закрытия, мы вернемся к полю имени. Кроме того, если мы нажмем   +   для перехода назад, мы пойдем в обратном порядке, не выходя из модального окна.  shift tab  Таким образом, это не только очень полезно для всех пользователей, но и очень легко реализовать.  И последнее, на что следует обратить внимание: директива фокуса ловушки отслеживает последний сфокусированный элемент перед его инициализацией, поэтому, когда мы закрываем модальное окно, фокус возвращается на кнопку, которая его открыла.  Отлично, мы только что сэкономили массу работы и сделали наше модальное окно более доступным.  Хотите увидеть это в действии?  Ознакомьтесь с демонстрационным кодом и примерами этих методов в примере stackblitz ниже. Если у вас есть какие-либо вопросы или мысли, не стесняйтесь оставлять комментарии.   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.comComponent.html&embedable=true

Buy Me a Coffee

Этот звук создан на языке оригинала истории!

Слишком долго; Читать

Make resilience your competitive advantage

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

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Краткое введение в теорию мозга Больцмана

Утечка информации о системе Claude Sonnet 3.5: судебно-медицинский анализ

Раскрытие силы ИИ. Систематический обзор передовых методов: Краткое содержание и введение

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Краткое введение в теорию мозга Больцмана

Утечка информации о системе Claude Sonnet 3.5: судебно-медицинский анализ

Раскрытие силы ИИ. Систематический обзор передовых методов: Краткое содержание и введение

Руководство архитектора по созданию эталонной архитектуры для озера данных AI/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps