फ़ोकस और फ़ोकस-दृश्य रूपांतर

<!-- focus-visible is the accessible modern choice -->
<div class="flex gap-4">
  <button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
    Tab to me
  </button>
</div>

<!-- focus: fires on both mouse click and keyboard tab -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    placeholder="Click or tab to focus"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  />
  <button class="w-full bg-gray-200 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">
    Focus-on-click-too button
  </button>
</div>

<!-- focus-visible: only shows ring for keyboard, not mouse -->
<div class="space-y-3 max-w-sm">
  <!-- Try: click with mouse (no ring) vs Tab key (ring appears) -->
  <button class="w-full bg-blue-500 text-white py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
    Smart focus (use Tab key)
  </button>

  <input
    type="text"
    placeholder="Input: ring on keyboard focus"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
  />
</div>

<!-- Focus colors for different contexts -->
<div class="space-y-4 max-w-sm">
  <!-- Normal: brand color ring -->
  <input class="w-full border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Brand focus" />

  <!-- Success: green ring -->
  <input class="w-full border border-green-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 bg-green-50" placeholder="Valid input" />

  <!-- Error: red ring -->
  <input class="w-full border border-red-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 bg-red-50" placeholder="Invalid input" />
</div>

<!-- Accessible link focus styles -->
<p class="text-gray-700 leading-relaxed max-w-prose">
  Visit our
  <a href="#" class="text-blue-600 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded">
    documentation
  </a>
  to learn more about
  <a href="#" class="text-blue-600 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded">
    getting started
  </a>
  with our product.
</p>

<!-- Entire form group highlights when input is focused -->
<div class="space-y-3 max-w-sm">
  <!-- Container gets ring when child input is focused -->
  <div class="border border-gray-200 rounded-xl p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
    <label class="block text-xs font-medium text-gray-500 mb-1">Email Address</label>
    <input
      type="email"
      class="w-full focus:outline-none text-gray-800"
      placeholder="you@example.com"
    />
  </div>

  <div class="border border-gray-200 rounded-xl p-3 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 transition-all">
    <label class="block text-xs font-medium text-gray-500 mb-1">Password</label>
    <input
      type="password"
      class="w-full focus:outline-none text-gray-800"
      placeholder="••••••••"
    />
  </div>
</div>

<!-- Smoothly animated focus rings -->
<div class="space-y-4 max-w-sm p-4">
  <input
    type="text"
    placeholder="Focus with smooth transition"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-150"
  />

  <textarea
    placeholder="Textarea with focus transition"
    rows="3"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-150 resize-none"
  ></textarea>
</div>

<!-- ❌ Bad: removes focus with no replacement -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none">
  Inaccessible (no focus indicator)
</button>

<!-- ✅ Good: replaces with custom ring -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
  Accessible (custom ring)
</button>

<!-- Focus styles on different form controls -->
<div class="space-y-4 max-w-sm">
  <!-- Select -->
  <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <!-- Checkboxes -->
  <label class="flex items-center gap-3 cursor-pointer">
    <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" />
    <span>Agree to terms</span>
  </label>

  <!-- Radio -->
  <label class="flex items-center gap-3 cursor-pointer">
    <input type="radio" name="plan" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" />
    <span>Monthly plan</span>
  </label>
</div>

<!-- Skip navigation link: visible only on keyboard focus -->
<a
  href="#main-content"
  class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-blue-500 text-white px-4 py-2 rounded font-medium z-50"
>
  Skip to main content
</a>

<nav class="bg-gray-800 text-white px-6 py-4">
  <!-- Navigation items -->
</nav>

<main id="main-content" class="p-6">
  Main content here
</main>

<!-- Focus rings for both light and dark mode -->
<div class="p-6 bg-white dark:bg-gray-900 space-y-3">
  <input
    type="text"
    placeholder="Adaptive focus ring"
    class="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:border-blue-500 max-w-sm"
  />
</div>