From eb1a58b9e5d3e75a4bd01ac72c67a2209956f928 Mon Sep 17 00:00:00 2001
From: pushkar <pushkargupta606@gmail.com>
Date: Thu, 4 Dec 2025 00:04:24 +0530
Subject: [PATCH 1/2] feat: add :focus-visible support for better keyboard
 accessibility

- Add :focus-visible rules to show focus outlines for keyboard navigation
- Add :focus:not(:focus-visible) to hide outlines for mouse clicks
- Improves WCAG 2.1 compliance (SC 2.4.7)
- Uses low-specificity :where() for easy customization
- Covers all interactive elements (buttons, inputs, links, etc.)
---
 src/components/forms.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/forms.scss b/src/components/forms.scss
index 1eba7a5..4730278 100644
--- a/src/components/forms.scss
+++ b/src/components/forms.scss
@@ -90,3 +90,27 @@
 :-moz-ui-invalid {
   box-shadow: none;
 }
+
+/* Modern focus management for better accessibility */
+:where(
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  [tabindex]:not([tabindex="-1"])
+):focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Remove focus outline for mouse users */
+:where(
+  a,
+  button,
+  input,
+  select,
+  textarea
+):focus:not(:focus-visible) {
+  outline: none;
+}

From 276398ad6990c3417b1b2e1eec824b13d9cb07db Mon Sep 17 00:00:00 2001
From: pushkar <pushkargupta606@gmail.com>
Date: Thu, 4 Dec 2025 00:15:51 +0530
Subject: [PATCH 2/2] fix: add tabindex selector to focus:not(:focus-visible)
 rule

Ensures custom focusable elements with tabindex don't show
outlines on mouse clicks, matching the :focus-visible behavior
---
 src/components/forms.scss | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/forms.scss b/src/components/forms.scss
index 4730278..a0037de 100644
--- a/src/components/forms.scss
+++ b/src/components/forms.scss
@@ -91,26 +91,21 @@
   box-shadow: none;
 }
 
-/* Modern focus management for better accessibility */
-:where(
-  a,
+:where(a,
   button,
   input,
   select,
   textarea,
-  [tabindex]:not([tabindex="-1"])
-):focus-visible {
+  [tabindex]:not([tabindex="-1"])):focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
-/* Remove focus outline for mouse users */
-:where(
-  a,
+:where(a,
   button,
   input,
   select,
-  textarea
-):focus:not(:focus-visible) {
+  textarea,
+  [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
   outline: none;
-}
+}
\ No newline at end of file