Ionic 8.4 is here, packed with game-changing updates that take your app development experience to the next level! This latest release boasts exciting enhancements to core components like Alert, Select, and Segment, as well as accessibility improvements and developer experience boosts. Get ready to elevate your swift app development skills with these fresh features!

What's New in Ionic 8.4

Flexibility Unleashed: Select Modal Interface

Say goodbye to limitations! The new Modal interface for the Select component is here, offering users a fresh way to interact with Select menus. Gone are the days of being restricted to Alert, Action Sheet, or Popover interfaces. With this update, you can now present your Selects as full-screen modal views on mobile devices and inset views on tablets and desktops. Customize the Modal's appearance using the interfaceOptions property for a card or sheet modal.

Seamless Navigation: Swipeable Segment Content

Get ready to take your tab-like experiences to new heights with the introduction of Segment View and Segment Content! These two new components seamlessly integrate with the Segment component, enabling swipeable content that responds beautifully to user interactions. Users can now navigate between segments by swiping left or right within the content area or clicking on individual segment buttons for related content.

Menu Event Data: Enhanced Flexibility

When it comes to handling menu events, Ionic 8.4 has got you covered! The new role property in ionWillClose and ionDidClose events provides developers with valuable context about how a menu was closed. This includes information about whether the menu was closed by clicking the backdrop or pressing the esc key (role: 'backdrop'), a drag gesture (role: 'gesture'), or any other method (role: undefined).

Accessibility at Its Best: Alert Updates

In Ionic 8.4, we're committed to making your apps more accessible than ever! The Alert component has been updated with improved screen reader compatibility through enhanced heading structure. This includes:

  • The header continues to render as an

    element

  • If the header is undefined, the subHeader will render as an

  • When both header and subHeader are defined, header renders as an

    , and subHeader renders as an

These adjustments ensure a logical and accessible heading hierarchy for users relying on assistive technologies.

Other Improvements

In addition to these exciting new features, Ionic 8.4 includes a range of updates that enhance accessibility, developer experience, and functionality:

  • Accessibility Improvements: Inputs and overlays now offer improved screen reader support, including announcing helper and error text for inputs and resolving issues with aria-hidden on backdrops used by overlays.
  • Bug Fixes: A navigation issue in Vue where the wrong view was rendered when using router.go has been resolved. Thanks to bentleyo and xxllxhdj for their contributions!
  • Tabs Updates: Tabs and Tab Bar components now function as standalone components in Vue and React, eliminating the dependency on the router for simpler integration.

At Ionic, we're dedicated to providing a fast, accessible, and developer-friendly framework that evolves with your needs. We can't wait to see how you use these new features in your apps!