User tests: Successful: Unsuccessful:
Text is not readable on focus
Pull Request for Issue #40306, #41153 and #41172
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.
Build: npm ci
Clear the browser cache (historie) after the patch if necessary
The button and the link text is NOT readable on focus.
The button and the link text is always readable on focus.
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
Category | ⇒ | Repository NPM Change |
Status | New | ⇒ | Pending |
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
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.
@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>
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.
I have not tested this item.
I think the footer button problems make my successful
test invalid.
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.
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?
Status | Pending | ⇒ | Ready to Commit |
RTC
Labels |
Added:
?
PR-4.3-dev
|
This pull request has been automatically rebased to 5.1-dev.
Title |
|
Comment in the Forum that this was not fixed in 4.4!
@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.
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 |
Thanks all
@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
build\media_source\templates\site\cassiopeia\scss\blocks_footer.scss on line: 15
For testing put the following code in a custom html module in the header, in the footer and in an article: