michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-02-03 00:31:25 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

keyboard shortcuts for accessibility

Browse source
This commit is contained in:
rimu 2024-01-19 22:49:16 +13:00
parent cf377ec6b4
commit cdc685ba8a
6 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/static/js/scripts.js
View file

@ -8,6 +8,7 @@ document.addEventListener("DOMContentLoaded", function () {
setupTimeTracking();
setupMobileNav();
setupLightDark();
setupKeyboardShortcuts();
});
@ -360,6 +361,39 @@ function setupTimeTracking() {
}
}
var currentPost;
function setupKeyboardShortcuts() {
document.addEventListener('keydown', function(event) {
if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
if (event.key === 'a') {
if(currentPost) {
currentPost.querySelector('.upvote_button').click();
}
} else if (event.key === 'z') {
if(currentPost) {
currentPost.querySelector('.downvote_button').click();
}
} else if (event.key === 'Enter') {
if(document.activeElement.classList.contains('downvote_button') || document.activeElement.classList.contains('upvote_button')) {
document.activeElement.click();
}
}
event.preventDefault();
}
});
const postTeasers = document.querySelectorAll('.post_teaser, .comments .comment');
postTeasers.forEach(postTeaser => {
postTeaser.addEventListener('mouseover', event => {
currentPost = event.currentTarget;
});
postTeaser.addEventListener('mouseout', event => {
currentPost = null;
});
});
}
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);

4
app/templates/post/_comment_voting_buttons.html
View file

@ -1,7 +1,7 @@
{% 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 }}" 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" tabindex="0">
<span class="fe fe-arrow-up"></span>
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
</div>
@ -9,7 +9,7 @@
<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 }}" 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" tabindex="0">
<span class="fe fe-arrow-down"></span>
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
</div>

2
app/templates/post/_post_notification_toggle.html
View file

@ -1,4 +1,4 @@
<a href="{{ url_for('post.post_notification', post_id=post.id) }}" rel="nofollow"
class="small fe {{ 'fe-bell' if post.notify_author else 'fe-no-bell' }} no-underline"
hx-post="{{ url_for('post.post_notification', post_id=post.id) }}" hx-trigger="click throttle:1s" hx-swap="outerHTML"
title="{{ _('Notify about replies') }}"></a>
title="{{ _('Notify about replies') }}" aria-label="{{ _('Notify about replies') }}"></a>

2
app/templates/post/_post_teaser.html
View file

@ -15,7 +15,7 @@
{% if post.image_id and not low_bandwidth %}
<div class="thumbnail">
{% if post.type == POST_TYPE_LINK %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank"><img src="{{ post.image.thumbnail_url() }}"
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" /></a>
{% elif post.type == POST_TYPE_IMAGE %}
{% if post.image_id %}

4
app/templates/post/_post_voting_buttons.html
View file

@ -1,7 +1,7 @@
{% 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 }}" 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" tabindex="0">
<span class="fe fe-arrow-up"></span>
{{ shorten_number(post.up_votes) }}
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
@ -9,7 +9,7 @@
{% endif %}
{% if can_downvote(current_user, post.community) %}
<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" tabindex="0">
<span class="fe fe-arrow-down"></span>
{{ shorten_number(post.down_votes) }}
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">

2
app/templates/post/_reply_notification_toggle.html
View file

@ -1,4 +1,4 @@
<a href="{{ url_for('post.post_reply_notification', post_reply_id=comment['comment'].id) }}" rel="nofollow"
class="notif_toggle fe {{ 'fe-bell' if comment['comment'].notify_author else 'fe-no-bell' }}"
hx-post="{{ url_for('post.post_reply_notification', post_reply_id=comment['comment'].id) }}" hx-trigger="click throttle:1s" hx-swap="outerHTML"
title="{{ _('Notify about replies') }}"></a>
title="{{ _('Notify about replies') }}" aria-label="{{ _('Notify about replies') }}"></a>