case 'i': changeLanguage('es'); break;
case 'z': changeLanguage('en'); break;
case 'm': changeLanguage('qu'); break;

const navElements = Array.from(
  document.querySelectorAll('[data-nav-item]')
) as HTMLElement[];

// Arrow keys cycle through elements
// Enter/Space activates focused element

const getVoiceLanguage = () => {
  const voiceMap: Record<string, string> = {
    es: 'es-ES',
    en: 'en-US',
    qu: 'es-ES' // Kichwa uses Spanish voice
  };
  return voiceMap[locale.value] || 'es-ES';
};

const excludeSelectors = [
  'script', 'style',
  'nav', 'footer',
  '.sr-only',
  '[aria-hidden="true"]',
  'button', 'input'
];

<!-- Loading state announcement -->
<div v-if="loading"
     role="status"
     aria-live="polite">
  <div class="animate-spin..."></div>
  <p>{{ $t('dashboard.reports.loading') }}</p>
</div>

<div v-if="notification"
     role="alert"
     aria-live="assertive">
  {{ notification.message }}
</div>

<label for="titulo">
  {{ $t('reportes.campos.titulo') }}
  <span class="text-red-500" aria-label="requerido">*</span>
</label>
<input id="titulo"
       v-model="formData.titulo"
       required
       aria-required="true" />

<p v-if="error"
   role="alert"
   class="text-red-600">
  {{ error }}
</p>

<!-- Survey list -->
<div role="list">
  <article v-for="encuesta in encuestas"
           :key="encuesta.id"
           role="listitem">
    <h3>{{ encuesta.titulo }}</h3>
    <!-- Card content -->
  </article>
</div>

<nav aria-label="Breadcrumb">
  <ol role="list">
    <li><a href="/">Home</a></li>
    <li aria-current="page">Current Page</li>
  </ol>
</nav>

<div class="max-w-4xl mx-auto">
  <!-- ~75-80 characters per line -->
</div>

<input class="px-4 py-3">
  <!-- ~48px height on mobile -->
</input>

<input type="radio" class="w-5 h-5">
  <!-- 20px input + 28px padding = 48px total -->
</input>

<a class="block py-4 px-6">
  <!-- Minimum 56px height -->
</a>