How would you prevent elements outside of your modal dialog or menu from receiving focus?

<script src="path/to/ally.min.js"></script>
<script>
  ally.maintain.disabled({
    filter: '#my-dialog-element'
  });
</script>

Do you know which elements are focusable or tabbable? ally.js does and does it's best to hide that complexity behind simple to use APIs.

See What does "focusable" mean.

• Identify and absorb browser differences regarding which elements are considered focusable
• Query the DOM for all focusable or tabbable (keyboard focusable) elements
• Trap focus navigation in a DOM sub-tree
• Make DOM sub-trees inert (i.e. disable all element's from being focused or interacted with)
• Identify focused elements and focus changes within ShadowDOM
• Provide :focus-within (CSS Selectors Level 4) Polyfill
• Determine how focus changed (keyboard, mouse, script) to apply different focus outline styles
• Determine when an element is focusable and visible in the viewport to prevent browsers from scrolling the element into view upon focus

Have a look at the API documentation.