fix(modal): add conditional tabIndex for handle cycling

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -967,7 +967,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
     return (
       <Host
         no-router
-        tabindex="-1"
+        // Allow the modal to be navigable when the handle is focusable
+        tabIndex={!isHandleCycle ? -1 : 0}
         {...(htmlAttributes as any)}
         style={{
           zIndex: `${20000 + this.overlayIndex}`,

core/src/components/modal/test/sheet/index.html

@@ -106,6 +106,12 @@
           >
             Present Sheet Modal (Scroll at any breakpoint)
           </button>
+          <button
+            id="scroll-at-edge-modal"
+            onclick="presentModal({ handleBehavior: 'cycle', backdropBreakpoint: 1, backdropDismiss: false, initialBreakpoint: 0.5, breakpoints: [0, 0.25, 0.5, 0.75, 1], expandToScroll: false })"
+          >
+            Present Sheet Modal (Cycle Handle, Scroll at any breakpoint)
+          </button>
           <button
             id="custom-backdrop-modal"
             onclick="presentModal({ backdropBreakpoint: 0.5, initialBreakpoint: 0.5 })"