[5.1] #43708 Alert links system container - a11y

[hans2103]

Pull Request for Issue #43708 .

Summary of Changes

This PR will adjust the styling of the alert boxes. Overrides are done using css custom properties instead of overriding css attributes.

Testing Instructions

I've used the following html to test alert boxes

<div class="alert" role="alert">
    class="alert"<br/>
    A simple primary alert—check it out! <a href="#" class="btn btn-primary">button</a>
</div>
<div class="alert alert-primary" role="alert">
    class="alert alert-primary"<br/>
    A simple primary alert—check it out! <a href="#" class="btn btn-primary">button</a>
</div>
<div class="alert alert-secondary" role="alert">
    class="alert alert-secondary"<br/>
    A simple secondary alert—check it out! <a href="#" class="btn btn-secondary">button</a>
</div>
<div class="alert alert-success" role="alert">
    class="alert alert-success"<br/>
    A simple success alert—check it out! <a href="#" class="btn btn-success">button</a>
</div>
<div class="alert alert-danger" role="alert">
    class="alert alert-danger"<br/>
    A simple danger alert—check it out! <a href="#" class="btn btn-danger">button</a>
</div>
<div class="alert alert-warning" role="alert">
    class="alert alert-warning"<br/>
    A simple warning alert—check it out! <a href="#" class="btn btn-warning">button</a>
</div>
<div class="alert alert-info" role="alert">
    class="alert alert-info"<br/>
    A simple info alert—check it out! <a href="#" class="btn btn-info">button</a>
</div>
<div class="alert alert-light" role="alert">
    class="alert alert-light"<br/>
    A simple light alert—check it out! <a href="#" class="btn btn-light">button</a>
</div>
<div class="alert alert-dark" role="alert">
    class="alert alert-dark"<br/>
    A simple dark alert—check it out! <a href="#" class="btn btn-dark">button</a>
</div>

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

Why are you overriding the native bootstrap alert classes. It is doing this sort of thing that causes problems in the first place,

[hans2103]

Why are you overriding the native bootstrap alert classes. It is doing this sort of thing that causes problems in the first place,

I do agree with you. I am going to refactor .alert and joomlaalert.
Less overrides means less maintenance.

I convert this PR as draft