fix(modal): keep dialog focus on present with cycle handle

When a sheet modal defaults handleBehavior to "cycle" (the new default on
major-9.0), the host becomes focusable and onModalFocus redirects focus to
the drag handle. present() (from #31260) focuses the shadow-DOM dialog
wrapper for screen readers, but that focus event is retargeted to the host
at the shadow boundary, so onModalFocus saw ev.target === el and bounced
focus onto the handle. The wrapper never kept focus, which failed the
"focus the sheet modal wrapper on present" e2e on Firefox.

Guard the redirect on el.shadowRoot.activeElement being null, which is true
only when the host itself was focused directly (e.g. tabbing into the
modal). When present() focuses the wrapper, activeElement is the wrapper, so
the redirect is skipped and the dialog focus is left intact. Tabbing to the
handle from outside still works.

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -1188,8 +1188,16 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   private onModalFocus = (ev: FocusEvent) => {
     const { dragHandleEl, el } = this;
-    // Only handle focus if the modal itself was focused (not a child element)
-    if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+    /**
+     * Focus events from inside the shadow DOM are retargeted to the host, so
+     * `ev.target === el` is also true when a shadow child (e.g. the dialog
+     * wrapper that present() focuses for screen readers) receives focus. Use
+     * the shadow root's activeElement to tell the two apart: it is `null` only
+     * when the host itself was focused directly (e.g. tabbing into the modal).
+     * Only then do we redirect to the handle, so the wrapper focus set on
+     * present() is left intact.
+     */
+    if (ev.target === el && el.shadowRoot?.activeElement == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
       dragHandleEl.focus();
     }
   };