Merge pull request #16718 from nwaliaez/fix/16544-accessibility-popup-modal

Fix Tab accessibility issues with popup modals

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -159,7 +159,11 @@ export function Checkbox({
         if (values && checked === undefined) active = values[id || name]
 
         function handleBlurEvent(e: React.FocusEvent<HTMLInputElement>) {
-          if (handleBlur) handleBlur(e)
+          if (handleBlur) {
+            setTimeout(() => {
+              handleBlur(e)
+            }, 100)
+          }
           if (onBlur) onBlur(e)
         }
 

packages/ui/src/components/Input/Input.tsx

@@ -81,7 +81,11 @@ function Input({
   if (values && !value) value = values[id || name]
 
   function handleBlurEvent(e: React.FocusEvent<HTMLInputElement>) {
-    if (handleBlur) handleBlur(e)
+    if (handleBlur) {
+      setTimeout(() => {
+        handleBlur(e)
+      }, 100)
+    }
     if (onBlur) onBlur(e)
   }
 
@@ -267,7 +271,11 @@ function TextArea({
   if (values && !value) value = values[id || name]
 
   function handleBlurEvent(e: React.FocusEvent<HTMLTextAreaElement>) {
-    if (handleBlur) handleBlur(e)
+    if (handleBlur) {
+      setTimeout(() => {
+        handleBlur(e)
+      }, 100)
+    }
     if (onBlur) onBlur(e)
   }