Merge pull request #124 from SADiLaR/fix/breadcrumb-a11y

fix(a11y): more accessible breadcrumbs
SADiLaR · Oct 3, 2024 · bef1fa3 · bef1fa3
2 parents 7988160 + bd1a3ec
commit bef1fa3
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 #}