Joomla! Issue Tracker | Joomla! CMS #43504 - Css a.btn in web component

No Code Attached Yet

Closed
1 Jun 2024
Medium
Build: 4.4-dev
# 43504

sakiss
21 May 2024

Steps to reproduce the issue

Visit your Joomla admin site and Inject the following html in the <div id="system-message-container">

<joomla-alert type="warning" close-text="Close" dismiss="true" style="animation-name: joomla-alert-fade-in;" role="alert">
<button type="button" class="joomla-alert--close" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="alert-heading">
<span class="warning"></span>
<span class="visually-hidden">Warning</span>
</div>
<div class="alert-wrapper">
<div class="alert-message"><div class="d-flex">
<a class="btn btn-primary ms-4" href="#someModal" data-bs-toggle="modal">Some Action</a>
</div>
</div>
</div>
</joomla-alert>

Expected result

The button's text to be easily readable.

Actual result

The button's text can hardly be read.

System information (as much as possible)

J5.1.0

Additional comments

Seems to be caused by that css:

#system-message-container joomla-alert[type="warning"] a {
  color: var(--state-warning-text);
  text-decoration: underline;
}

Found in the: media/templates/administrator/atum/css/vendor/joomla-custom-elements/joomla-alert.min.css

sakiss - open - 21 May 2024

joomla-cms-bot - change - 21 May 2024

Title

…

Css a.btn in ~~<joomla-alert>~~ web component

Css a.btn in web component

Labels

Added: No Code Attached Yet

joomla-cms-bot - labeled - 21 May 2024

sakiss - change - 21 May 2024

The description was changed

sakiss - edited - 21 May 2024

dgrammatiko - comment - 21 May 2024

Try:

    <joomla-alert type="warning" close-text="Close" dismiss="true" style="animation-name: joomla-alert-fade-in;" role="alert">
        <button type="button" class="joomla-alert--close" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="alert-heading">
            <span class="warning"></span>
            <span class="visually-hidden">Warning</span>
        </div>
        <div class="alert-wrapper">
            <div class="alert-message">
                <div class="d-flex">
                    <p>whatever</p>
                    <button type="button" class="btn btn-primary ms-4" data-bs-toggle="modal" data-bs-target="#exampleModal">Some Action</button>
                </div>
            </div>
        </div>
    </joomla-alert>

output:

FWIW <a> should not be used for actions, the semantically correct tag is <button>

Pinkeltje - comment - 22 May 2024

It happens to have as link i.e. when linking to a developers website to get paid version.

Quick fix is adding this to css:
.alert.alert-warning btn a { color: #fff; }