javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 06:09:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(modal, popver): allow focus trap disable

Browse Source
This commit is contained in:
Liam DeBeasi
2024-04-11 10:27:08 -04:00
parent 6dfedec4c0
commit e09d5c82b3
4 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -831,6 +831,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
ion-modal,prop,canDismiss,((data?: any, role?: string | undefined) => Promise<boolean>) | boolean,true,false,false
ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-modal,prop,focusTrap,boolean,true,false,false
ion-modal,prop,handle,boolean | undefined,undefined,false,false
ion-modal,prop,handleBehavior,"cycle" | "none" | undefined,'none',false,false
ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
@ -979,6 +980,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
ion-popover,prop,dismissOnSelect,boolean,false,false,false
ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-popover,prop,event,any,undefined,false,false
ion-popover,prop,focusTrap,boolean,true,false,false
ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
ion-popover,prop,isOpen,boolean,false,false,false
ion-popover,prop,keepContentsMounted,boolean,false,false,false

16
core/src/components.d.ts vendored
View File

@ -1723,6 +1723,10 @@ export namespace Components {
* Animation to use when the modal is presented.
*/
"enterAnimation"?: AnimationBuilder;
/**
* If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay. In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. This would allow developers to manually move and manage focus within the 3rd party library's overlay.
*/
"focusTrap": boolean;
/**
* Returns the current breakpoint of a sheet style modal
*/
@ -2139,6 +2143,10 @@ export namespace Components {
* The event to pass to the popover animation.
*/
"event": any;
/**
* If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay. In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. This would allow developers to manually move and manage focus within the 3rd party library's overlay.
*/
"focusTrap": boolean;
"getParentPopover": () => Promise<HTMLIonPopoverElement | null>;
"hasController": boolean;
/**
@ -6457,6 +6465,10 @@ declare namespace LocalJSX {
* Animation to use when the modal is presented.
*/
"enterAnimation"?: AnimationBuilder;
/**
* If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay. In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. This would allow developers to manually move and manage focus within the 3rd party library's overlay.
*/
"focusTrap"?: boolean;
/**
* The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
*/
@ -6803,6 +6815,10 @@ declare namespace LocalJSX {
* The event to pass to the popover animation.
*/
"event"?: any;
/**
* If `true`, focus will not be allowed to move outside of this overlay. If 'false', focus will be allowed to move outside of the overlay. In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary. Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. This would allow developers to manually move and manage focus within the 3rd party library's overlay.
*/
"focusTrap"?: boolean;
"hasController"?: boolean;
/**
* Additional attributes to pass to the popover.

22
core/src/components/modal/modal.tsx
View File

@ -16,6 +16,7 @@ import {
present,
createTriggerController,
setOverlayId,
FOCUS_TRAP_DISABLE_CLASS,
} from '@utils/overlays';
import { getClassMap } from '@utils/theme';
import { deepReady, waitForMount } from '@utils/transition';
@ -257,6 +258,23 @@ export class Modal implements ComponentInterface, OverlayInterface {
*/
@Prop() keepContentsMounted = false;
/**
* If `true`, focus will not be allowed to move outside of this overlay.
* If 'false', focus will be allowed to move outside of the overlay.
*
* In most scenarios this property should remain set to `true`. Setting
* this property to `false` can cause severe accessibility issues as users
* relying on assistive technologies may be able to move focus into
* a confusing state. We recommend only setting this to `false` when
* absolutely necessary.
*
* Developers may want to consider disabling focus trapping if this
* overlay presents a non-Ionic overlay from a 3rd party library.
* This would allow developers to manually move and manage focus
* within the 3rd party library's overlay.
*/
@Prop() focusTrap = true;
/**
* Determines whether or not a modal can dismiss
* when calling the `dismiss` method.
@ -905,7 +923,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
};
render() {
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } =
this;
const showHandle = handle !== false && isSheetModal;
const mode = getIonMode(this);
@ -926,6 +945,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
[`modal-card`]: isCardModal,
[`modal-sheet`]: isSheetModal,
'overlay-hidden': true,
[FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
...getClassMap(this.cssClass),
}}
onIonBackdropTap={this.onBackdropTap}

30
core/src/components/popover/popover.tsx
View File

@ -5,7 +5,15 @@ import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework
import { addEventListener, raf, hasLazyBuild } from '@utils/helpers';
import { createLockController } from '@utils/lock-controller';
import { printIonWarning } from '@utils/logging';
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId } from '@utils/overlays';
import {
BACKDROP,
dismiss,
eventMethod,
prepareOverlay,
present,
setOverlayId,
FOCUS_TRAP_DISABLE_CLASS,
} from '@utils/overlays';
import { isPlatform } from '@utils/platform';
import { getClassMap } from '@utils/theme';
import { deepReady, waitForMount } from '@utils/transition';
@ -236,6 +244,23 @@ export class Popover implements ComponentInterface, PopoverInterface {
*/
@Prop() keyboardEvents = false;
/**
* If `true`, focus will not be allowed to move outside of this overlay.
* If 'false', focus will be allowed to move outside of the overlay.
*
* In most scenarios this property should remain set to `true`. Setting
* this property to `false` can cause severe accessibility issues as users
* relying on assistive technologies may be able to move focus into
* a confusing state. We recommend only setting this to `false` when
* absolutely necessary.
*
* Developers may want to consider disabling focus trapping if this
* overlay presents a non-Ionic overlay from a 3rd party library.
* This would allow developers to manually move and manage focus
* within the 3rd party library's overlay.
*/
@Prop() focusTrap = true;
@Watch('trigger')
@Watch('triggerAction')
onTriggerChange() {
@ -656,7 +681,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
render() {
const mode = getIonMode(this);
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
const desktop = isPlatform('desktop');
const enableArrow = arrow && !parentPopover;
@ -676,6 +701,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
'overlay-hidden': true,
'popover-desktop': desktop,
[`popover-side-${side}`]: true,
[FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
'popover-nested': !!parentPopover,
}}
onIonPopoverDidPresent={onLifecycle}