fix(a11y): more accessible breadcrumbs

This is based on [Bootstrap](https://getbootstrap.com/docs/4.0/components/breadcrumb/)'s example, and conforms to the WAI-ARIA Authoring Practices Guide for [breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
SADiLaR · Oct 3, 2024 · bd1a3ec · bd1a3ec
1 parent 7865e43
commit bd1a3ec
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/app/templates/app/document_detail.html b/app/templates/app/document_detail.html
@@ -8,7 +8,12 @@
 {% block content %}
 {% spaceless %}
 <div class="text-break m-4">
-    <p><a href="{% url 'documents' %}">{% trans "Documents" %}</a> > {{ document.title }}</p>
+    <nav aria-label="{% trans 'Breadcrumb' %}">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'documents' %}">{% trans "Documents" %}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ document.title }}</li>
+        </ol>
+    </nav>
 
     <div>
         <h1 id="main-heading">{{ document.title }}</h1>

diff --git a/app/templates/app/institution_detail.html b/app/templates/app/institution_detail.html
@@ -8,7 +8,12 @@
 {% block content %}
 {% spaceless %}
 <div class="text-break m-4">
-    <p><a href="{% url 'institutions' %}">{% trans "Institutions" %}</a> > {{ institution.name }}</p>
+    <nav aria-label="{% trans 'Breadcrumb' %}">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'institutions' %}">{% trans "Institutions" %}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ institution.name }}</li>
+        </ol>
+    </nav>
 
     <div class="mb-3 row">
         <div class="{% if institution.logo %}col-md-6{% else %}col-md-12{% endif %}">

diff --git a/app/templates/app/project_detail.html b/app/templates/app/project_detail.html
@@ -8,7 +8,12 @@
 {% block content %}
 {% spaceless %}
 <div class="text-break m-4">
-    <p><a href="{% url 'projects' %}">{% trans "Projects" %}</a> > {{ project.name }}</p>
+    <nav aria-label="{% trans 'Breadcrumb' %}">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'projects' %}">{% trans "Projects" %}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ project.name }}</li>
+        </ol>
+    </nav>
 
     <div class="mb-3 row">
       {# incorrect indent facilitates comparison with document_detail.html #}