merge

Author: ShaneK

core/package-lock.json

@@ -50,7 +50,7 @@
     "@stencil/angular-output-target": "^0.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "0.10.7",
+    "@stencil/vue-output-target": "0.10.8",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/package.json

@@ -75,6 +75,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private currentBreakpoint?: number;
   private wrapperEl?: HTMLElement;
   private backdropEl?: HTMLIonBackdropElement;
+  private dragHandleEl?: HTMLButtonElement;
   private sortedBreakpoints?: number[];
   private keyboardOpenCallback?: () => void;
   private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => Promise<void>;
@@ -961,6 +962,18 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
   };
 
+  /**
+   * When the modal receives focus directly, pass focus to the handle
+   * if it exists and is focusable, otherwise let the focus trap handle it.
+   */
+  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) {
+      dragHandleEl.focus();
+    }
+  };
+
   private initViewTransitionListener() {
     // Only enable for iOS card modals when no custom animations are provided
     if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
@@ -1057,11 +1070,13 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const mode = getIonMode(this);
     const isCardModal = presentingElement !== undefined && mode === 'ios';
     const isHandleCycle = handleBehavior === 'cycle';
+    const isSheetModalWithHandle = isSheetModal && showHandle;
 
     return (
       <Host
         no-router
-        tabindex="-1"
+        // Allow the modal to be navigable when the handle is focusable
+        tabIndex={isHandleCycle && isSheetModalWithHandle ? 0 : -1}
         {...(htmlAttributes as any)}
         style={{
           zIndex: `${20000 + this.overlayIndex}`,
@@ -1081,6 +1096,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
         onIonModalWillPresent={this.onLifecycle}
         onIonModalWillDismiss={this.onLifecycle}
         onIonModalDidDismiss={this.onLifecycle}
+        onFocus={this.onModalFocus}
       >
         <ion-backdrop
           ref={(el) => (this.backdropEl = el)}
@@ -1113,6 +1129,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
               aria-label="Activate to adjust the size of the dialog overlaying the screen"
               onClick={isHandleCycle ? this.onHandleClick : undefined}
               part="handle"
+              ref={(el) => (this.dragHandleEl = el)}
             ></button>
           )}
           <slot></slot>

core/src/components/modal/modal.tsx

@@ -106,6 +106,12 @@
           >
             Present Sheet Modal (Scroll at any breakpoint)
           </button>
+          <button
+            id="cycle-scroll-no-backdrop"
+            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 })"

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

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test, dragElementBy } from '@utils/test/playwright';
+import { configs, dragElementBy, test } from '@utils/test/playwright';
 
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('sheet modal: rendering'), () => {
@@ -30,6 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
     });
+
     test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
       const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
@@ -42,6 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionModalDidDismiss.next();
     });
+
     test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
       const modal = page.locator('.custom-height');
@@ -54,6 +56,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(modal).toBeVisible();
     });
+
     test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
@@ -66,6 +69,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(input).toBeFocused();
     });
   });
+
   test.describe(title('sheet modal: setting the breakpoint'), () => {
     test.describe('sheet modal: invalid values', () => {
       let warnings: string[] = [];
@@ -88,18 +92,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const modal = page.locator('ion-modal');
         await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01));
       });
+
       test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => {
         const modal = page.locator('ion-modal');
         const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
         expect(breakpoint).toBe(0.25);
       });
+
       test('it should warn when setting an invalid breakpoint', async () => {
         expect(warnings.length).toBe(1);
         expect(warnings[0]).toBe(
           '[Ionic Warning]: [ion-modal] - Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.'
         );
       });
     });
+
     test.describe('sheet modal: valid values', () => {
       test.beforeEach(async ({ page }) => {
         await page.goto('/src/components/modal/test/sheet', config);
@@ -108,6 +115,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.click('#sheet-modal');
         await ionModalDidPresent.next();
       });
+
       test('should update the current breakpoint', async ({ page }) => {
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const modal = page.locator('.modal-sheet');
@@ -118,6 +126,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
         expect(breakpoint).toBe(0.5);
       });
+
       test('should emit ionBreakpointDidChange', async ({ page }) => {
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const modal = page.locator('.modal-sheet');
@@ -126,6 +135,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await ionBreakpointDidChange.next();
         expect(ionBreakpointDidChange.events.length).toBe(1);
       });
+
       test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => {
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const modal = page.locator('.modal-sheet');
@@ -134,6 +144,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await ionBreakpointDidChange.next();
         expect(ionBreakpointDidChange.events.length).toBe(1);
       });
+
       test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => {
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const header = page.locator('.modal-sheet ion-header');
@@ -211,6 +222,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       expect(updatedBreakpoint).toBe(0.5);
     });
   });
+
   test.describe(title('sheet modal: clicking the handle'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
@@ -285,4 +297,60 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75);
     });
   });
+
+  test.describe(title('sheet modal: accessibility'), () => {
+    test('it should allow focus on the drag handle from outside of the modal', async ({ page }) => {
+      // In this scenario, the modal is opened and has no backdrop, allowing
+      // the background content to be focused. We need to ensure that we can
+      // navigate to the drag handle using the keyboard and voiceover/talkback.
+      await page.goto('/src/components/modal/test/sheet', config);
+
+      await page.setContent(
+        `
+        <ion-content>
+          <button id="open-modal">Open</button>
+          <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+            <ion-content>
+              <ion-button id="dismiss" onclick="modal.dismiss();">Dismiss</ion-button>
+              <ion-button id="set-breakpoint">Set breakpoint</ion-button>
+            </ion-content>
+          </ion-modal>
+        </ion-content>
+        <script>
+          const modal = document.querySelector('ion-modal');
+          const setBreakpointButton = document.querySelector('#set-breakpoint');
+
+          modal.breakpoints = [0.25, 0.5, 1];
+          modal.handleBehavior = 'cycle';
+          modal.backdropBreakpoint = 1;
+          modal.backdropDismiss = false;
+          modal.expandToScroll = false;
+
+          setBreakpointButton.addEventListener('click', () => {
+            modal.setCurrentBreakpoint(0.5);
+          });
+        </script>
+      `,
+        config
+      );
+
+      const openButton = page.locator('#open-modal');
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await openButton.click();
+      await ionModalDidPresent.next();
+
+      const dragHandle = page.locator('ion-modal .modal-handle');
+      await expect(dragHandle).toBeVisible();
+
+      openButton.focus();
+      await expect(openButton).toBeFocused();
+
+      // Tab should now bring us to the drag handle
+      await page.keyboard.press('Tab');
+
+      await expect(dragHandle).toBeFocused();
+    });
+  });
 });