Trapping Focus with Angular CDK

Image by Christophe Blouin from Pixabay

Scenario

We have three buttons within a section and we want the third button to receive the initial focus. and subsequently we want to keep focus in the section as the user tabs around to the different buttons.

Approach

First add the Angular CDK A11yModule to the application imports.

@NgModule({imports: [BrowserModule, FormsModule, A11yModule],declarations: [AppComponent],bootstrap: [AppComponent],})

Next markup the the section with the directive cdkTrapFocus and mark up Button 3 with cdkFocusRegionStart . When the section is focused the Button 3 button will receive focus first.

<h1>CDK Trap Section with Focus Regions</h1><section cdkTrapFocus>
<button>Button 1</button>
<button>Button 2</button>
<button cdkFocusRegionStart>Button 3</button>
</section>

Demo

Related Concepts

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Demystifying Taiga UI root component: portals pattern in Angular

Effective Docker HealthChecks For Node.js

Know ng-template, ng-container, ng-TemplateOutlet, ng-content in Angular

Arrow function: What is this? (1)

What Should You Eat Before Running? https://t.co/vtO7aZbEfC https://t.co/I3GoxOPLRr

How To Create An App From Scratch in 10 Steps

Export files and metadata from Documentum

JavaScript The Early Lessons: Naming Conventions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Customizing the Typography Theme for a Packaged Angular Component

Framework wars: React vs Angular

BazaIT | Made with Angular JS

BazaIT | Made with Angular JS

React vs Angular