Nano Hash - криптовалюты, майнинг, программирование

Angular CDK A11y Focus Trap Modal / Dialog

Я отчаянно пытаюсь найти лучший способ добавить ловушку фокуса к моим модальным окнам в приложении Angular 8. Я наткнулся на Angular Material CDK и установил его только для инструментов доступности A11y, но не могу понять, как импортировать и использовать FocusTrap или FocusTrapFactory.

Если я попытаюсь добавить что-либо в свои массивы declarations или imports в @NgModule, я получу ошибки. Установка их в providers ничего не дает. Я ничего не вижу в документах о том, как конкретно использовать инструменты. У меня есть cdkTrapFocus, cdkFocusRegionStart, cdkFocusInitial и cdkFocusRegionEnd все настройки в модальном режиме для тестирования. Я пытался просто вставить FocusTrap и FocusTrapFactory только в свой компонент, но все равно ничего.

https://v8.material.angular.io/cdk/a11y/overview#focuskeymanager

Кто-нибудь успешно заставил это работать? Если мне придется использовать инструменты Material UI, чтобы заставить это работать, мне нужно будет найти другое решение для захвата фокуса в моих модальных окнах.

Мой модальный компонент представляет собой простую оболочку, которую я открываю и закрываю по идентификатору службы. В основном это похоже на: https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box

angular dialog modal-dialog accessibility
03.03.2021

Ответы:


1

Все, что вам нужно сделать, это импортировать модуль a11y из cdk в ваш модуль.

import { A11yModule } from '@angular/cdk/a11y';

imports: [
   A11yModule  
]

Добавьте директивы ловушки фокуса к родительскому элементу содержимого вашего диалога, например. ниже фрагмент, где проецируется содержимое диалога

  <div class="modal-content" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
    <ng-template *ngTemplateOutlet="contentsTmpl"></ng-template>
  </div>

Редактировать

до тех пор, пока угловые элементы dom охватывают модальное содержимое, оно должно работать. https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box есть проблема.

Модальное окно, созданное в этом примере, всегда находится в dom, а захват автофокуса cdk захватывает фокус, когда элемент создается или уничтожается!

Я немного изменил этот пример, и он отлично работает. Вот модифицированный пример

https://stackblitz.com/edit/angular-8-custom-modal-dialog-focustrap?file=src/app/_modal/modal.component.html

03.03.2021
  • Эй, Суреш, спасибо за ответ. Я все еще не могу заставить его работать. Я вижу, как Angular внедряет свои якоря-ловушки фокуса в DOM, но ничего кроме этого не делает. Независимо от того, в какой модуль я его импортирую или на какие элементы я помещаю директивы. Еще ничего. Возможно ли это, потому что у меня есть модальный модуль внутри моего модуля приложения, и модальный модуль использует ng-content для отображения содержимого каждого модального окна, которое я вызываю? 04.03.2021
  • до тех пор, пока угловые элементы dom охватывают модальное содержимое, оно должно работать. отредактировали ответ выше, чтобы изменить модальный пример, посмотрите 05.03.2021
  • Эй, Суреш, большое спасибо! Это прекрасно работает. Мне нравится ваша идея установки открытого логического значения. Благодарю вас! Кроме того, если это поможет кому-то еще; Я также смог добавить A11yModule в свой app.module и использовать cdk, чтобы установить первоначальный фокус на определенном вводе. Работает очень хорошо. 05.03.2021
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..