merge release-8.5.3 (#30331)

v8.5.3

Author: brandyscarney

CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.3](https://github.com/ionic-team/ionic-framework/compare/v8.5.2...v8.5.3) (2025-04-02)
+
+
+### Bug Fixes
+
+* **checkbox:** ensure proper visual selection when navigating via VoiceOver in Safari ([#30300](https://github.com/ionic-team/ionic-framework/issues/30300)) ([bb40a1e](https://github.com/ionic-team/ionic-framework/commit/bb40a1efe71237075db2f3a536eddeb1d7c400fc))
+* **overlays:** exclude backdrop-no-scroll class when toast is presented ([#30123](https://github.com/ionic-team/ionic-framework/issues/30123)) ([7f9df7a](https://github.com/ionic-team/ionic-framework/commit/7f9df7a89447e51eec0b1516069a1e0c9c9722e5)), closes [#30112](https://github.com/ionic-team/ionic-framework/issues/30112)
+* **segment-view:** prevent vertical scroll while scrolling horizontally ([#30276](https://github.com/ionic-team/ionic-framework/issues/30276)) ([105796f](https://github.com/ionic-team/ionic-framework/commit/105796f6bc8f961f58ecbb101285097cc86891c0)), closes [#30001](https://github.com/ionic-team/ionic-framework/issues/30001)
+
+
+
+
+
 ## [8.5.2](https://github.com/ionic-team/ionic-framework/compare/v8.5.1...v8.5.2) (2025-03-26)
 
 

core/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.3](https://github.com/ionic-team/ionic-framework/compare/v8.5.2...v8.5.3) (2025-04-02)
+
+
+### Bug Fixes
+
+* **checkbox:** ensure proper visual selection when navigating via VoiceOver in Safari ([#30300](https://github.com/ionic-team/ionic-framework/issues/30300)) ([bb40a1e](https://github.com/ionic-team/ionic-framework/commit/bb40a1efe71237075db2f3a536eddeb1d7c400fc))
+* **overlays:** exclude backdrop-no-scroll class when toast is presented ([#30123](https://github.com/ionic-team/ionic-framework/issues/30123)) ([7f9df7a](https://github.com/ionic-team/ionic-framework/commit/7f9df7a89447e51eec0b1516069a1e0c9c9722e5)), closes [#30112](https://github.com/ionic-team/ionic-framework/issues/30112)
+* **segment-view:** prevent vertical scroll while scrolling horizontally ([#30276](https://github.com/ionic-team/ionic-framework/issues/30276)) ([105796f](https://github.com/ionic-team/ionic-framework/commit/105796f6bc8f961f58ecbb101285097cc86891c0)), closes [#30001](https://github.com/ionic-team/ionic-framework/issues/30001)
+
+
+
+
+
 ## [8.5.2](https://github.com/ionic-team/ionic-framework/compare/v8.5.1...v8.5.2) (2025-03-26)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.2",
+  "version": "8.5.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/package.json

@@ -111,8 +111,12 @@
   display: none;
 }
 
+/**
+ * The native input must be hidden with display instead of visibility or 
+ * aria-hidden to avoid accessibility issues with nested interactive elements.
+ */
 input {
-  @include visually-hidden();
+  display: none;
 }
 
 .native-wrapper {

core/src/components/checkbox/checkbox.scss

@@ -31,6 +31,7 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 })
 export class Checkbox implements ComponentInterface {
   private inputId = `ion-cb-${checkboxIds++}`;
+  private inputLabelId = `${this.inputId}-lbl`;
   private helperTextId = `${this.inputId}-helper-text`;
   private errorTextId = `${this.inputId}-error-text`;
   private focusEl?: HTMLElement;
@@ -181,6 +182,15 @@ export class Checkbox implements ComponentInterface {
     this.ionBlur.emit();
   };
 
+  private onKeyDown = (ev: KeyboardEvent) => {
+    if (ev.key === ' ') {
+      ev.preventDefault();
+      if (!this.disabled) {
+        this.toggleChecked(ev);
+      }
+    }
+  };
+
   private onClick = (ev: MouseEvent) => {
     if (this.disabled) {
       return;
@@ -250,14 +260,23 @@ export class Checkbox implements ComponentInterface {
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
+    const hasLabelContent = el.textContent !== '';
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
+    // The host element must have a checkbox role to ensure proper VoiceOver
+    // support in Safari for accessibility.
     return (
       <Host
+        role="checkbox"
         aria-checked={indeterminate ? 'mixed' : `${checked}`}
         aria-describedby={this.getHintTextID()}
         aria-invalid={this.getHintTextID() === this.errorTextId}
+        aria-labelledby={hasLabelContent ? this.inputLabelId : null}
+        aria-label={inheritedAttributes['aria-label'] || null}
+        aria-disabled={disabled ? 'true' : null}
+        tabindex={disabled ? undefined : 0}
+        onKeyDown={this.onKeyDown}
         class={createColorClasses(color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
@@ -271,7 +290,7 @@ export class Checkbox implements ComponentInterface {
         })}
         onClick={this.onClick}
       >
-        <label class="checkbox-wrapper">
+        <label class="checkbox-wrapper" htmlFor={inputId}>
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
@@ -291,9 +310,10 @@ export class Checkbox implements ComponentInterface {
           <div
             class={{
               'label-text-wrapper': true,
-              'label-text-wrapper-hidden': el.textContent === '',
+              'label-text-wrapper-hidden': !hasLabelContent,
             }}
             part="label"
+            id={this.inputLabelId}
           >
             <slot></slot>
             {this.renderHintText()}

core/src/components/checkbox/checkbox.tsx

@@ -8,4 +8,17 @@
   flex-shrink: 0;
 
   width: 100%;
+
+  overflow-y: scroll;
+
+  /* Hide scrollbar in Firefox */
+  scrollbar-width: none;
+
+  /* Hide scrollbar in IE and Edge */
+  -ms-overflow-style: none;
+
+  /* Hide scrollbar in webkit */
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }

core/src/components/segment-content/segment-content.scss

@@ -520,10 +520,9 @@ export const present = async <OverlayPresentOptions>(
    */
   if (overlay.el.tagName !== 'ION-TOAST') {
     setRootAriaHidden(true);
+    document.body.classList.add(BACKDROP_NO_SCROLL);
   }
 
-  document.body.classList.add(BACKDROP_NO_SCROLL);
-
   hideUnderlyingOverlaysFromScreenReaders(overlay.el);
   hideAnimatingOverlayFromScreenReaders(overlay.el);
 
@@ -646,6 +645,8 @@ export const dismiss = async <OverlayDismissOptions>(
     return false;
   }
 
+  const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];
+
   /**
    * For accessibility, toasts lack focus traps and don’t receive
    * `aria-hidden` on the root element when presented.
@@ -657,7 +658,7 @@ export const dismiss = async <OverlayDismissOptions>(
    * Therefore, we must remove `aria-hidden` from the root element
    * when the last non-toast overlay is dismissed.
    */
-  const overlaysNotToast = doc !== undefined ? getPresentedOverlays(doc).filter((o) => o.tagName !== 'ION-TOAST') : [];
+  const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
 
   const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
 

core/src/utils/overlays.ts

@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Modal } from '../../../components/modal/modal';
+import { Toast } from '../../../components/toast/toast';
 
 describe('overlays: scroll blocking', () => {
   it('should not block scroll when the overlay is created', async () => {
@@ -85,4 +86,25 @@ describe('overlays: scroll blocking', () => {
 
     expect(body).not.toHaveClass('backdrop-no-scroll');
   });
+
+  // Fixes https://github.com/ionic-team/ionic-framework/issues/30112
+  it('should not block scroll when the toast overlay is presented', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `
+        <ion-toast></ion-toast>
+      `,
+    });
+
+    const toast = page.body.querySelector('ion-toast')!;
+    const body = page.doc.querySelector('body')!;
+
+    await toast.present();
+
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+
+    await toast.dismiss();
+
+    expect(body).not.toHaveClass('backdrop-no-scroll');
+  });
 });

core/src/utils/test/overlays/overlays-scroll-blocking.spec.ts

@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.5.2"
+  "version": "8.5.3"
 }