From 7fc0302376f73028843493dfce9922665c1a353a Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:15:43 +1300
Subject: [PATCH] aria attributes on buttons

---
 app/templates/base.html                         | 8 ++++----
 app/templates/post/_comment_voting_buttons.html | 4 ++--
 app/templates/post/_post_teaser.html            | 9 ++++-----
 app/templates/post/_post_voting_buttons.html    | 4 ++--
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/templates/base.html b/app/templates/base.html
index 9e38cc1f..d6e4f72d 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -97,7 +97,7 @@
         <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>
             {% 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 %}
                     <span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span>
                     {% else %}
@@ -172,7 +172,7 @@
                             {% endif %}
                             <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">
-                                <a class="nav-link" href="/notifications">
+                                <a class="nav-link" href="/notifications" aria-label="{{ _('Notifications') }}">
                                     {% if current_user.unread_notifications %}
                                     <span class="fe fe-bell red"></span> <span class="red">{{ current_user.unread_notifications }}</span>
                                     {% else %}
@@ -181,8 +181,8 @@
                                 </a>
                             </li>
                         {% 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="dark_mode"><span class="fe fe-moon" title="Dark 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" aria-label="{{ _('Dark mode') }}"><span class="fe fe-moon" title="{{ _('Dark mode') }}"></span></a></li>
                     </ul>
             </div>
 
diff --git a/app/templates/post/_comment_voting_buttons.html b/app/templates/post/_comment_voting_buttons.html
index 75507211..7b90c25c 100644
--- a/app/templates/post/_comment_voting_buttons.html
+++ b/app/templates/post/_comment_voting_buttons.html
@@ -1,6 +1,6 @@
 {% if current_user.is_authenticated and current_user.verified %}
         {% 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">
                         <span class="fe fe-arrow-up"></span>
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
@@ -8,7 +8,7 @@
         {% endif %}
         <span title="{{ comment.up_votes }}, {{ comment.down_votes }}">{{ comment.up_votes - comment.down_votes }}</span>
         {% 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">
                         <span class="fe fe-arrow-down"></span>
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
diff --git a/app/templates/post/_post_teaser.html b/app/templates/post/_post_teaser.html
index 73952b1c..b4ae33cf 100644
--- a/app/templates/post/_post_teaser.html
+++ b/app/templates/post/_post_teaser.html
@@ -51,18 +51,17 @@
                     </div>
                     <div class="row utilities_row">
                         <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>
                             {% if post.type == POST_TYPE_IMAGE %}
-                                &nbsp;
                                 {% 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 %}
-                                    <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 %}
                         </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>
diff --git a/app/templates/post/_post_voting_buttons.html b/app/templates/post/_post_voting_buttons.html
index 0ccd990b..3e3f296e 100644
--- a/app/templates/post/_post_voting_buttons.html
+++ b/app/templates/post/_post_voting_buttons.html
@@ -1,6 +1,6 @@
 {% if current_user.is_authenticated and current_user.verified %}
         {% 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">
                         <span class="fe fe-arrow-up"></span>
                         {{ shorten_number(post.up_votes) }}
@@ -8,7 +8,7 @@
                 </div>
         {% endif %}
         {% 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">
                         <span class="fe fe-arrow-down"></span>
                         {{ shorten_number(post.down_votes) }}