Change the order of the alert component template content to correct screen readers output

[peterblazejewicz]

Bug description:

With the current content rendering order within alert component template:

    <button *ngIf="dismissible" type="button" class="close" aria-label="Close" i18n-aria-label="@@ngb.alert.close"
      (click)="closeHandler()">
      <span aria-hidden="true">&times;</span>
    </button>
    <ng-content></ng-content>

the content of the alert when read by screen reader always starts with Close, followed by the ng-template slot content. As the users of the ng-bootstrap cannot swap that rendering order (as opposed to BS users), this seems to impact the user experience greatly, while it can be easily fixed:

    <ng-content></ng-content>
    <button *ngIf="dismissible" type="button" class="close" aria-label="Close" i18n-aria-label="@@ngb.alert.close"
      (click)="closeHandler()">
      <span aria-hidden="true">&times;</span>
    </button>

Link to minimally-working StackBlitz that reproduces the issue:

https://ng-bootstrap.github.io/#/components/alert/examples

Versions of Angular, ng-bootstrap and Bootstrap:

Angular:
n/a
ng-bootstrap:
4.1.2
Bootstrap:
n/a

[benouat]

Hey @peterblazejewicz, thanks to report this issue.

That is totally valid. Even Bootstrap provides markup guideline rendering the close button after the content. (See here)

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>