The content of an inline ion-modal is unmounted when closed. We recommend avoiding features such as autofocus here as it can cause assistive technologies to jump between two interactive contexts without warning the user. Assistive technologies may not focus outside the sheet modal by default due to the usage of aria-modal.
When the backdrop is disabled, users will be able to interact with elements outside the sheet modal using a pointer or keyboard. The backdrop will be disabled up to and including the specified backdropBreakpoint and will be enabled after it. Sheet modals allow users to interact with content behind the modal when the backdropBreakpoint property is used. Sheet modals that have had their backdrop disabled by the backdropBreakpoint property are not subject to focus trapping. For applications that present multiple stacked modals, focus will be trapped on the modal that was presented last. Users can focus other interactive elements inside the modal but will never be able to focus interactive elements outside the modal while the modal is presented. When a modal is presented, focus will be trapped inside of the presented modal. However, manually moving focus outside of a modal is not supported in Ionic for modals that have focus trapping enabled. This applies even when the backdrop is disabled in sheet modals using the backdropBreakpoint property.Īssistive technologies will not limit navigation to the modal element's contents if developers manually move focus. As a result, using gestures that move to the next or previous items may not focus elements outside of the modal. This attribute can cause assistive technologies to limit navigation to the modal element's contents. Modals have the aria-modal attribute applied. If the modal contains additional descriptive text, this text can be associated with the modal by using aria-describedby. If the modal is using ion-title, the text inside can be used to label the modal itself by setting aria-labelledby on ion-modal. As a result, developers must properly label their modals. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. The backdropBreakpoint property can be used to customize the point at which the ion-backdrop will begin to fade in. An initialBreakpoint value of 0.25 would not be valid as 0.25 does not exist in the breakpoints array.
Given a breakpoints value of, an initialBreakpoint value of 0.5 would be valid as 0.5 is in the breakpoints array. The initialBreakpoint value must also exist in the breakpoints array. The initialBreakpoint property is required so that the sheet modal knows which breakpoint to start at when presenting. Note that the modal cannot be dismissed on swipe if no 0 breakpoint is included, but it can still be dismissed by pressing Esc or the hardware back button. When the modal is swiped to 0%, the modal will be automatically dismissed. A breakpoints property of would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. The breakpoints property accepts an array which states each breakpoint that the sheet can snap to when swiped. To create a sheet modal, developers need to set the breakpoints and initialBreakpoint properties on ion-modal. Developers can create a sheet modal effect similar to the drawer components available in maps applications.
0 kommentar(er)
