From 83e8c14f312a60ae35e577a83c4339231a795369 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 8 Sep 2025 10:50:18 +0100
Subject: [PATCH] Enhance navigation buttons for previous and next candidates
 with improved styling and accessibility features

---
 shorts/templates/shorts/mark_answer.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/shorts/templates/shorts/mark_answer.html b/shorts/templates/shorts/mark_answer.html
index 33c0275b..e8b9df9d 100644
--- a/shorts/templates/shorts/mark_answer.html
+++ b/shorts/templates/shorts/mark_answer.html
@@ -154,13 +154,16 @@
             Return to <a class="marking-link" href="{% url 'shorts:mark' exam.id question_details.current|add:'-1' %}">question
                 overview</a>, <a class="marking-link" href="{% url 'shorts:mark_overview' pk=exam.pk %}">marking
                     overview</a><br />
+
             {% if previous_answer_id %}
-                <a href="{% url 'shorts:mark_answer' exam_id=exam.pk question_number=question_details.current|add:'-1' answer_id=previous_answer_id %}">Previous
-                    candidate</a>
+                <a href="{% url 'shorts:mark_answer' exam_id=exam.pk question_number=question_details.current|add:'-1' answer_id=previous_answer_id %}" class="btn btn-sm btn-secondary">Previous candidate</a>
+            {% else %}
+                <a class="btn btn-sm btn-secondary disabled-link" tabindex="-1" aria-disabled="true" style="pointer-events: none; color: #aaa; text-decoration: none;">Previous candidate</a>
             {% endif %}
             {% if next_answer_id %}
-                <a href="{% url 'shorts:mark_answer' exam_id=exam.pk question_number=question_details.current|add:'-1' answer_id=next_answer_id %}">Next
-                    candidate</a>
+                <a href="{% url 'shorts:mark_answer' exam_id=exam.pk question_number=question_details.current|add:'-1' answer_id=next_answer_id %}" class="btn btn-sm btn-secondary">Next candidate</a>
+            {% else %}
+                <a class="btn btn-sm btn-secondary disabled-link" tabindex="-1" aria-disabled="true" style="pointer-events: none; color: #aaa; text-decoration: none;">Next candidate</a>
             {% endif %}
         </div>
     {% endif %}