diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index b6e79dfa2a..6fcdd72694 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -91,6 +91,26 @@ overscroll-behavior-y: contain; } +.alert-checkbox-label, +.alert-radio-label { + /** + * This allows long words to wrap to the next line + * instead of flowing outside of the container. + * + * The "anywhere" keyword should be used instead + * of the "break-word" keyword since the parent + * container is using flexbox. Flex relies on min-content and + * max-content intrinsic sizes to structure the layout. Flex will + * wrap content only until it reaches its min-content intrinsic size + * which in this case is equal to the longest word in this container. + * "break-word" does not shrink the min-content intrinsic size + * of the flex item which causes the long word to still overflow. + * "anywhere" on the other hand does shrink the min-content + * intrinsic size which allows the long word to wrap to the next line. + */ + overflow-wrap: anywhere; +} + /** * Scrollbars on mobile devices will be hidden. * Users can still scroll the content by swiping. diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts index 3b2c69ce87..eecb703d6f 100644 --- a/core/src/components/alert/test/a11y/alert.e2e.ts +++ b/core/src/components/alert/test/a11y/alert.e2e.ts @@ -28,6 +28,59 @@ const testAria = async ( expect(ariaDescribedBy).toBe(expectedAriaDescribedBy); }; +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('alert: text wrapping'), () => { + test('should break on words and white spaces for radios', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + const alert = page.locator('ion-alert'); + + await alert.evaluate((el: HTMLIonAlertElement) => el.present()); + await ionAlertDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`)); + }); + test('should break on words and white spaces for checkboxes', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + const alert = page.locator('ion-alert'); + + await alert.evaluate((el: HTMLIonAlertElement) => el.present()); + await ionAlertDidPresent.next(); + + await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`)); + }); + }); +}); + configs({ directions: ['ltr'] }).forEach(({ config, title }) => { test.describe(title('alert: a11y'), () => { test.beforeEach(async ({ page }) => { diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6f15e73829 Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a1b2c2690d Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..10ee5c877b Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..83fb54fb47 Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e72d336b21 Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..23ff47068b Binary files /dev/null and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png differ