From 6828074dd1c9f6611faffa71601978ada9da1e5b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Apr 2026 07:11:24 +0000
Subject: [PATCH] fix: complete WAI-ARIA tabs pattern in checkout.html
 (aria-selected, aria-controls, tabpanel, keyboard nav)

Agent-Logs-Url: https://github.com/dsaub/proyecto-final/sessions/73a76f50-8c55-4285-81cf-931b63290b81

Co-authored-by: dsaub <54474838+dsaub@users.noreply.github.com>
---
 tienda/templates/tienda/checkout.html | 54 ++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/tienda/templates/tienda/checkout.html b/tienda/templates/tienda/checkout.html
index 1b88ee9..d12f674 100644
--- a/tienda/templates/tienda/checkout.html
+++ b/tienda/templates/tienda/checkout.html
@@ -127,19 +127,22 @@
                 <!-- Tabs -->
                 <ul class="nav nav-tabs mb-3" id="paymentTabs" role="tablist">
                     <li class="nav-item" role="presentation">
-                        <button class="nav-link active" id="tab-card" data-tab="pane-card" type="button" role="tab">
+                        <button class="nav-link active" id="tab-card" data-tab="pane-card" type="button"
+                                role="tab" aria-selected="true" aria-controls="pane-card" tabindex="0">
                             💳 Tarjeta
                         </button>
                     </li>
                     <li class="nav-item" role="presentation">
-                        <button class="nav-link" id="tab-paypal" data-tab="pane-paypal" type="button" role="tab">
+                        <button class="nav-link" id="tab-paypal" data-tab="pane-paypal" type="button"
+                                role="tab" aria-selected="false" aria-controls="pane-paypal" tabindex="-1">
                             🅿️ PayPal
                         </button>
                     </li>
                 </ul>
 
                 <!-- Tarjeta tab -->
-                <div id="pane-card" class="payment-tab-content active">
+                <div id="pane-card" class="payment-tab-content active"
+                     role="tabpanel" aria-labelledby="tab-card" tabindex="0">
                     {% if saved_cards %}
                     <div class="mb-3">
                         <p class="fw-semibold">Tarjetas guardadas:</p>
@@ -183,7 +186,8 @@
                 </div>
 
                 <!-- PayPal tab -->
-                <div id="pane-paypal" class="payment-tab-content">
+                <div id="pane-paypal" class="payment-tab-content"
+                     role="tabpanel" aria-labelledby="tab-paypal" tabindex="0">
                     {% if saved_paypal %}
                     <div class="alert alert-light border mb-3">
                         <small class="text-muted">Cuenta PayPal guardada:</small>
@@ -221,12 +225,42 @@ const HAS_STOCK_ISSUES = {{ stock_issues|yesno:"true,false" }};
 const HAS_ADDRESS = {{ addresses|yesno:"true,false" }};
 
 // ---- Tab switching ----
-document.querySelectorAll('#paymentTabs .nav-link').forEach(btn => {
-    btn.addEventListener('click', () => {
-        document.querySelectorAll('#paymentTabs .nav-link').forEach(b => b.classList.remove('active'));
-        document.querySelectorAll('.payment-tab-content').forEach(p => p.classList.remove('active'));
-        btn.classList.add('active');
-        document.getElementById(btn.dataset.tab).classList.add('active');
+const paymentTabs = Array.from(document.querySelectorAll('#paymentTabs .nav-link[role="tab"]'));
+
+function activateTab(tab) {
+    paymentTabs.forEach(b => {
+        const isSelected = b === tab;
+        b.classList.toggle('active', isSelected);
+        b.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+        b.setAttribute('tabindex', isSelected ? '0' : '-1');
+    });
+    document.querySelectorAll('.payment-tab-content').forEach(p => p.classList.remove('active'));
+    document.getElementById(tab.dataset.tab).classList.add('active');
+}
+
+paymentTabs.forEach(btn => {
+    btn.addEventListener('click', () => activateTab(btn));
+    btn.addEventListener('keydown', e => {
+        const idx = paymentTabs.indexOf(e.currentTarget);
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            const next = paymentTabs[(idx + 1) % paymentTabs.length];
+            activateTab(next);
+            next.focus();
+        } else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const prev = paymentTabs[(idx - 1 + paymentTabs.length) % paymentTabs.length];
+            activateTab(prev);
+            prev.focus();
+        } else if (e.key === 'Home') {
+            e.preventDefault();
+            activateTab(paymentTabs[0]);
+            paymentTabs[0].focus();
+        } else if (e.key === 'End') {
+            e.preventDefault();
+            activateTab(paymentTabs[paymentTabs.length - 1]);
+            paymentTabs[paymentTabs.length - 1].focus();
+        }
     });
 });