Method render

core/src/components/alert/alert.tsx:815–889

()

  }

  render() {
    const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
    const mode = getIonMode(this);
    const hdrId = `alert-${overlayIndex}-hdr`;
    const msgId = `alert-${overlayIndex}-msg`;
    const subHdrId = `alert-${overlayIndex}-sub-hdr`;
    const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';

    /**
     * Use both the header and subHeader ids if they are defined.
     * If only the header is defined, use the header id.
     * If only the subHeader is defined, use the subHeader id.
     * If neither are defined, do not set aria-labelledby.
     */
    const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;

    return (
      <Host
        tabindex="-1"
        style={{
          zIndex: `${20000 + overlayIndex}`,
        }}
        class={{
          ...getClassMap(this.cssClass),
          [mode]: true,
          'overlay-hidden': true,
          'alert-translucent': this.translucent,
        }}
        onIonAlertWillDismiss={this.dispatchCancelHandler}
        onIonBackdropTap={this.onBackdropTap}
      >
        <ion-backdrop tappable={this.backdropDismiss} />

        <div tabindex="0" aria-hidden="true"></div>

        <div
          class="alert-wrapper ion-overlay-wrapper"
          role={role}
          aria-modal="true"
          aria-labelledby={ariaLabelledBy}
          aria-describedby={message !== undefined ? msgId : null}
          tabindex="0"
          ref={(el) => (this.wrapperEl = el)}
          {...(htmlAttributes as any)}
        >
          <div class="alert-head">
            {header && (
              <h2 id={hdrId} class="alert-title">
                {header}
              </h2>
            )}
            {/* If no header exists, subHeader should be the highest heading level, h2 */}
            {subHeader && !header && (
              <h2 id={subHdrId} class="alert-sub-title">
                {subHeader}
              </h2>
            )}
            {/* If a header exists, subHeader should be one level below it, h3 */}