From d0f29ce0350f04606d6fa5cb7effb27ff78f601e Mon Sep 17 00:00:00 2001
From: Trent Palmer <trenttdually@gmail.com>
Date: Sun, 28 Mar 2021 23:27:46 -0700
Subject: [PATCH] add accessibility tweaks to templates

---
 audio/templates/audio/feeds.html | 28 +++++++++++++-------------
 audio/templates/audio/index.html | 34 ++++++++++++++++----------------
 tp/templates/base_form.html      |  4 ++--
 tp/templates/base_navbar.html    | 12 +++++------
 4 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/audio/templates/audio/feeds.html b/audio/templates/audio/feeds.html
index e0e5dad..6da92eb 100644
--- a/audio/templates/audio/feeds.html
+++ b/audio/templates/audio/feeds.html
@@ -11,13 +11,13 @@
       <div class="col-12 col-sm-6 px-0 mx-0">
         {% for i in feeds %}
           <div class="card mx-1 mb-3">
-            <h3 class="text-center mt-2">
+            <h2 style="font-size: 1.5rem" class="text-center mt-2">
               {{ i.title }}
-            </h3>
+            </h2>
             <div class="container w-100 mb-2">
               <div class="row">
                 <div class="col-3 d-flex flex-column justify-content-center">
-                  <img src="{{ IMAGES_URL }}{{ i.image }}">
+                  <img src="{{ IMAGES_URL }}{{ i.image }}" alt="{{ i.image_title }}">
                 </div>
                 <div class="col-9 d-flex flex-column justify-content-around">
                     <p class="text-center mb-2 mt-3">{{ i.created_on }}</p>
@@ -25,28 +25,28 @@
                       <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:feed' pk=i.pk slug=i.slug %}">Items</a></p>
                       <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=i.slug %}">RSS</a></p>
                     </div>
-                    <a href="#x{{ i.slug }}-attributions" data-toggle="collapse" class="text-center">license/attribution</a>
+                    <a href="#x{{ i.slug }}-attributions" data-toggle="collapse" class="text-center text-dark" style="text-decoration: underline">license/attribution</a>
                 </div>
               </div>
                     <div id="x{{ i.slug }}-attributions" class="collapse text-justify">
-                      Photo <a href="{{ i.original_image_url }}">{{ i.image_title }}</a> by
+                      Photo <a href="{{ i.original_image_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_title }}</a> by
                       {% if i.image_attribution_url == '' %}
                         {{ i.image_attribution }}
                       {% else %}
-                        <a href="{{ i.image_attribution_url }}">{{ i.image_attribution }}</a>
+                        <a href="{{ i.image_attribution_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_attribution }}</a>
                       {% endif %}
-                      is licensed <a href="{{ i.image_license_url }}">{{ i.image_license_name }}</a>
+                      is licensed <a href="{{ i.image_license_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_license_name }}</a>
                       {{ i.image_license_jurisdiction }}.
                       <hr class="my-1">
-                      <a href="{{ i.ebook_url }}">{{ i.ebook_title }}</a> by
-                      <a href="{{ i.author_url }}">{{ i.author }}</a>
-                      is licensed <a href="{{ i.license_url }}">{{ i.license_name }}</a>
+                      <a href="{{ i.ebook_url }}" class="text-dark" style="text-decoration: underline">{{ i.ebook_title }}</a> by
+                      <a href="{{ i.author_url }}" class="text-dark" style="text-decoration: underline">{{ i.author }}</a>
+                      is licensed <a href="{{ i.license_url }}" class="text-dark" style="text-decoration: underline">{{ i.license_name }}</a>
                       {{ i.license_jurisdiction }}.
                       {% if i.translator != '' %}
-                        Translated by <a href="{{ i.translator_url }}">{{ i.translator }}</a>.
+                        Translated by <a href="{{ i.translator_url }}" class="text-dark" style="text-decoration: underline">{{ i.translator }}</a>.
                       {% endif %}
                       {% if i.intro_author != '' %}
-                        Intro by <a href="{{ i.intro_author_url }}">{{ i.intro_author }}</a>.
+                        Intro by <a href="{{ i.intro_author_url }}" class="text-dark" style="text-decoration: underline">{{ i.intro_author }}</a>.
                       {% endif %}
                       <hr class="my-1">
                     </div>
@@ -58,10 +58,10 @@
               {% if user == i.user %}
                 <div class="container w-100 d-flex justify-content-around my-1">
                   <div>
