Fix accessibility: add missing labels to fundraising SVG and images#2553
Fix accessibility: add missing labels to fundraising SVG and images#2553Mr-Sunglasses wants to merge 1 commit intodjango:mainfrom
Conversation
erosselli
left a comment
There was a problem hiding this comment.
Thanks for contributing! I left some comments
| <div class="hero-logo"> | ||
| {% if obj.url %}<a href="{{ obj.url }}" rel="nofollow">{% endif %} | ||
| {% if obj.url %}<a href="{{ obj.url }}" rel="nofollow" aria-label="{{ obj.display_name }}">{% endif %} |
There was a problem hiding this comment.
what is this change? It seems unrelated to the heart image
|
|
||
| <div class="fundraising-heart" data-percent="{{ goal_percent }}"> | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431"> | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} funded{% endblocktranslate %}"> |
There was a problem hiding this comment.
I think this needs a "%", since right now it reads "Fundraising progress: 0 funded" which to me seems like an absolute number rather than a %
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} funded{% endblocktranslate %}"> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} percent funded{% endblocktranslate %}"> |
|
|
||
| <div class="fundraising-heart" data-percent="{{ goal_percent }}"> | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431"> | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} funded{% endblocktranslate %}"> |
There was a problem hiding this comment.
also since this is new text, I think we might need to add this as new messages to locale/en/LC_MESSAGES/django.po -- look at how we do it for the existing {{ goal_percent }}% funded text :)
| </g> | ||
| <foreignObject> | ||
| <img src="{% static 'img/fundraising-heart.svg' %}" /> | ||
| <img src="{% static 'img/fundraising-heart.svg' %}" alt="{% translate 'Fundraising heart logo' %}" /> |
There was a problem hiding this comment.
is this needed? I tested with a screen reader and this doesn't get read out but I tbh I think just the label from above is enough
|
@Mr-Sunglasses Do you plan to address the comments here? |
fix: #2552
Before:
After: