Announcing Ionic 8.1

Hot on the heels of Ionic Framework 8.0 is version 8.1 packed with input, datetime, and accessibility improvements!

Let’s take a look at what’s new 👇

Improved Datetime and Picker Screen Reader Experience

Ionic 8.1 introduces an improved experience for selecting items in the Datetime and Picker components with a screen reader.

In previous versions of Ionic, selecting values inside of a wheel picker required users to swipe past every single value. It also meant that it was impossible to switch between columns in a Picker just by swiping left or right. This limitation sometimes resulted in users accidentally selecting the wrong value when trying to move between columns.

We improved this by allowing users to swipe left and right to navigate between columns when using a screen reader. Users can either double tap and slide up and down or swipe up and down to select different values within a single column.

We also added the ability to press the Page Up or Page Down keys to scroll by more than one option at a time in a column. These new behaviors join the existing set of keyboard behaviors in Picker.

Ionic 8.0	Ionic 8.1

See the Picker documentation for more information.

Improved Navigation Screen Reader Experience (experimental)

Also in Ionic 8.1 is an improved navigation experience for people navigating with screen readers.

In traditional native applications, screen readers are informed anytime a navigation event occurs. This allows screen readers to move focus from Page A to Page B so users are focused on the correct area of the application. Unfortunately, this same functionality does not exist by default for single page web applications. This means that screen readers would often focus on the wrong content when navigating in Ionic applications.

Ionic 8.1 introduces the experimental focusManagerPriority global configuration. When this opt-in feature is enabled, developers can specify which areas of each page Ionic should move focus to when a navigation event occurs. Focus will also be returned to the element that presented the page when navigating back.

Ionic 8.0	Ionic 8.1

See the Focus Manager documentation for more information.

More Control over Modal and Popover Focus Trapping

Developers can now temporarily disable focus trapping on Modals and Popovers for improved compatibility with 3rd-party dialogs.

Focus is trapped inside of overlays such as Modal and Popover. This improves the experience for people navigating with a keyboard or a screen reader because it means the focus remains in the context that is presented. Without focus trapping it would be possible for focus to move to an element underneath a Modal or Popover which would be confusing.

The new focusTrap property on both Modal and Popover allows developers to temporarily disable Ionic’s focus trapping so they can manually move focus to the new 3rd-party dialog. Developers should re-enable focus trapping afterwards so users continue to have an accessible experience when using Modals and Popovers.

See the Modal and Popover documentation for more information.

Configurable Content Slot Placement for Keyboard Navigation

The fixed slot in Content can now be configured to render before or after elements in the DOM using the new fixedSlotPlacement property.

The fixed slot is useful for adding components that overlay the rest of the content such as a Floating Action Button. However, this content was always added after other content in the DOM. As a result, it was always the last thing to receive keyboard or screen reader focus. This meant that these elements were inaccessible when using Infinite Scroll because new content would be appended as the user scrolled.

Developers can configure the fixedSlotPlacement property so the fixed slot content is added before other content in the DOM, ensuring that it gets keyboard or screen reader focus before other elements.

Ionic 8.0	Ionic 8.1

See the Content and FAB documentation for more information.

Clear Input Icon Customization

The clear icon in Input can now be customized using the clearInputIcon property.

See the Input documentation for more information.

Datetime Role Information with Overlays

The confirm and cancel methods now pass the 'datetime-confirm' and 'datetime-cancel' roles, respectively, when dismissing the Modal or Popover the Datetime is presented in.

Thanks to Rahul-28 on GitHub for contributing this feature!

Developers can install Ionic 8.1 from the latest tag on NPM:

# Ionic Angular apps
npm install @ionic/angular@latest

# Ionic React apps
npm install @ionic/react@latest @ionic/react-router@latest

# Ionic Vue apps
npm install @ionic/vue@latest @ionic/vue-router@latest

# All other Ionic apps
npm install @ionic/core@latest

Thanks to everyone who made this release possible. We’re immensely grateful for the community’s continued contributions to improving Ionic. We’ll see you soon for the next release!