Accessible Links

// 1. Download Link (PDF)
a(href="report.pdf" download target="_blank" rel="noopener noreferrer" class="accessible-link")
  | Download Annual Report
  span.sr-only (PDF, 2.4MB, opens in new window)
  svg.icon(aria-hidden="true" viewBox="0 0 24 24" width="16" height="16")
    path(d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z")

// 2. External Link (opens in new window)
a(href="https://example.com" target="_blank" rel="noopener noreferrer" class="accessible-link")
  | Visit Partner Site
  span.sr-only (opens in new window)
  svg.icon(aria-hidden="true" viewBox="0 0 24 24" width="16" height="16")
    path(d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z")

// 3. Internal Link (Standard)
a(href="/about" class="accessible-link") About Us

<>
  {/* 1. Download/External with Warnings */}
  <a href="report.pdf" target="_blank" rel="noopener noreferrer" className="accessible-link">
    Download Annual Report
    <span className="sr-only">(PDF, 2.4MB, opens in new window)</span>
    <ExternalIcon aria-hidden="true" />
  </a>

  {/* 2. Standard Internal */}
  <a href="/about" className="accessible-link">
    About Us
  </a>
</>

<!-- Use props to switch between styles -->
<a :href="url" :target="isExternal ? '_blank' : null" :rel="isExternal ? 'noopener' : null">
  <slot />
  <template v-if="isExternal">
    <span class="sr-only">(opens in new window)</span>
    <ExternalIcon aria-hidden="true" />
  </template>
</a>

<div class="flex flex-col gap-4">
  <!-- External -->
  <a href="#" target="_blank" class="inline-flex items-center gap-1 text-blue-600 hover:underline">
    Visit Partner Site <span class="sr-only">(opens in new window)</span>
    <svg class="w-4 h-4" aria-hidden="true" fill="currentColor"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>
  </a>
  
  <!-- Internal -->
  <a href="/about" class="text-blue-600 hover:underline">About Us</a>
</div>