From 25b8bf6a2e5cdbf921ca8ba4a994f57c1c859844 Mon Sep 17 00:00:00 2001
From: Michael Manfre <mike@manfre.net>
Date: Wed, 7 Dec 2022 11:12:43 -0500
Subject: [PATCH] Keyboard navigation

---
 static/css/style.css                 | 19 ++++++++++++++++++
 templates/activities/_like.html      |  4 ++--
 templates/activities/_mini_post.html |  4 ++--
 templates/activities/_post.html      | 30 ++++++++++++++--------------
 templates/activities/_reply.html     |  2 +-
 templates/activities/local.html      |  2 +-
 templates/base.html                  | 17 ++++++++--------
 7 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 1f9220f..430ab2a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1149,3 +1149,22 @@ table.metadata td.name {
     color: var(--color-highlight);
     transition: 0.2s;
 }
+
+
+/* Accessibility */
+.screenreader-text {
+    position: absolute;
+    left: -999px;
+    width: 1px;
+    height: 1px;
+    top: auto;
+}
+
+.screenreader-text:focus {
+    color: black;
+    display: inline-block;
+    height: auto;
+    width: auto;
+    position: static;
+    margin: auto;
+}
diff --git a/templates/activities/_like.html b/templates/activities/_like.html
index 8eec8cd..07dc01d 100644
--- a/templates/activities/_like.html
+++ b/templates/activities/_like.html
@@ -1,9 +1,9 @@
 {% if post.pk in interactions.like %}
-    <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML">
+    <a title="Unlike" class="active" hx-post="{{ post.urls.action_unlike }}" hx-swap="outerHTML" role="menuitem">
         <i class="fa-solid fa-star"></i>
     </a>
 {% else %}
-    <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML">
+    <a title="Like" hx-post="{{ post.urls.action_like }}" hx-swap="outerHTML" role="menuitem">
         <i class="fa-solid fa-star"></i>
     </a>
 {% endif %}
diff --git a/templates/activities/_mini_post.html b/templates/activities/_mini_post.html
index 80ed213..19fad76 100644
--- a/templates/activities/_mini_post.html
+++ b/templates/activities/_mini_post.html
@@ -1,8 +1,8 @@
 {% load static %}
 {% load activity_tags %}
-<div class="post mini" data-takahe-id="{{ post.id }}">
+<div class="post mini" data-takahe-id="{{ post.id }}" role="article">
 
-    <a href="{{ post.author.urls.view }}">
+    <a href="{{ post.author.urls.view }}" tabindex="-1">
         <img src="{{ post.author.local_icon_url }}" class="icon">
     </a>
 
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index e764747..4e5cb7c 100644
--- a/templates/activities/_post.html
+++ b/templates/activities/_post.html
@@ -1,22 +1,22 @@
 {% load static %}
 {% load activity_tags %}
-<div class="post {% if reply %}reply{% endif %}" data-takahe-id="{{ post.id }}">
+<div class="post {% if reply %}reply{% endif %}" data-takahe-id="{{ post.id }}" role="article" tabindex="0">
 
-    <a href="{{ post.author.urls.view }}">
+    <a href="{{ post.author.urls.view }}" tabindex="-1">
         <img src="{{ post.author.local_icon_url }}" class="icon">
     </a>
 
     <time _="on click go url {% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %} then halt">
         {% if post.visibility == 0 %}
-            <i class="visibility fa-solid fa-earth-oceania" title="Public"></i>
+            <i class="visibility fa-solid fa-earth-oceania" title="Public" aria-label="public"></i>
         {% elif post.visibility == 1 %}
-            <i class="visibility fa-solid fa-lock-open" title="Unlisted"></i>
+            <i class="visibility fa-solid fa-lock-open" title="Unlisted" aria-label="unlisted"></i>
         {% elif post.visibility == 2 %}
-            <i class="visibility fa-solid fa-lock" title="Followers Only"></i>
+            <i class="visibility fa-solid fa-lock" title="Followers Only" aria-label="followers only"></i>
         {% elif post.visibility == 3 %}
-            <i class="visibility fa-solid fa-at" title="Mentioned Only"></i>
+            <i class="visibility fa-solid fa-at" title="Mentioned Only" aria-label="mentioned only"></i>
         {% elif post.visibility == 4 %}
-        <i class="visibility fa-solid fa-link-slash" title="Local Only"></i>
+        <i class="visibility fa-solid fa-link-slash" title="Local Only" aria-label="local only"></i>
         {% endif %}
         {% if post.published %}
             <a href="{% if link_original %}{{ post.url }}{% else %}{{ post.urls.view }}{% endif %}" title="{{ post.published }}">{{ post.published | timedeltashort }}</a>
@@ -26,31 +26,31 @@
     </time>
 
     {% if request.identity %}
