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

fix(modal): role attribute can be customized (#25804)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-08-23 13:37:58 -05:00
committed by GitHub
parent a39d776f08
commit 037d579b2a
3 changed files with 70 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,8 @@ import type {
} from '../../interface';
import { findIonContent, printIonContentErrorMsg } from '../../utils/content';
import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
import { raf } from '../../utils/helpers';
import { raf, inheritAttributes } from '../../utils/helpers';
import type { Attributes } from '../../utils/helpers';
import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
import { printIonWarning } from '../../utils/logging';
import { BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
@ -66,6 +67,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
private sortedBreakpoints?: number[];
private keyboardOpenCallback?: () => void;
private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => Promise<void>;
private inheritedAttributes: Attributes = {};
private inline = false;
private workingDelegate?: FrameworkDelegate;
@ -334,7 +336,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
}
componentWillLoad() {
const { breakpoints, initialBreakpoint, swipeToClose } = this;
const { breakpoints, initialBreakpoint, swipeToClose, el } = this;
this.inheritedAttributes = inheritAttributes(el, ['role']);
/**
* If user has custom ID set then we should
@ -855,7 +859,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
};
render() {
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior } = this;
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
const showHandle = handle !== false && isSheetModal;
const mode = getIonMode(this);
@ -867,8 +871,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
<Host
no-router
aria-modal="true"
role="dialog"
tabindex="-1"
{...(htmlAttributes as any)}
{...inheritedAttributes}
style={{
zIndex: `${20000 + this.overlayIndex}`,
}}
@ -896,7 +902,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
{mode === 'ios' && <div class="modal-shadow"></div>}
<div role="dialog" class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
<div class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
{showHandle && (
<button
class="modal-handle"