try new hiding approach

loculus-project · May 15, 2024 · 2d6ba60 · 2d6ba60
1 parent d799b67
commit 2d6ba60
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -113,4 +113,14 @@ table, tr, td {
 .rs-picker input{
   text-transform: lowercase;
 
-}
+}
+
+.hidden-but-searchable {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+}