[5.1] Button and link text color issue on focus

[sandewt]

Text is not readable on focus

Pull Request for Issue #40306, #41153 and #41172

Summary of Changes

The Pull Request #40435 for issue #40306, caused the issues #41153 and #41172.
Hopefully this PR will provide the overall solution. Or there is possible a better css solution.

Testing Instructions

Build: npm ci
Clear the browser cache (historie) after the patch if necessary

• Code review

• see 4.3 RC2 Button text color issue #40306

• see [4.3] The arrow-up icon of the Back-to-top Link should be visible on hovering. #41153

• see [4.3] The text of the links of the Footer module should be visible on hovering #41172

Actual result BEFORE applying this Pull Request

The button and the link text is NOT readable on focus.

Expected result AFTER applying this Pull Request

The button and the link text is always readable on focus.

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

Thanks @RickR2H

[RickR2H]

@sandewt on reviewing the code I would suggest leaving this code as is. The problem is now only in the header and the footer.

I would suggest changing the following:

build\media_source\templates\site\cassiopeia\scss\blocks_layout.scss on line: 19

a:not(.btn) {
  color: currentColor;

  &:hover,
  &:focus {
    color: var(--gray-200);
  }
}

build\media_source\templates\site\cassiopeia\scss\blocks_footer.scss on line: 15

a:not(.btn) {
  color: currentColor;

  &:hover,
  &:focus {
    color: var(--gray-200);
  }
}

For testing put the following code in a custom html module in the header, in the footer and in an article:

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-link">Link</a>
<a href="#">Default Link</a>

[ceford]

I have tested this item ✅ successfully on c305129

Please note that I tested this on Joomla 5.0.0-beta3-dev. And a better command is npm run build:css

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[ceford]

Also tested on 4.3.5-dev works there too, except the Banner test Get started button is white on green both with and without the patch.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[RickR2H]

@sandewt please consider my solutions as stated in: #41749 (comment)

@ceford please create 3 modules. In the banner, footer and the main-top with the code for all the buttons.

<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-link">Link</a>
<a href="#">Default Link</a>

[ceford]

Tested again on 4.3.5-dev and 5.0.0-beta3-dev. I see no difference between the two. The patch fixes the problem with Default links in the footer but not the links with the btn btn-link style. In the banner and main-top positions the buttons and link all appear normal. But in the footer the Secondary and Light buttons have invisible text except on hover/focus. Firefox on Mac.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[sandewt]

But in the footer the Secondary and Light buttons have invisible text except on hover/focus.

@ceford I can confirm this, see the image. Would you please mark your test as unsuccessful?

[EDIT Even without this patch the image is the same]

[ceford]

I have not tested this item.

I think the footer button problems make my successful test invalid.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[sandewt]

I think the footer button problems make my successful test invalid.

At first I thought this too.
But I just ran a test. It turns out that this issue is not caused by pr #40435. In fact, this is a new issue.

[sandewt]

The problem is now only in the header and the footer.

Not correct, also in an acticle

See:#40420

[ceford]

I have tested this item ✅ successfully on c305129

This PR fixes the problem with links where the background is dark - the Default Link in the data set suggested by @RickR2H - so it a Success.

The links styled as buttons is a separate issue - I confirm the problem in positions below-top and footer but not in an article with a white background. So I assume there will be a separate PR to deal with that.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[RickR2H]

I have tested this item ✅ successfully on c305129

@sandewt Could you make an new PR to fix the colors in the header and the footer with the changes mentioned by me?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[RickR2H]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[HLeithner]

This pull request has been automatically rebased to 5.1-dev.

[ceford]

Comment in the Forum that this was not fixed in 4.4!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/41749.}

[sandewt]

@sandewt Could you make an new PR to fix the colors in the header and the footer with the changes mentioned by me?

Comment in the Forum that this was not fixed in 4.4!

@RickR2H Thanks for your suggestion. I think others are more skilled at writing the most appropriate code. Partly due to the fact that the PR code was originally intended for J4.4. And there may also be a better solution for this PR.

[RickR2H]

@sandewt Maybe better close this ticket and I'll create a new one with all the fixes mentioning this PR.

[sandewt]

@sandewt Maybe better close this ticket and I'll create a new one with all the fixes mentioning this PR.

That seems like a good idea to me. Closed.

[sandewt]

Thanks all

[sandewt]

Please test #42504

@ceford thanks in advance