aria role tree for comments

This commit is contained in:
rimu 2024-02-26 15:52:55 +13:00
parent a8c79c7405
commit 3780a74755
5 changed files with 13 additions and 13 deletions

View file

@ -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;">

View file

@ -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) }}

View file

@ -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;">

View file

@ -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 %}

View file

@ -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 %}