From cfa4c8d384bc628e0455b46387cbefa39a7bce88 Mon Sep 17 00:00:00 2001
From: phette23 <phette23@gmail.com>
Date: Wed, 5 Feb 2025 13:56:19 -0800
Subject: [PATCH] fix: a few a11y header hierarchy issues

- #167 card blocks should use h3 not h4 (we expect them under a subheading always)
- #177 category pages need an h1
- #177 category page row items should use h3
---
 libraries/categories/templates/categories/blocks/card.html   | 5 ++---
 libraries/categories/templates/categories/category_page.html | 2 ++
 libraries/categories/templates/categories/row-item.html      | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/libraries/categories/templates/categories/blocks/card.html b/libraries/categories/templates/categories/blocks/card.html
index 793d92ff..94b5f061 100644
--- a/libraries/categories/templates/categories/blocks/card.html
+++ b/libraries/categories/templates/categories/blocks/card.html
@@ -1,13 +1,12 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 {% comment %} based on Portal's "card" template {% endcomment %}
 <section class="card">
-    <!-- TODO: try h3 for a11y header hierarchy -->
-    <h4 class="card__header">
+    <h3 class="card__header">
         <a class="card__link" href="{{ value.link.url }}">
             {% image value.thumbnail fill-600x400 class="card__thumb" %}
             <span class="card__title">{{ value.link.text|truncatewords:20 }}</span>
         </a>
-    </h4>
+    </h3>
     <div class="card__body">
         {% comment %}
         truncated on a bit of a "magic number" but this _usually_ results
diff --git a/libraries/categories/templates/categories/category_page.html b/libraries/categories/templates/categories/category_page.html
index 4f1f606c..025de3b0 100644
--- a/libraries/categories/templates/categories/category_page.html
+++ b/libraries/categories/templates/categories/category_page.html
@@ -3,6 +3,8 @@
 {% block body_class %}page--{{ page.slug }}{% endblock %}
 
 {% block content %}
+    <h1 class="sr-only">{{ page.title }}</h1>
+
     <div class="wrapper">
         <ul class="services">
             {% for row in rows %}
diff --git a/libraries/categories/templates/categories/row-item.html b/libraries/categories/templates/categories/row-item.html
index 488e7f84..42beb56a 100644
--- a/libraries/categories/templates/categories/row-item.html
+++ b/libraries/categories/templates/categories/row-item.html
@@ -1,9 +1,9 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 <li class="service-row-item">
-	<h2 class="service-row-item__title">
+	<h3 class="service-row-item__title">
 		<a href="{% pageurl item %}">{{ item.title }}</a>
-	</h2>
+	</h3>
 	<p class="service-row-item__text">
 		{{ item.search_description }}
 	</p>