-                    <a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}">Edit Feed?</a>
+                    <a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}" class="text-dark" style="text-decoration: underline">Edit Feed?</a>
                   </div>
                   <div>
-                    <a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}">New Episode?</a>
+                    <a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
                   </div>
                 </div>
               {% endif %}
diff --git a/audio/templates/audio/index.html b/audio/templates/audio/index.html
index 35366df..ab202a5 100644
--- a/audio/templates/audio/index.html
+++ b/audio/templates/audio/index.html
@@ -23,21 +23,21 @@
         {% if user.is_authenticated %}
           {% if view == 'feed' %}
             <div class="mb-3 d-flex justify-content-around">
-              <a href="{% url 'audio:edit_feed' pk=feed_pk title_slug=feed_slug %}">Edit Feed?</a>
-              <a href="{% url 'audio:new_episode' feed_pk=feed_pk feed_title_slug=feed_slug %}">New Episode?</a>
+              <a href="{% url 'audio:edit_feed' pk=feed_pk title_slug=feed_slug %}" class="text-dark" style="text-decoration: underline">Edit Feed?</a>
+              <a href="{% url 'audio:new_episode' feed_pk=feed_pk feed_title_slug=feed_slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
             </div>
           {% endif %}
         {% endif %}
 
         {% for j in episodes %}
           <div class="card mx-1 mb-3">
-            <h3 class="text-center mt-2">
+            <h2 style="font-size: 1.5rem" class="text-center mt-2">
               {{ j.episode_number }}. {{ j.title }}
-            </h3>
+            </h2>
             <div class="container w-100 mb-2">
               <div class="row">
                 <div class="col-3 d-flex flex-column justify-content-center">
-                  <img src="{{ IMAGES_URL }}{{ j.image }}">
+                  <img src="{{ IMAGES_URL }}{{ j.image }}" alt="{{ j.image_title }}">
                 </div>
                 <div class="col-9 d-flex flex-column justify-content-around">
                     <p class="text-center mb-2 mt-3">{{ j.pub_date }}</p>
@@ -48,30 +48,30 @@
                     {% endif %}
                     <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=j.feed.slug %}">RSS</a></p>
                   </div>
-                    <a href="#x{{ j.slug }}-attributions" data-toggle="collapse" class="text-center">license/attribution</a>
+                    <a href="#x{{ j.slug }}-attributions" data-toggle="collapse" class="text-center text-dark" style="text-decoration: underline">license/attribution</a>
                 </div>
               </div>
             </div>
             <div class="container w-100 mb-2">
                     <div id="x{{ j.slug }}-attributions" class="collapse text-justify">
-                      Photo <a href="{{ j.original_image_url }}">{{ j.image_title }}</a> by
+                      Photo <a href="{{ j.original_image_url }}" class="text-dark" style="text-decoration: underline">{{ j.image_title }}</a> by
                       {% if j.image_attribution_url == '' %}
                         {{ j.image_attribution }}
                       {% else %}
-                        <a href="{{ j.image_attribution_url }}">{{ j.image_attribution }}</a>
+                        <a href="{{ j.image_attribution_url }}" class="text-dark" style="text-decoration: underline">{{ j.image_attribution }}</a>
                       {% endif %}
-                      is licensed <a href="{{ j.image_license_url }}">{{ j.image_license_name }}</a>
+                      is licensed <a href="{{ j.image_license_url }}" class="text-dark" style="text-decoration: underline">{{ j.image_license_name }}</a>
                       {{ j.image_license_jurisdiction }}.
                       <hr class="my-1">
-                      <a href="{{ j.feed.ebook_url }}">{{ j.feed.ebook_title }}</a> by
-                      <a href="{{ j.feed.author_url }}">{{ j.feed.author }}</a>
-                      is licensed <a href="{{ j.feed.license_url }}">{{ j.feed.license_name }}</a>
+                      <a href="{{ j.feed.ebook_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.ebook_title }}</a> by
+                      <a href="{{ j.feed.author_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.author }}</a>
+                      is licensed <a href="{{ j.feed.license_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.license_name }}</a>
                       {{ j.feed.license_jurisdiction }}.
                       {% if j.feed.translator != '' %}
