From 037d579b2a3a660358f1e9c9b020c9510bb9c6b0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 23 Aug 2022 13:37:58 -0500 Subject: [PATCH] fix(modal): role attribute can be customized (#25804) --- core/src/components/modal/modal.tsx | 14 +++++-- .../src/components/modal/test/a11y/index.html | 21 ++++++++++ .../components/modal/test/a11y/modal.e2e.ts | 39 +++++++++++++++++++ 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 core/src/components/modal/test/a11y/index.html create mode 100644 core/src/components/modal/test/a11y/modal.e2e.ts diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 12056b5204..c718441a43 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -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; + 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 { } -