aria attributes on buttons

This commit is contained in:
rimu 2024-01-18 16:15:43 +13:00
parent 150b5fe461
commit 7fc0302376
4 changed files with 12 additions and 13 deletions

View file

@ -97,7 +97,7 @@
<div class="container-lg"> <div class="container-lg">
<a class="navbar-brand" href="/">{% if not low_bandwidth %}<img src="/static/images/logo2.png" alt="Logo" width="50" height="50" />{% endif %}{{ g.site.name }}</a> <a class="navbar-brand" href="/">{% if not low_bandwidth %}<img src="/static/images/logo2.png" alt="Logo" width="50" height="50" />{% endif %}{{ g.site.name }}</a>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<a class="nav-link d-lg-none" href="/notifications"> <a class="nav-link d-lg-none" href="/notifications" aria-label="{{ _('Notifications') }}">
{% if current_user.unread_notifications %} {% if current_user.unread_notifications %}
<span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span> <span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span>
{% else %} {% else %}
@ -172,7 +172,7 @@
{% endif %} {% endif %}
<li class="nav-item"><a class="nav-link" href="/auth/logout">{{ _('Log out') }}</a></li> <li class="nav-item"><a class="nav-link" href="/auth/logout">{{ _('Log out') }}</a></li>
<li class="nav-item d-none d-md-inline-block"> <li class="nav-item d-none d-md-inline-block">
<a class="nav-link" href="/notifications"> <a class="nav-link" href="/notifications" aria-label="{{ _('Notifications') }}">
{% if current_user.unread_notifications %} {% if current_user.unread_notifications %}
<span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span> <span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span>
{% else %} {% else %}
@ -181,8 +181,8 @@
</a> </a>
</li> </li>
{% endif %} {% endif %}
<li class="nav-item"><a class="nav-link" id="light_mode"><span class="fe fe-sun" title="Light mode"></span></a></li> <li class="nav-item"><a class="nav-link" id="light_mode" aria-label="{{ _('Light mode') }}"><span class="fe fe-sun" title="{{ _('Light mode') }}"></span></a></li>
<li class="nav-item"><a class="nav-link" id="dark_mode"><span class="fe fe-moon" title="Dark mode"></span></a></li> <li class="nav-item"><a class="nav-link" id="dark_mode" aria-label="{{ _('Dark mode') }}"><span class="fe fe-moon" title="{{ _('Dark mode') }}"></span></a></li>
</ul> </ul>
</div> </div>

View file

@ -1,6 +1,6 @@
{% if current_user.is_authenticated and current_user.verified %} {% if current_user.is_authenticated and current_user.verified %}
{% if can_upvote(current_user, community) %} {% if can_upvote(current_user, community) %}
<div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}" <div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new"> hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new">
<span class="fe fe-arrow-up"></span> <span class="fe fe-arrow-up"></span>
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;"> <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
@ -8,7 +8,7 @@
{% endif %} {% endif %}
<span title="{{ comment.up_votes }}, {{ comment.down_votes }}">{{ comment.up_votes - comment.down_votes }}</span> <span title="{{ comment.up_votes }}, {{ comment.down_votes }}">{{ comment.up_votes - comment.down_votes }}</span>
{% if can_downvote(current_user, community) %} {% if can_downvote(current_user, community) %}
<div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}" <div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new"> hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new">
<span class="fe fe-arrow-down"></span> <span class="fe fe-arrow-down"></span>
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;"> <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">

View file

@ -51,18 +51,17 @@
</div> </div>
<div class="row utilities_row"> <div class="row utilities_row">
<div class="col-6"> <div class="col-6">
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}"><span class="fe fe-reply"></span></a> <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}" aria-label="{{ _('View comments') }}"><span class="fe fe-reply"></span></a>
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}">{{ post.reply_count }}</a> <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}">{{ post.reply_count }}</a>
{% if post.type == POST_TYPE_IMAGE %} {% if post.type == POST_TYPE_IMAGE %}
&nbsp;
{% if post.image_id %} {% if post.image_id %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" class="preview_image"><span class="fe fe-magnify"></span></a> <a href="{{ post.image.view_url() }}" rel="nofollow ugc" class="preview_image" aria-label="{{ _('View image') }}"><span class="fe fe-magnify"></span></a>
{% else %} {% else %}
<a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank"><span class="fe fe-magnify"></span></a> <a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank" aria-label="{{ _('View image') }}"><span class="fe fe-magnify"></span></a>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>
<div class="col-2"><a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a></div> <div class="col-2"><a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a></div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
{% if current_user.is_authenticated and current_user.verified %} {% if current_user.is_authenticated and current_user.verified %}
{% if can_upvote(current_user, post.community) %} {% if can_upvote(current_user, post.community) %}
<div class="upvote_button digits_{{ digits(post.up_votes) }} {{ upvoted_class }}" <div class="upvote_button digits_{{ digits(post.up_votes) }} {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons"> hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
<span class="fe fe-arrow-up"></span> <span class="fe fe-arrow-up"></span>
{{ shorten_number(post.up_votes) }} {{ shorten_number(post.up_votes) }}
@ -8,7 +8,7 @@
</div> </div>
{% endif %} {% endif %}
{% if can_downvote(current_user, post.community) %} {% if can_downvote(current_user, post.community) %}
<div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }}" <div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons"> hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
<span class="fe fe-arrow-down"></span> <span class="fe fe-arrow-down"></span>
{{ shorten_number(post.down_votes) }} {{ shorten_number(post.down_votes) }}