From 75a9cb3cf9a4a407047eabda4122eb4ff5aed66c Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 26 Apr 2024 16:43:10 -0500
Subject: [PATCH] Put screenreaderOnly style in theme

---
 src/app/content/components/Page/PageContent.tsx | 11 +----------
 src/app/theme.ts                                | 10 ++++++++++
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index d05395ae74..6a9299a926 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -2,7 +2,7 @@ import Color from 'color';
 import styled, { css } from 'styled-components/macro';
 import MainContent from '../../../components/MainContent';
 import { MAIN_CONTENT_ID } from '../../../context/constants';
-import theme from '../../../theme';
+import theme, { screenreaderOnly } from '../../../theme';
 import { highlightStyles } from '../../constants';
 import {
   highlightBlockPadding,
@@ -21,15 +21,6 @@ export const contentTextStyle = css`
 // Search and key term highlights need to target .math as well,
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
-const screenreaderOnly = `
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-`;
 
 export default styled(MainContent)`
   ${contentTextStyle}
diff --git a/src/app/theme.ts b/src/app/theme.ts
index c43ac98245..03e40b3972 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -2,6 +2,16 @@ import { FlattenSimpleInterpolation } from 'styled-components';
 import { css } from 'styled-components/macro';
 // based on https://sketchviewer.com/sketches/59766aabb57e8900114c89ce/latest/
 
+export const screenreaderOnly = `
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+
 export interface ColorSet {
   base: string;
   foreground: string;