From bb9bebe4ed4ddeecfb4304079be6470ef8573273 Mon Sep 17 00:00:00 2001
From: Dhananjay Maurya <dhananjaymaury366@gmail.com>
Date: Sat, 5 Sep 2026 18:09:35 +0530
Subject: [PATCH] fix(DecryptedText): hide sr-only reference text in tailwind
 variants

The CSS variants were fixed with visibility hidden, but the tailwind
variants relied solely on the sr-only utility class, leaving the
reference text visible when Tailwind is absent or purged.

Add an inline srOnly style with full screen-reader-only properties
plus visibility hidden, keeping the sr-only class for compatibility.
Now all 4 variants hide the reference text.

Related to #1066 (completes #1067 across all variants)
---
 .../DecryptedText/DecryptedText.jsx             | 17 ++++++++++++++++-
 .../DecryptedText/DecryptedText.tsx             | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/tailwind/TextAnimations/DecryptedText/DecryptedText.jsx b/src/tailwind/TextAnimations/DecryptedText/DecryptedText.jsx
index 49377e0e6..21e28fe35 100644
--- a/src/tailwind/TextAnimations/DecryptedText/DecryptedText.jsx
+++ b/src/tailwind/TextAnimations/DecryptedText/DecryptedText.jsx
@@ -1,6 +1,21 @@
 import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import { motion } from 'motion/react';
 
+const styles = {
+  srOnly: {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0,0,0,0)',
+    whiteSpace: 'nowrap',
+    border: 0,
+    visibility: 'hidden'
+  }
+};
+
 export default function DecryptedText({
   text,
   speed = 50,
@@ -351,7 +366,7 @@ export default function DecryptedText({
       {...animateProps}
       {...props}
     >
-      <span className="sr-only">{displayText}</span>
+      <span className="sr-only" style={styles.srOnly}>{displayText}</span>
 
       <span aria-hidden="true">
         {displayText.split('').map((char, index) => {
diff --git a/src/ts-tailwind/TextAnimations/DecryptedText/DecryptedText.tsx b/src/ts-tailwind/TextAnimations/DecryptedText/DecryptedText.tsx
index 9e8767dba..202973261 100644
--- a/src/ts-tailwind/TextAnimations/DecryptedText/DecryptedText.tsx
+++ b/src/ts-tailwind/TextAnimations/DecryptedText/DecryptedText.tsx
@@ -2,6 +2,21 @@ import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import { motion } from 'motion/react';
 import type { HTMLMotionProps } from 'motion/react';
 
+const styles = {
+  srOnly: {
+    position: 'absolute' as const,
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0,0,0,0)',
+    whiteSpace: 'nowrap' as const,
+    border: 0,
+    visibility: 'hidden' as const
+  }
+};
+
 interface DecryptedTextProps extends HTMLMotionProps<'span'> {
   text: string;
   speed?: number;
@@ -368,7 +383,7 @@ export default function DecryptedText({
       {...animateProps}
       {...props}
     >
-      <span className="sr-only">{displayText}</span>
+      <span className="sr-only" style={styles.srOnly}>{displayText}</span>
 
       <span aria-hidden="true">
         {displayText.split('').map((char, index) => {