{"id":9715,"date":"2024-05-06T06:42:13","date_gmt":"2024-05-06T06:42:13","guid":{"rendered":"https:\/\/www.ntspl.co.in\/blog\/?p=9715"},"modified":"2024-09-12T06:56:00","modified_gmt":"2024-09-12T06:56:00","slug":"announcing-ionic-8-1","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/announcing-ionic-8-1\/","title":{"rendered":"Announcing Ionic 8.1"},"content":{"rendered":"<p>Hot on the heels of Ionic Framework 8.0 is version 8.1 packed with input, datetime, and accessibility improvements!<\/p>\n<p>Let\u2019s take a look at what\u2019s new<\/p>\n<h2 class=\"wp-block-heading\">Improved Datetime and Picker Screen Reader Experience<\/h2>\n<p>Ionic 8.1 introduces an improved experience for selecting items in the Datetime and Picker components with a screen reader.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td class=\"has-text-align-center\" data-align=\"center\"><strong>Ionic 8.0<\/strong><\/td>\n<td class=\"has-text-align-center\" data-align=\"center\"><strong>Ionic 8.1<\/strong><\/td>\n<\/tr>\n<tr>\n<td class=\"has-text-align-center\" data-align=\"center\"><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/picker-broken.mp4\" preload=\"none\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/td>\n<td class=\"has-text-align-center\" data-align=\"center\"><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/picker-working.mp4\" preload=\"none\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/api\/picker#accessibility\">Picker<\/a> documentation for more information.<\/p>\n<h2 class=\"wp-block-heading\">Improved Navigation Screen Reader Experience (experimental)<\/h2>\n<p>Also in Ionic 8.1 is an improved navigation experience for people navigating with screen readers.<\/p>\n<p>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.<\/p>\n<p>Ionic 8.1 introduces the experimental <code>focusManagerPriority<\/code> 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.<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td class=\"has-text-align-center\" data-align=\"center\"><strong>Ionic 8.0<\/strong><\/td>\n<td class=\"has-text-align-center\" data-align=\"center\"><strong>Ionic 8.1<\/strong><\/td>\n<\/tr>\n<tr>\n<td class=\"has-text-align-center\" data-align=\"center\"><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/focus-broken.mp4\" preload=\"none\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/td>\n<td class=\"has-text-align-center\" data-align=\"center\"><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/focus-working.mp4\" preload=\"none\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/developing\/managing-focus#assistive-technology-focus-management\">Focus Manager<\/a> documentation for more information.<\/p>\n<h2 class=\"wp-block-heading\">More Control over Modal and Popover Focus Trapping<\/h2>\n<p>Developers can now temporarily disable focus trapping on Modals and Popovers for improved compatibility with 3rd-party dialogs.<\/p>\n<p>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.<\/p>\n<p>The new <code>focusTrap<\/code> property on both Modal and Popover allows developers to temporarily disable Ionic\u2019s 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.<\/p>\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/api\/modal#focustrap\">Modal<\/a> and <a href=\"https:\/\/ionicframework.com\/docs\/api\/popover#focustrap\">Popover<\/a> documentation for more information.<\/p>\n<h2 class=\"wp-block-heading\">Configurable Content Slot Placement for Keyboard Navigation<\/h2>\n<p>The <code>fixed<\/code> slot in Content can now be configured to render before or after elements in the DOM using the new <code>fixedSlotPlacement<\/code> property.<\/p>\n<p>The <code>fixed<\/code> 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 <em>after<\/em> 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.<\/p>\n<p>Developers can configure the <code>fixedSlotPlacement<\/code> property so the <code>fixed<\/code> slot content is added <em>before<\/em> other content in the DOM, ensuring that it gets keyboard or screen reader focus before other elements.<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td class=\"has-text-align-center\" data-align=\"center\"><strong>Ionic 8.0<\/strong><\/td>\n<td class=\"has-text-align-center\" data-align=\"center\"><strong>Ionic 8.1<\/strong><\/td>\n<\/tr>\n<tr>\n<td class=\"has-text-align-center\" data-align=\"center\"><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/fixedslotcontent-broken.mp4\" preload=\"none\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/td>\n<td class=\"has-text-align-center\" data-align=\"center\"><video src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/fixedslotcontent-working.mp4\" preload=\"none\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/api\/content#fixed-content\">Content<\/a> and <a href=\"https:\/\/ionicframework.com\/docs\/api\/fab#relative-to-infinite-list\">FAB<\/a> documentation for more information.<\/p>\n<h2 class=\"wp-block-heading\">Clear Input Icon Customization<\/h2>\n<p>The clear icon in Input can now be customized using the <code>clearInputIcon<\/code> property.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6120\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-04-30-at-12.15.38%E2%80%AFPM.png\" alt=\"\" width=\"1014\" height=\"309\" \/><\/figure>\n<p>See the <a href=\"https:\/\/ionicframework.com\/docs\/api\/input#clearinputicon\">Input<\/a> documentation for more information.<\/p>\n<h2 class=\"wp-block-heading\">Datetime Role Information with Overlays<\/h2>\n<p>The <code>confirm<\/code> and <code>cancel<\/code> methods now pass the <code>'datetime-confirm'<\/code> and <code>'datetime-cancel'<\/code> roles, respectively, when dismissing the Modal or Popover the Datetime is presented in.<\/p>\n<p>Thanks to <a href=\"https:\/\/github.com\/Rahul-28\">Rahul-28<\/a> on GitHub for contributing this feature!<\/p>\n<p>Developers can install Ionic 8.1 from the <code>latest<\/code> tag on NPM:<\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\"># Ionic Angular apps\r\nnpm install @ionic\/angular@latest\r\n\r\n# Ionic React apps\r\nnpm install @ionic\/react@latest @ionic\/react-router@latest\r\n\r\n# Ionic Vue apps\r\nnpm install @ionic\/vue@latest @ionic\/vue-router@latest\r\n\r\n# All other Ionic apps\r\nnpm install @ionic\/core@latest<\/code><\/pre>\n<p>Thanks to everyone who made this release possible. We\u2019re immensely grateful for the community\u2019s continued contributions to improving Ionic. We\u2019ll see you soon for the next release!<\/p>\n<p>The post <a href=\"https:\/\/ionic.io\/blog\/announcing-ionic-8-1\">Announcing Ionic 8.1<\/a> appeared first on <a href=\"https:\/\/ionic.io\/blog\">Ionic Blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hot on the heels of Ionic Framework 8.0 is version 8.1 packed with input, datetime, and accessibility improvements! Let\u2019s take a look at what\u2019s 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":{"custom_meta_title":"Announcing latest Ionic version 8.1","meta_description":"Hot on the heels of Ionic Framework 8.0 is version 8.1 packed with input, datetime, and accessibility improvements!","meta_keyword":"","other_meta_tag":"<meta property=\"og:title\" content=\"Announcing latest Ionic version 8.1\">\r\n<meta property=\"og:site_name\" content=NTSPL>\r\n<meta property=\"og:url\" content=https:\/\/www.ntspl.co.in\/blog\/announcing-ionic-8-1\/>\r\n<meta property=\"og:description\" content=Hot on the heels of Ionic Framework 8.0 is version 8.1 packed with input, datetime, and accessibility improvements>\r\n<meta property=\"og:type\" content=\"Article\">\r\n<meta property=\"og:image\" content=https:\/\/www.ntspl.co.in\/blog\/wp-content\/uploads\/2024\/05\/Blog-01.jpg>\r\n\r\n<meta name=\"twitter:site\" content=\"@NTSPL\">\r\n<meta name=twitter:card content=\"summary\" \/>\r\n<meta name=twitter:description content=\"Hot on the heels of Ionic Framework 8.0 is version 8.1 packed with input, datetime, and accessibility improvements!\"\/>\r\n<meta name=twitter:title content=\"Announcing latest Ionic version 8.1\"\/>"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/9715"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=9715"}],"version-history":[{"count":4,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/9715\/revisions"}],"predecessor-version":[{"id":10529,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/9715\/revisions\/10529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/9740"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=9715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=9715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=9715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}