Feature ? NPM Resource Changed PR-5.1-dev Pending

User tests: Successful: Unsuccessful:

avatar sandewt
sandewt
14 Sep 2023

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

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

avatar joomla-cms-bot joomla-cms-bot - change - 14 Sep 2023
Category Repository NPM Change
avatar sandewt sandewt - open - 14 Sep 2023
avatar sandewt sandewt - change - 14 Sep 2023
Status New Pending
avatar sandewt sandewt - change - 14 Sep 2023
The description was changed
avatar sandewt sandewt - edited - 14 Sep 2023
avatar RickR2H
RickR2H - comment - 15 Sep 2023

@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>
avatar ceford ceford - test_item - 22 Sep 2023 - Tested successfully
avatar ceford
ceford - comment - 22 Sep 2023

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.

avatar ceford
ceford - comment - 22 Sep 2023

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.

avatar RickR2H
RickR2H - comment - 22 Sep 2023

@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>
avatar ceford
ceford - comment - 23 Sep 2023

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.

avatar sandewt
sandewt - comment - 23 Sep 2023

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?

errors_issue

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

avatar ceford ceford - test_item - 23 Sep 2023 - Not tested
avatar ceford
ceford - comment - 23 Sep 2023

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.

avatar sandewt
sandewt - comment - 23 Sep 2023

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.

avatar sandewt
sandewt - comment - 23 Sep 2023

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

Not correct, also in an acticle

See:#40420

avatar ceford ceford - test_item - 24 Sep 2023 - Tested successfully
avatar ceford
ceford - comment - 24 Sep 2023

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.

avatar RickR2H RickR2H - test_item - 28 Sep 2023 - Tested successfully
avatar RickR2H
RickR2H - comment - 28 Sep 2023

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.

avatar RickR2H RickR2H - change - 28 Sep 2023
Status Pending Ready to Commit
avatar RickR2H
RickR2H - comment - 28 Sep 2023

RTC


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

avatar Quy Quy - change - 28 Sep 2023
Labels Added: ? PR-4.3-dev
avatar HLeithner
HLeithner - comment - 30 Sep 2023

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

avatar richard67 richard67 - change - 3 Oct 2023
Title
[4.3] Button and link text color issue on focus
[5.1] Button and link text color issue on focus
avatar richard67 richard67 - edited - 3 Oct 2023
avatar ceford
ceford - comment - 19 Oct 2023

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.

avatar sandewt
sandewt - comment - 25 Nov 2023

@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.

avatar RickR2H
RickR2H - comment - 27 Nov 2023

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

avatar sandewt sandewt - change - 27 Nov 2023
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2023-11-27 08:58:30
Closed_By sandewt
Labels Added: Feature ? NPM Resource Changed PR-5.1-dev
Removed: ? PR-4.3-dev
avatar sandewt sandewt - close - 27 Nov 2023
avatar sandewt
sandewt - comment - 27 Nov 2023

@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.

avatar sandewt
sandewt - comment - 27 Nov 2023

Thanks all

avatar sandewt
sandewt - comment - 17 Dec 2023

Please test #42504

@ceford thanks in advance

Add a Comment

Login with GitHub to post a comment