I'm implementing keyboard accessibility in my React app. On :focus-visible pseudo class of a, input, button, textarea, select elements I apply outline border and that works fine. But problem is that tabbing through the app is not restricted to app content, as soon as I end tabbing through app content, it moves focus on browser's toolbars (bookmark toolbar, plugins toolbar and other browser options).
Questions:
how to restrict tabbing only on app content? So as soon as I press TAB first time, it should start for example from header navbar links, and as soon as I reach end (i.e. navigate through footer links) it should start again from beginning point (header navbar).
second issue: if modal is opened, keyboard accessibility is not locked/trapped only to modal content (and it should be) but as soon as I TAB through all modal elements, TABing continues on the rest of app, underneath opened modal. How can I disable TABing through rest of app, when modal is opened?