elordenador/proyecto-final
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: complete WAI-ARIA tabs pattern in checkout.html (aria-selected, aria-controls, tabpanel, keyboard nav)

Browse Source 
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>
This commit is contained in:
copilot-swe-agent[bot]
2026-04-28 07:11:24 +00:00
committed by GitHub
parent 3eb963fadf
commit 6828074dd1
1 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tienda/templates/tienda/checkout.html
+43 -9
View File
@@ -127,19 +127,22 @@
<!-- Tabs --> <!-- Tabs -->
<ul class="nav nav-tabs mb-3" id="paymentTabs" role="tablist"> <ul class="nav nav-tabs mb-3" id="paymentTabs" role="tablist">
<li class="nav-item" role="presentation"> <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 💳 Tarjeta
</button> </button>
</li> </li>
<li class="nav-item" role="presentation"> <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 🅿️ PayPal
</button> </button>
</li> </li>
</ul> </ul>
<!-- Tarjeta tab --> <!-- 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 %} {% if saved_cards %}
<div class="mb-3"> <div class="mb-3">
<p class="fw-semibold">Tarjetas guardadas:</p> <p class="fw-semibold">Tarjetas guardadas:</p>
@@ -183,7 +186,8 @@
</div> </div>
<!-- PayPal tab --> <!-- 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 %} {% if saved_paypal %}
<div class="alert alert-light border mb-3"> <div class="alert alert-light border mb-3">
<small class="text-muted">Cuenta PayPal guardada:</small> <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" }}; const HAS_ADDRESS = {{ addresses|yesno:"true,false" }};
// ---- Tab switching ---- // ---- Tab switching ----
document.querySelectorAll('#paymentTabs .nav-link').forEach(btn => { const paymentTabs = Array.from(document.querySelectorAll('#paymentTabs .nav-link[role="tab"]'));
btn.addEventListener('click', () => {
document.querySelectorAll('#paymentTabs .nav-link').forEach(b => b.classList.remove('active')); 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.querySelectorAll('.payment-tab-content').forEach(p => p.classList.remove('active'));
btn.classList.add('active'); document.getElementById(tab.dataset.tab).classList.add('active');
document.getElementById(btn.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();
}
}); });
}); });