[#28680] - [4.0] [a11y] Contrast of Drop down chevron
- Closed
- 22 Apr 2020
- Medium
- Build: 4.0-dev
- Draft PR
- # 28680
- Diff
- astridx:p28673
User tests: Successful: Unsuccessful:
Draft for Issue #28673.
Edit: To test this draft, it is necessary to use the npm ci command, as SCSS files need to be compiled.
Summary of Changes
I made it possible, that the drop down chevron on success and danger drop downs is white (not black).
For the red danger background the Contrast Ratio is even worse. It is 3.71.
When editing a module, the white arrow also fits better with the calendar symbol at start publishing.
Next you see the white chevron on a drop down with the green success background while editing a plugin. Note: The chevrons on the drop downs with the gray background are still black.
I made this as a draft, because I am not sure, if I understand the way we want to handle multiple background elements. Perhaps someone like to teach me?
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration Templates (admin) |
richard67
- | Title |
|
||||||
I dont understand why there is a new image. I though the whole point of using an svg is that you can change its colour using css eg fill: white
I dont understand why there is a new image. I though the whole point of using an svg is that you can change its colour using css eg fill: white
Because it is a background image, it is not part of the DOM and therefore, to my knowledge, can't be changed via css. The svg will need to be added inline. Eg. https://chriswrightdesign.github.io/customforms/select-box-svg/
Does anyone know the reason why we sometimes use FontAwesome and sometimes SVG images?
In a perfect world, they should be all the same. My preference would be inline svg. If you look deep enough, you will even find some css chevrons in the mix.
@ciar4n In a perfect world, they should be all the same. My preference would be inline svg. If you look deep enough, you will even find some css chevrons in the mix.
How would you do it exactly? If we enter the svg directly in the markup, we can not reuse things, right?
-
If you save the SVG in a file and load it with
<?php echo file_get_contents("my.svg"); ?>,you could reuse things. -
Or we can put the svg on the end of a page like this:
<svg>
<symbol viewBox="0 0 32 32" id="myid1"><title>youtube</title><path ../>
</symbol>
<symbol viewBox="0 0 32 32" id="myid2"><title>youtube</title><path ../>
</symbol>
</svg>
Then we can use it like this
<svg role="img" class="myclass" aria-labelledby="">
<use xlink:href="#myid1"></use>
</svg>
What is the advantage of using svg vs icons? As I see it, it rather makes things more complex than necessary.
Size... with SVG you just load what you need rather than an entire library (css & font). Also SVG allows us to drop in custom fonts rather than been restricted to a set library.
Regardless I think Font Awesome is fine for the backend as it is just one template that will likely be ever used. The frontend is a slightly different matter.
For this PR I think ideally we change the choices icon to Font Awesome, bringing it inline with the majority of the admin. If that is not possible, then this PR as it is fixes the issue.
I have not tested this item.
With and without patches, the field state arrow is always black.
This is in the plugin and in the articles.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/28680.
@ciar4n @infograf768 Thanks for your opinion. I'll look at that tomorrow.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-04-22 11:30:48 |
| Closed_By | ⇒ | Quy | |
| Labels |
Added:
?
|
||
See #28463 for hint to solve the issue.