From 3780a74755459578b5ceb4f8afbf9cf04659aa63 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:52:55 +1300
Subject: [PATCH] aria role tree for comments

---
 app/templates/post/_comment_voting_buttons.html      | 6 +++---
 app/templates/post/_post_voting_buttons.html         | 4 ++--
 app/templates/post/_post_voting_buttons_masonry.html | 4 ++--
 app/templates/post/continue_discussion.html          | 6 +++---
 app/templates/post/post.html                         | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/templates/post/_comment_voting_buttons.html b/app/templates/post/_comment_voting_buttons.html
index 34718c1f..ce5294cc 100644
--- a/app/templates/post/_comment_voting_buttons.html
+++ b/app/templates/post/_comment_voting_buttons.html
@@ -1,14 +1,14 @@
 {% if current_user.is_authenticated and current_user.verified %}
         {% if can_upvote(current_user, community) %}
-                <div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
+                <div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}" aria-live="assertive"
                  hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0">
                         <span class="fe fe-arrow-up"></span>
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
                 </div>
         {% endif %}
-        <span title="{{ comment.up_votes }}, {{ comment.down_votes }}">{{ comment.up_votes - comment.down_votes }}</span>
+        <span title="{{ comment.up_votes }}, {{ comment.down_votes }}" aria-live="assertive">{{ comment.up_votes - comment.down_votes }}</span>
         {% if can_downvote(current_user, community) %}
-                <div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
+                <div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}" aria-live="assertive"
                  hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0">
                         <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_voting_buttons.html b/app/templates/post/_post_voting_buttons.html
index 6e7eff39..1434a4a1 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 {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
+                <div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}" aria-live="assertive"
                  hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons" tabindex="0">
                         <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 {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
+                <div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}" aria-live="assertive"
                  hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons" tabindex="0">
                         <span class="fe fe-arrow-down"></span>
                         {{ shorten_number(post.down_votes) }}
diff --git a/app/templates/post/_post_voting_buttons_masonry.html b/app/templates/post/_post_voting_buttons_masonry.html
index 1e9bc8a6..7ce6a438 100644
--- a/app/templates/post/_post_voting_buttons_masonry.html
+++ b/app/templates/post/_post_voting_buttons_masonry.html
@@ -1,13 +1,13 @@
 {% if current_user.is_authenticated and current_user.verified %}
         {% if can_upvote(current_user, post.community) %}
-                <div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}"
+                <div class="upvote_button {{ upvoted_class }}" role="button" aria-label="{{ _('UpVote') }}" aria-live="assertive"
                  hx-post="/post/{{ post.id }}/upvote?style=masonry" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_masonry" tabindex="0" title="{{ post.up_votes }} upvotes">
                         <span class="fe fe-arrow-up"></span>
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
                 </div>
         {% endif %}
         {% if can_downvote(current_user, post.community) %}
-                <div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}"
+                <div class="downvote_button {{ downvoted_class }}" role="button" aria-label="{{ _('DownVote') }}" aria-live="assertive"
                  hx-post="/post/{{ post.id }}/downvote?style=masonry" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_masonry" tabindex="0" title="{{ post.down_votes }} downvotes">
                         <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/continue_discussion.html b/app/templates/post/continue_discussion.html
index 07d27c6b..dae25ab5 100644
--- a/app/templates/post/continue_discussion.html
+++ b/app/templates/post/continue_discussion.html
@@ -13,7 +13,7 @@
         <div class="row post_replies">
             <div class="col">
                 {% macro render_comment(comment) %}
-                    <div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].author.id == post.author.id %}original_poster{% endif %}">
+                    <div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].author.id == post.author.id %}original_poster{% endif %}" role="treeitem">
                         <div class="limit_height">
                             <div class="comment_author">
                                 {% if comment['comment'].author.deleted %}
@@ -70,7 +70,7 @@
                             <a href="{{ url_for('post.post_reply_options', post_id=post.id, comment_id=comment['comment'].id) }}" class="comment_actions_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
                         </div>
                         {% if comment['replies'] %}
-                            <div class="replies hidable">
+                            <div class="replies hidable" role="group">
                                 {% for reply in comment['replies'] %}
                                   {{ render_comment(reply) | safe }}
                                 {% endfor %}
@@ -78,7 +78,7 @@
                         {% endif %}
                     </div>
                 {% endmacro %}
-                <div id="replies" class="comments">
+                <div id="replies" class="comments" role="tree">
                     {% for reply in replies %}
                       {{ render_comment(reply) | safe }}
                     {% endfor %}
diff --git a/app/templates/post/post.html b/app/templates/post/post.html
index 43e88033..71122e87 100644
--- a/app/templates/post/post.html
+++ b/app/templates/post/post.html
@@ -66,7 +66,7 @@
                 </div>
                 {% macro render_comment(comment) %}
                     <div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].score <= -10 %}low_score{% endif %}
-                        {% if comment['comment'].author.id == post.author.id %}original_poster{% endif %}">
+                        {% if comment['comment'].author.id == post.author.id %}original_poster{% endif %}" aria-level="{{ comment['comment'].depth + 1 }}" role="treeitem">
                         <div class="limit_height">
                             <div class="comment_author">
                                 {% if comment['comment'].author.deleted %}
@@ -124,7 +124,7 @@
                         </div>
                         {% if comment['replies'] %}
                             {% if comment['comment'].depth <= THREAD_CUTOFF_DEPTH %}
-                                <div class="replies hidable">
+                                <div class="replies hidable" role="group">
                                     {% for reply in comment['replies'] %}
                                       {{ render_comment(reply) | safe }}
                                     {% endfor %}
@@ -144,7 +144,7 @@
                     {% endif %}
                 {% endmacro %}
 
-                <div id="replies" class="comments">
+                <div id="replies" class="comments" role="tree" aria-label="{{ _('Comments') }}">
                     {% for reply in replies %}
                       {{ render_comment(reply) | safe }}
                     {% endfor %}