Allow better keyboard navigation (#373)

templates/activities/_boost.html

@@ -1,10 +1,10 @@
 {% if post.pk in interactions.boost %}
-    <a title="Unboost" class="active" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML">
+    <a title="Unboost" class="active" hx-trigger="click, keyup[key=='Enter']" hx-post="{{ post.urls.action_unboost }}" hx-swap="outerHTML" tabindex="0">
         <i class="fa-solid fa-retweet"></i>
         <span class="like-count">{{ post.stats_with_defaults.boosts }}</span>
     </a>
 {% else %}
-    <a title="Boost" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML">
+    <a title="Boost" hx-trigger="click, keyup[key=='Enter']" hx-post="{{ post.urls.action_boost }}" hx-swap="outerHTML" tabindex="0">
         <i class="fa-solid fa-retweet"></i>
         <span class="like-count">{{ post.stats_with_defaults.boosts }}</span>
     </a>

templates/activities/_image_uploaded.html

@@ -5,15 +5,15 @@
         {{ attachment.name|default:"(no description)" }}
     </p>
     <div class="buttons">
-        <a class="button delete left" _="on click remove closest .uploaded-image">Remove</a>
+        <button class="button delete left" _="on click remove closest .uploaded-image">Remove</button>
     </div>
 </div>
 {% if request.htmx %}
-<a class="button add-image"
+<button class="add-image"
     hx-get='{% url "compose_image_upload" %}'
     hx-target="this"
     hx-swap="outerHTML"
     _="on load if length of <.uploaded-image/> > 3 then hide me">
     Add Image
-</a>
+</button>
 {% endif %}

templates/activities/_like.html

@@ -1,10 +1,10 @@
 {% if post.pk in interactions.like %}
-    <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
+    <a title="Unlike" class="active" hx-trigger="click, keyup[key=='Enter']" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem" tabindex="0">
         <i class="fa-solid fa-star"></i>
         <span class="like-count">{{ post.stats_with_defaults.likes }}</span>
     </a>
 {% else %}
-    <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
+    <a title="Like" hx-trigger="click, keyup[key=='Enter']" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem" tabindex="0">
         <i class="fa-solid fa-star"></i>
         <span class="like-count">{{ post.stats_with_defaults.likes }}</span>
     </a>

templates/activities/_menu.html

@@ -64,7 +64,7 @@
         <input type="hidden" name="visibility" value="{{ config_identity.default_post_visibility }}">
         <div class="buttons">
             <span id="character-counter">{{ config.post_length }}</span>
-            <span class="button toggle" _="on click toggle .enabled then toggle .hidden on #id_content_warning">CW</span>
+            <button class="toggle" _="on click or keyup[key is 'Enter'] toggle .enabled then toggle .hidden on #id_content_warning">CW</button>
             <button id="post-button">{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
         </div>
     </form>

templates/activities/_post.html

@@ -28,9 +28,9 @@
 
     {% if post.summary %}
         {% if config_identity.expand_linked_cws %}
-        <div class="summary" _="on click toggle .enabled on <.{{ post.summary_class }} .summary/> then toggle .hidden on <.{{ post.summary_class }} .content/> then halt">
+        <div class="summary" _="on click or keyup[key is 'Enter'] toggle .enabled on <.{{ post.summary_class }} .summary/> then toggle .hidden on <.{{ post.summary_class }} .content/> then halt" tabindex="0">
         {% else %}
-        <div class="summary" _="on click toggle .enabled then toggle .hidden on the next .content then halt">
+        <div class="summary" _="on click or keyup[key is 'Enter'] toggle .enabled then toggle .hidden on the next .content then halt" tabindex="0">
         {% endif %}
             {{ post.summary }}
         </div>
@@ -70,7 +70,7 @@
         {% include "activities/_reply.html" %}
         {% include "activities/_like.html" %}
         {% include "activities/_boost.html" %}
-        <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
+        <a title="Menu" class="menu" _="on click or keyup[key is 'Enter'] toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu" tabindex="0">
           <i class="fa-solid fa-bars"></i>
         </a>
         <menu>

templates/activities/compose.html

@@ -25,12 +25,12 @@
                 {% endfor %}
             {% endif %}
             {% if not post or post.attachments.count < 4 %}
-                <a class="button add-image"
+                <button class="add-image"
                     hx-get='{% url "compose_image_upload" %}'
                     hx-target="this"
                     hx-swap="outerHTML">
                     Add Image
-                </a>
+                </button>
             {% endif %}
         </fieldset>
         <div class="buttons">

templates/activities/post_delete.html

@@ -7,7 +7,7 @@
     {% include "activities/_mini_post.html" %}
     <form action="." method="POST">
         {% csrf_token %}
-        <a class="button" onclick="history.back()">Cancel</a>
+        <button onclick="history.back()" autofocus>Cancel</button>
         <button class="delete">Delete</button>
     </form>
 

templates/identity/_view_menu.html

@@ -23,7 +23,7 @@
         {% endif %}
 
         {% if request.user.admin %}
-        <a title="Menu" class="menu button" _="on click toggle .enabled on the next <menu/> then halt" aria-haspopup="menu">
+        <a title="Menu" class="menu button" _="on click or keyup[key is 'Enter'] toggle .enabled on the next <menu/> then halt" aria-haspopup="menu" tabindex="0">
             <i class="fa-solid fa-bars"></i>
         </a>
         <menu>

templates/identity/view.html

@@ -29,7 +29,8 @@
             @{{ identity.handle }}
             <a title="Copy handle"
                class="copy"
-               _="on click
+               tabindex="0"
+               _="on click or keyup[key is 'Enter']
                     writeText('@{{ identity.handle }}') into the navigator's clipboard
                     then add .copied
                     wait 2s