Как лучше всего блокировать фокусировку внутри модального компонента?

Question

Я создаю библиотеку компонентов в Angular 8. Прямо сейчас я создаю модальный компонент, который отображает диалоговое окно. Я хочу заблокировать фокус вне модального, чтобы пользователь мог фокусировать кнопки только внутри модального с помощью кнопки Tab. Как лучше всего это делать?

Содержание этого элемента управления может быть общим. Я имею в виду, пользователь может установить пользовательский контент. Таким образом, одно решение может быть установлено tabindex = -1 для элементов за пределами модальных, чтобы заблокировать его фокус.

Answer 1

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

Пример из документации:

<div class="my-inner-dialog-content" cdkTrapFocus>
  <!-- Tab and Shift + Tab will not leave this element. -->
</div>