A focus trap is a very important accessibility feature within a web application. In this post, I’ll first help you understand what it is, then why it’s important, and finally, I’ll show how to quickly and easily add the concept within your Angular apps where needed. And, it’s pretty easy thanks to the Angular CDK. Alright, let’s get to it. https://youtu.be/JKHAjYJ5T2o?embedable=true Accessibility can be a little difficult to understand or even think about if you’re someone who can see, hear, and use the web easily with different devices, so it can also be easy to build things that don’t work well for those who can’t. What Is a Focus Trap? A focus trap is a feature that helps make experiences better for these folks. It’s a way of managing user focus within a given container. Take, for example, a modal. If a user opens a modal without managing focus, when they start navigating via the keyboard by using the tab key, items behind the modal continue to receive focus. This is weird and not what the user would expect, right? We need to programmatically focus them within the modal. But this isn’t enough; if we stop here, as we tab through the modal, eventually, we’ll tab through all of the focusable items, and then, we’ll be back to focusing items within the original document behind the modal again. What we need to do instead is trap the focus so that when the user focuses on the last item in the modal, the focus will be placed back on the first focusable element in the modal on the next tab. Ok, now that we know what a focus trap is, we are probably beginning to realize that there’s going to be some effort to create this functionality, right? Well, not within Angular. With the CDK, this is pretty easy using the cdkTrapFocus directive from the A11yModule. The Angular cdkTrapFocus Directive Let’s look at an example. Here, we have a web app for the Vans shoe brand. Up at the top, we have a sign-up button. When we click it, and then tab around, we can see focus is moving around the items in the background. Not what we want, right? Ok, let’s add the cdkTrapFocus. First thing we need to do in order to use it is, we need to import the A11yModule. sign-up-modal.component.ts import { A11yModule } from '@angular/cdk/a11y';

@Component({
    selector: 'app-sign-up-modal',
    ...
    imports: [A11yModule]
})
export class SignUpModalComponent {
} For those of you who are unfamiliar with this acronym, Ally is an abbreviation for the word accessibility. It comes from the concept that the word begins with an A, ends with a Y, and there are eleven characters in between. The Angular CDK has several accessibility features within its accessibility module, and the cdkTrapFocus directive is one of them. So, once we have it imported, we can now use it within the template. We just need to add it to an element that wraps our form. sign-up-modal.component.html <div cdkTrapFocus>
    <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form>
    ...
</div> Providing a Focus on Initialization With the cdkTrapFocusAutoCapture @Input Good news, the cdkTrapFocus directive has an auto-focus feature built right in. We can use the cdkTrapFocusAutoCapture @Input. This input will automatically focus the first focusable item within the directive when it’s initialized. It defaults to false, so we need to provide a value of true. <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
    <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form>
    ...
</div> Now, when we open the modal, the name field is properly focused when it’s opened. And, as we tab through, when we get to the close button, we’ll cycle back to the name field. Also, if we hit shift + tab to navigate backward, we’ll go in reverse order all without leaving the modal. So, not only is it super helpful for all users really, but it’s super easy to implement too. One last thing to note, the trap focus directive keeps track of the last focused element before its initialization, so when we close the modal, the focus is returned to the button that opened it. Nice, we just saved a ton of work and made our modal more accessible. Want to See It in Action? Check out the demo code and examples of these techniques in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true A focus trap is a very important accessibility feature within a web application. In this post, I’ll first help you understand what it is, then why it’s important, and finally, I’ll show how to quickly and easily add the concept within your Angular apps where needed. And, it’s pretty easy thanks to the Angular CDK. Alright, let’s get to it. https://youtu.be/JKHAjYJ5T2o?embedable=true https://youtu.be/JKHAjYJ5T2o?embedable=true Accessibility can be a little difficult to understand or even think about if you’re someone who can see, hear, and use the web easily with different devices, so it can also be easy to build things that don’t work well for those who can’t. What Is a Focus Trap? A focus trap is a feature that helps make experiences better for these folks. It’s a way of managing user focus within a given container. Take, for example, a modal. If a user opens a modal without managing focus, when they start navigating via the keyboard by using the tab key, items behind the modal continue to receive focus. This is weird and not what the user would expect, right? We need to programmatically focus them within the modal. But this isn’t enough; if we stop here, as we tab through the modal, eventually, we’ll tab through all of the focusable items, and then, we’ll be back to focusing items within the original document behind the modal again. What we need to do instead is trap the focus so that when the user focuses on the last item in the modal, the focus will be placed back on the first focusable element in the modal on the next tab. Ok, now that we know what a focus trap is, we are probably beginning to realize that there’s going to be some effort to create this functionality, right? Well, not within Angular. With the CDK, this is pretty easy using the cdkTrapFocus directive from the A11yModule . cdkTrapFocus A11yModule The Angular cdkTrapFocus Directive cdkTrapFocus Let’s look at an example. Here, we have a web app for the Vans shoe brand. Up at the top, we have a sign-up button. When we click it, and then tab around, we can see focus is moving around the items in the background. Not what we want, right? Ok, let’s add the cdkTrapFocus . First thing we need to do in order to use it is, we need to import the A11yModule . cdkTrapFocus A11yModule sign-up-modal.component.ts import { A11yModule } from '@angular/cdk/a11y';

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

@Component({
    selector: 'app-sign-up-modal',
    ...
    imports: [A11yModule]
})
export class SignUpModalComponent {
} For those of you who are unfamiliar with this acronym, Ally is an abbreviation for the word accessibility. It comes from the concept that the word begins with an A, ends with a Y, and there are eleven characters in between. The Angular CDK has several accessibility features within its accessibility module, and the cdkTrapFocus directive is one of them. cdkTrapFocus So, once we have it imported, we can now use it within the template. We just need to add it to an element that wraps our form. sign-up-modal.component.html <div cdkTrapFocus>
    <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form>
    ...
</div> <div cdkTrapFocus>
    <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form>
    ...
</div> Providing a Focus on Initialization With the cdkTrapFocusAutoCapture @Input cdkTrapFocusAutoCapture @Input Good news, the cdkTrapFocus directive has an auto-focus feature built right in. We can use the cdkTrapFocusAutoCapture @Input . This input will automatically focus the first focusable item within the directive when it’s initialized. It defaults to false, so we need to provide a value of true. cdkTrapFocus cdkTrapFocusAutoCapture @Input <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
    <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form>
    ...
</div> <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
    <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form>
    ...
</div> Now, when we open the modal, the name field is properly focused when it’s opened. And, as we tab through, when we get to the close button, we’ll cycle back to the name field. Also, if we hit shift + tab to navigate backward, we’ll go in reverse order all without leaving the modal. shift tab So, not only is it super helpful for all users really, but it’s super easy to implement too. One last thing to note, the trap focus directive keeps track of the last focused element before its initialization, so when we close the modal, the focus is returned to the button that opened it. Nice, we just saved a ton of work and made our modal more accessible. Want to See It in Action? Check out the demo code and examples of these techniques in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

CSS Masks Guide: Solutions to Common Design Challenges

Using The New HTML Search Element: Enhancing Semantics for Search Functionality 🔎

Buy Me a Coffee

Too Long; Didn't Read

Make resilience your competitive advantage

How to Use the Angular CDK Trap Focus Directive

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Contemporary CSS Techniques for Centering Items

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

3 Contemporary CSS Techniques for Centering Items

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps