Repository: ionic-team/ionic-framework
File: core/src/components/alert/alert.tsx (TypeScript)

Code before:

    /**
     * When binding values in frameworks such as Angular
     * it is possible for the value to be set after the Web Component
     * initializes but before the value watcher is set up in Stencil.
     * As a result, the watcher callback may not be fired.
     * We work around this by manually calling the watcher
     * callback when the component has loaded and the watcher
     * is configured.
     */
    this.triggerChanged();
  }

  /**
   * Present the alert overlay after it has been created.
   */
  @Method()
  async present(): Promise<void> {
    const unlock = await this.lockController.lock();

    await this.delegateController.attachViewToDom();

    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
      /**
       * Check if alert has only one button and no inputs.
       * If so, focus the button, oderwise focus the alert wrapper.
       * This will map to the default native alert behavior.
       */
      if (this.buttons.length === 1 && this.inputs.length === 0) {
        const queryBtn = this.wrapperEl?.querySelector('.alert-button') as HTMLButtonElement;
        queryBtn.focus();
      } else {
        this.wrapperEl?.focus();
      }
    });

    unlock();
  }

  /**
   * Dismiss the alert overlay after it has been presented.
   *
   * @param data Any data to emit in the dismiss events.
   * @param role The role of the element that is dismissing the alert.
   * This can be useful in a button handler for determining which button was
   * clicked to dismiss the alert.
   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
   *
   * This is a no-op if the overlay has not been presented yet. If you want
   * to remove an overlay from the DOM that was never presented, use the
   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.

Review comment (suggestion):
```suggestion
       * If so, then focus on the button. Otherwise, focus the alert wrapper.
```

Code after:

    /**
     * When binding values in frameworks such as Angular
     * it is possible for the value to be set after the Web Component
     * initializes but before the value watcher is set up in Stencil.
     * As a result, the watcher callback may not be fired.
     * We work around this by manually calling the watcher
     * callback when the component has loaded and the watcher
     * is configured.
     */
    this.triggerChanged();
  }

  /**
   * Present the alert overlay after it has been created.
   */
  @Method()
  async present(): Promise<void> {
    const unlock = await this.lockController.lock();

    await this.delegateController.attachViewToDom();

    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
      /**
       * Check if alert has only one button and no inputs.
       * If so, then focus on the button. Otherwise, focus the alert wrapper.
       * This will map to the default native alert behavior.
       */
      if (this.buttons.length === 1 && this.inputs.length === 0) {
        const queryBtn = this.wrapperEl?.querySelector('.alert-button') as HTMLButtonElement;
        queryBtn.focus();
      } else {
        this.wrapperEl?.focus();
      }
    });

    unlock();
  }

  /**
   * Dismiss the alert overlay after it has been presented.
   *
   * @param data Any data to emit in the dismiss events.
   * @param role The role of the element that is dismissing the alert.
   * This can be useful in a button handler for determining which button was
   * clicked to dismiss the alert.
   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
   *
   * This is a no-op if the overlay has not been presented yet. If you want
   * to remove an overlay from the DOM that was never presented, use the
   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.