How to loop through elements using Tab within a certain group of elements?

Question

Angular

I am setting up keyboard accessibility in an Angular 11 project.

There is such a use case when, when you click on an image, an enlarged image appears in the entire window and on the sides there are arrows to the right and left to scroll through other images (if any), a button to close this view and a button uploading an additional picture to this carousel and deleting the picture.
An area that is not filled with a picture or buttons, i.e. the background is just a color to darken the overlapped interface.

When you click on the "small" picture, an additional Angular component is called, in which a carousel with some buttons is displayed. This carousel appears on top of all items.
I made it so that with ngAfterViewInit, the focus in this carousel appears on the button I need.

The problem is that if you press Tab, then when the elements that can be focused on in this component run out, then the elements that are "under" the carousel will continue to be focused, i.e. the elements covered by the interface carousel will be focused.

This, in my opinion, is illogical behavior and I want the tab to be able to navigate through the elements only in the carousel that appears, which is a separate Angular component. How to do it?

Answer 1

Listen to Tab and disable default behavior