How to keep focus within modal dialog?

Question

I\'m developing an app with Angular and Semantic-UI. The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this p

Answer 1

I've been successful using Angular Material's A11yModule.

Using your favorite package manager install these to packages into your Angular app.

**"@angular/material": "^10.1.2"**

**"@angular/cdk": "^10.1.2"**

In your Angular module where you import the Angular Material modules add this:

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

In your component HTML apply the cdkTrapFocus directive to any parent element, example: div, form, etc.

Run the app, tabbing will now be contained within the decorated parent element.