From d51f2883aadb795b1fac961e08de820cbedb101f Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 9 Jan 2023 04:20:05 +0900
Subject: [PATCH] Allow better keyboard navigation (#373)

---
 templates/activities/_boost.html          | 4 ++--
 templates/activities/_image_uploaded.html | 6 +++---
 templates/activities/_like.html           | 4 ++--
 templates/activities/_menu.html           | 2 +-
 templates/activities/_post.html           | 6 +++---
 templates/activities/compose.html         | 4 ++--
 templates/activities/post_delete.html     | 2 +-
 templates/identity/_view_menu.html        | 2 +-
 templates/identity/view.html              | 3 ++-
 9 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/templates/activities/_boost.html b/templates/activities/_boost.html
index 4dfefcb..5f10856 100644
--- a/templates/activities/_boost.html
+++ b/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>
diff --git a/templates/activities/_image_uploaded.html b/templates/activities/_image_uploaded.html
index 36bd7fe..2d9e555 100644
--- a/templates/activities/_image_uploaded.html
+++ b/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 %}
diff --git a/templates/activities/_like.html b/templates/activities/_like.html
index fe96c5f..6c45710 100644
--- a/templates/activities/_like.html
+++ b/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>
diff --git a/templates/activities/_menu.html b/templates/activities/_menu.html
index 6c6a451..9961999 100644
--- a/templates/activities/_menu.html
+++ b/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>
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index e3a6922..4111d35 100644
--- a/templates/activities/_post.html
+++ b/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>
diff --git a/templates/activities/compose.html b/templates/activities/compose.html
index 9587559..e587f16 100644
--- a/templates/activities/compose.html
+++ b/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">
diff --git a/templates/activities/post_delete.html b/templates/activities/post_delete.html
index 47d283c..dc69a36 100644
--- a/templates/activities/post_delete.html
+++ b/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>
 
diff --git a/templates/identity/_view_menu.html b/templates/identity/_view_menu.html
index ae05f84..2e0a100 100644
--- a/templates/identity/_view_menu.html
+++ b/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>
diff --git a/templates/identity/view.html b/templates/identity/view.html
index 13899c9..ed9fa83 100644
--- a/templates/identity/view.html
+++ b/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