bug(a11y): FocusTrap doesn't match browser/spec tab order in relation to Shadow DOM

However, the CDK `FocusTrap` machinery and the `_getFirstTabbableElement` / `_getLastTabbableElement` don't quite consider enough of the [sequential focus navigation]. That means that focus trapping in a dialog only works it there's at least one *focusable area* not in a Shadow DOM.

For performance reason, I don't think it's necessary to build up the full [sequential focus navigation order]. It'd probably be sufficient to use the [`"DOM"` selection mechanism](https://html.spec.whatwg.org/multipage/interaction.html#selection-mechanism-dom) i.e. find the first/last [suitable sequentially focusable area] element in [shadow including tree order] (host - shadow dom - light dom).

[shadow including tree order]: https://dom.spec.whatwg.org/#concept-shadow-including-tree-order
[suitable sequentially focusable area]: https://html.spec.whatwg.org/multipage/interaction.html#suitable-sequentially-focusable-area
[sequential navigation search algorithm]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-navigation-search-algorithm
[sequential focus navigation]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation
[sequential focus navigation order]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation-order

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-2e9thbl6?file=src%2Fmain.ts
Steps to reproduce:
1. Click in the preview window, preferably somewhere in the top part of the red area.
2. Tab to see the focus (outline) on the button in the red area
3. Tab to see the focus on the hidden trap element
4. Tab to see the focus (outline) on the button in the blue area
5. Keep Tabbing to see the focus actually get trapped

### Expected Behavior

The focus should remain trapped in the red area

### Actual Behavior

The focus moves past the red area, to an invisible item and then only gets trapped in the blue area.

### Environment