chore(): sync with main

This commit is contained in:
Liam DeBeasi
2022-11-01 10:31:18 -04:00
159 changed files with 988 additions and 1184 deletions

View File

@ -308,13 +308,23 @@ export class Modal implements ComponentInterface, OverlayInterface {
}
connectedCallback() {
prepareOverlay(this.el);
const { configureTriggerInteraction, el } = this;
prepareOverlay(el);
configureTriggerInteraction();
}
disconnectedCallback() {
const { destroyTriggerInteraction } = this;
if (destroyTriggerInteraction) {
destroyTriggerInteraction();
}
}
componentWillLoad() {
const { breakpoints, initialBreakpoint, el } = this;
this.inheritedAttributes = inheritAttributes(el, ['role']);
this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
/**
* If user has custom ID set then we should
@ -341,7 +351,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
raf(() => this.present());
}
this.breakpointsChanged(this.breakpoints);
this.configureTriggerInteraction();
}
private configureTriggerInteraction = () => {
@ -826,11 +835,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
return (
<Host
no-router
aria-modal="true"
role="dialog"
tabindex="-1"
{...(htmlAttributes as any)}
{...inheritedAttributes}
style={{
zIndex: `${20000 + this.overlayIndex}`,
}}
@ -858,7 +864,20 @@ export class Modal implements ComponentInterface, OverlayInterface {
{mode === 'ios' && <div class="modal-shadow"></div>}
<div class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
<div
/*
role and aria-modal must be used on the
same element. They must also be set inside the
shadow DOM otherwise ion-button will not be highlighted
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
*/
role="dialog"
{...inheritedAttributes}
aria-modal="true"
class="modal-wrapper ion-overlay-wrapper"
part="content"
ref={(el) => (this.wrapperEl = el)}
>
{showHandle && (
<button
class="modal-handle"