From 2d6ba60688aa04e5e08f9e8611292453f4c4b9d2 Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@sndrsn.co.uk>
Date: Wed, 15 May 2024 10:58:58 +0100
Subject: [PATCH] try new hiding approach

---
 .../components/SequenceDetailsPage/MutationBadge.tsx |  2 +-
 website/src/styles/base.scss                         | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/website/src/components/SequenceDetailsPage/MutationBadge.tsx b/website/src/components/SequenceDetailsPage/MutationBadge.tsx
index 6676fc83c..f6b26c5c2 100644
--- a/website/src/components/SequenceDetailsPage/MutationBadge.tsx
+++ b/website/src/components/SequenceDetailsPage/MutationBadge.tsx
@@ -18,7 +18,7 @@ export const SubBadge: FC<SubProps> = ({ position, mutationTo, mutationFrom, seq
     return (
         <li key={position} className='inline-block'>
             <span className='rounded-[3px] font-mono text-xs overflow-auto'>
-                {sequenceName !== null && <span className='px-[4px] py-[2px] sr-only'>{sequenceName}:</span>}
+                {sequenceName !== null && <span className='px-[4px] py-[2px] hidden-but-searchable'>{sequenceName}:</span>}
                 <span className='px-[4px] py-[2px] rounded-s-[3px]' style={{ background: getColor(mutationFrom) }}>
                     {mutationFrom}
                 </span>
diff --git a/website/src/styles/base.scss b/website/src/styles/base.scss
index 9b5081cc5..bde30c1e4 100644
--- a/website/src/styles/base.scss
+++ b/website/src/styles/base.scss
@@ -113,4 +113,14 @@ table, tr, td {
 .rs-picker input{
   text-transform: lowercase;
 
-}
\ No newline at end of file
+}
+
+.hidden-but-searchable {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+}