-    <div class="actions">
+    <div class="actions" role="menubar">
         {% 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">
+        <a title="Menu" class="menu" _="on click toggle .enabled on the next <menu/> then halt" role="menuitem" aria-haspopup="menu">
             <i class="fa-solid fa-caret-down"></i>
         </a>
         <menu>
-            <a href="{{ post.urls.view }}">
+            <a href="{{ post.urls.view }}" role="menuitem">
                 <i class="fa-solid fa-comment"></i> View Post &amp; Replies
             </a>
             {% if post.author == request.identity %}
-            <a href="{{ post.urls.action_edit }}">
+            <a href="{{ post.urls.action_edit }}" role="menuitem">
                 <i class="fa-solid fa-pen-to-square"></i> Edit
             </a>
-            <a href="{{ post.urls.action_delete }}">
+            <a href="{{ post.urls.action_delete }}" role="menuitem">
                 <i class="fa-solid fa-trash"></i> Delete
             </a>
             {% elif not post.local and post.url %}
-              <a href="{{ post.url }}">
+              <a href="{{ post.url }}" role="menuitem">
                 <i class="fa-solid fa-arrow-up-right-from-square"></i> See Original
               </a>
             {% endif %}
             {% if request.user.admin %}
-            <a href="{{ post.urls.admin_edit }}">
+            <a href="{{ post.urls.admin_edit }}" role="menuitem">
                 <i class="fa-solid fa-gear"></i> View In Admin
             </a>
             {% endif %}
@@ -88,5 +88,5 @@
         </div>
     {% endif %}
 
-    <a class="whole-box" href="{{ post.urls.view }}"></a>
+    <a class="whole-box" href="{{ post.urls.view }}" tabindex="-1"></a>
 </div>
diff --git a/templates/activities/_reply.html b/templates/activities/_reply.html
index a6cc81a..89cbad7 100644
--- a/templates/activities/_reply.html
+++ b/templates/activities/_reply.html
@@ -1,4 +1,4 @@
 
-<a title="Reply" href="{{ post.urls.action_reply }}">
+<a title="Reply" href="{{ post.urls.action_reply }}" role="menuitem">
     <i class="fa-solid fa-reply"></i>
 </a>
diff --git a/templates/activities/local.html b/templates/activities/local.html
index b6f246e..c03b0c0 100644
--- a/templates/activities/local.html
+++ b/templates/activities/local.html
@@ -4,7 +4,7 @@
 
 {% block content %}
     {% for post in page_obj %}
-        {% include "activities/_post.html" %}
+        {% include "activities/_post.html" with feedindex=forloop.counter %}
     {% empty %}
         No posts yet.
     {% endfor %}
diff --git a/templates/base.html b/templates/base.html
index ac79b24..df8ebdf 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,7 +20,8 @@
     {% block extra_head %}{% endblock %}
 </head>
 <body class="{% block body_class %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
-
+    <a id='skip-to-main' class='screenreader-text' href='#main-content'>Skip to Content</a>
+    <a id='skip-to-nav' class='screenreader-text' href='#side-navigation'>Skip to Navigation</a>
     <main>
         <header>
             <a class="logo" href="/">
@@ -29,19 +30,19 @@
             </a>
             <menu>
                 {% if user.is_authenticated %}
-                    <a href="{% url "compose" %}" title="Compose" {% if top_section == "compose" %}class="selected"{% endif %}>
+                    <a href="{% url "compose" %}" title="Compose" role="menuitem" {% if top_section == "compose" %}class="selected"{% endif %}>
                         <i class="fa-solid fa-feather"></i>
                     </a>
-                    <a href="{% url "search" %}" title="Search" {% if top_section == "search" %}class="selected"{% endif %}>
+                    <a href="{% url "search" %}" title="Search" role="menuitem" {% if top_section == "search" %}class="selected"{% endif %}>
                         <i class="fa-solid fa-search"></i>
                     </a>
                     {% if allows_refresh %}
-                        <a href="." title="Refresh" hx-get="." hx-select=".left-column" hx-target=".left-column" hx-swap="outerHTML" hx-trigger="click, every 120s">
+                        <a href="." title="Refresh" role="menuitem" hx-get="." hx-select=".left-column" hx-target=".left-column" hx-swap="outerHTML" hx-trigger="click, every 120s">
                             <i class="fa-solid fa-rotate"></i>
                         </a>
                     {% endif %}
                     <div class="gap"></div>
-                    <a href="/identity/select/" class="identity">
+                    <a href="/identity/select/" role="menuitem" class="identity">
                         {% if not request.identity %}
                             No Identity
                             <img src="{% static "img/unknown-icon-128.png" %}" title="No identity selected">
@@ -52,7 +53,7 @@
                     </a>
                 {% else %}
                     <div class="gap"></div>
-                    <a href="/auth/login/" class="identity"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
+                    <a href="/auth/login/" role="menuitem" class="identity"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
                 {% endif %}
             </menu>
         </header>
@@ -61,11 +62,11 @@
             {% block pre_content %}
             {% endblock %}
             <div class="columns">
-                <div class="left-column">
+                <div class="left-column" id="main-content">
                     {% block content %}
                     {% endblock %}
                 </div>
-                <div class="right-column">
+                <div class="right-column" id="side-navigation">
                     {% block right_content %}
                         {% include "activities/_menu.html" %}
                     {% endblock %}