-                        Translated by <a href="{{ j.feed.translator_url }}">{{ j.feed.translator }}</a>.
+                        Translated by <a href="{{ j.feed.translator_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.translator }}</a>.
                       {% endif %}
                       {% if j.feed.intro_author != '' %}
-                        Intro by <a href="{{ j.feed.intro_author_url }}">{{ j.feed.intro_author }}</a>.
+                        Intro by <a href="{{ j.feed.intro_author_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.intro_author }}</a>.
                       {% endif %}
                       <hr class="my-1">
                     </div>
@@ -86,11 +86,11 @@
               {% if user == j.user %}
               <div class="container w-100 d-flex justify-content-around my-1">
                 <div>
-                  <a href="{% url 'audio:edit_episode' pk=j.pk title_slug=j.slug %}">Edit Episode?</a><br>
+                  <a href="{% url 'audio:edit_episode' pk=j.pk title_slug=j.slug %}" class="text-dark" style="text-decoration: underline">Edit Episode?</a><br>
                 </div>
                 {% if view != 'feed' %}
                 <div>
-                  <a href="{% url 'audio:new_episode' feed_pk=j.feed.pk feed_title_slug=j.feed.slug %}">New Episode?</a>
+                  <a href="{% url 'audio:new_episode' feed_pk=j.feed.pk feed_title_slug=j.feed.slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
                 </div>
                 {% endif %}
               </div>
@@ -101,7 +101,7 @@
         {% endfor %}
         {% if is_episode %}
           <div class="text-center">
-            More from <a href="{% url 'audio:feed' pk=feed.id slug=feed.slug %}">{{ feed.title }}</a>?
+            More from <a href="{% url 'audio:feed' pk=feed.id slug=feed.slug %}" class="text-dark" style="text-decoration: underline">{{ feed.title }}</a>?
           </div>
         {% endif %}
       </div>
diff --git a/tp/templates/base_form.html b/tp/templates/base_form.html
index 33e74b2..9c25f00 100644
--- a/tp/templates/base_form.html
+++ b/tp/templates/base_form.html
@@ -61,8 +61,8 @@
         </div>
       {% endif %}
       {% if request.path == login_url %}
-        <p>Forgot Password? <a href="{% url 'accounts:password_reset' %}">Reset Password</a></p>
-        <p>Need an account? <a href="{% url 'accounts:register' %}">Register</a></p>
+        <p>Forgot Password? <a href="{% url 'accounts:password_reset' %}" class="text-dark" style="text-decoration: underline">Reset Password</a></p>
+        <p>Need an account? <a href="{% url 'accounts:register' %}" class="text-dark" style="text-decoration: underline">Register</a></p>
       {% endif %}
     </div>
   </div>
diff --git a/tp/templates/base_navbar.html b/tp/templates/base_navbar.html
index c9f7f73..c910849 100644
--- a/tp/templates/base_navbar.html
+++ b/tp/templates/base_navbar.html
@@ -6,14 +6,14 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
       <div class="navbar-nav">
-        <a class="nav-item nav-link" href="{% url 'audio:feeds' %}">Feeds</a>
-        <a class="nav-item nav-link" href="https://github.com/TrentSPalmer/trentpalmerdotorg" target="_blank" rel="noopener noreferrer">Fork-About</a>
+        <a class="nav-item nav-link text-light" href="{% url 'audio:feeds' %}">Feeds</a>
+        <a class="nav-item nav-link text-light" href="https://github.com/TrentSPalmer/trentpalmerdotorg" target="_blank" rel="noopener noreferrer">Fork-About</a>
         {% if user.is_authenticated %}
-        <a class="nav-item nav-link" href="{% url 'accounts:logout' %}">Logout</a>
-        <a class="nav-item nav-link" href="{% url 'accounts:edit_profile' %}">Profile</a>
-        <a class="nav-item nav-link" href="{% url 'audio:new_feed' %}">NewFeed</a>
+        <a class="nav-item nav-link text-light" href="{% url 'accounts:logout' %}">Logout</a>
+        <a class="nav-item nav-link text-light" href="{% url 'accounts:edit_profile' %}">Profile</a>
+        <a class="nav-item nav-link text-light" href="{% url 'audio:new_feed' %}">NewFeed</a>
         {% else %}
-        <a class="nav-item nav-link" href="{% url 'accounts:login' %}">Login</a>
+        <a class="nav-item nav-link text-light" href="{% url 'accounts:login' %}">Login</a>
         {% endif %}
       </div>
     </div>