From f73b2048c2856cb27f9379136c2b0e995a97eaf2 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 21 Oct 2025 13:46:46 -0400
Subject: [PATCH] use aria-label attrs instead of sr-only

sr-only absolutely positions elements which creates wierd scrolling
issues in places.
---
 app/lish/Subscribe.tsx                                      | 6 ++----
 .../[publication]/[rkey]/Interactions/Interactions.tsx      | 4 ++--
 app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx  | 4 ++--
 app/reader/ReaderContent.tsx                                | 6 ++----
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/app/lish/Subscribe.tsx b/app/lish/Subscribe.tsx
index 8a2f28ed..48b75e96 100644
--- a/app/lish/Subscribe.tsx
+++ b/app/lish/Subscribe.tsx
@@ -217,8 +217,7 @@ export const SubscribeWithBluesky = (props: {
           pub_uri={props.pub_uri}
           setSuccessModalOpen={setSuccessModalOpen}
         />
-        <a href={`${props.base_url}/rss`} className="flex" target="_blank">
-          <span className="sr-only">Subscribe to RSS</span>
+        <a href={`${props.base_url}/rss`} className="flex" target="_blank" aria-label="Subscribe to RSS">
           <RSSSmall className="self-center" aria-hidden />
         </a>
       </div>
@@ -267,8 +266,7 @@ const ManageSubscription = (props: {
             </a>
           )}
 
-          <a href={`${props.base_url}/rss`} className="flex" target="_blank">
-            <span className="sr-only">Subscribe to RSS</span>
+          <a href={`${props.base_url}/rss`} className="flex" target="_blank" aria-label="Subscribe to RSS">
             <ButtonPrimary fullWidth compact>
               Get RSS
             </ButtonPrimary>
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index 130b206b..91d30991 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -119,8 +119,8 @@ export const Interactions = (props: {
             openInteractionDrawer("quotes", document_uri, props.pageId);
           else setInteractionState(document_uri, { drawerOpen: false });
         }}
+        aria-label="Post quotes"
       >
-        <span className="sr-only">Post quotes</span>
         <QuoteTiny aria-hidden /> {props.quotesCount}{" "}
         {!props.compact && (
           <span
@@ -136,8 +136,8 @@ export const Interactions = (props: {
               openInteractionDrawer("comments", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
+          aria-label="Post comments"
         >
-          <span className="sr-only">Post comments</span>
           <CommentTiny aria-hidden /> {props.commentsCount}{" "}
           {!props.compact && (
             <span
diff --git a/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx b/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
index 36eb55a4..edd41056 100644
--- a/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
@@ -202,8 +202,8 @@ const Interactions = (props: { pageId: string; parentPageId?: string }) => {
               openInteractionDrawer("quotes", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
+          aria-label="Page quotes"
         >
-          <span className="sr-only">Page quotes</span>
           <QuoteTiny aria-hidden /> {quotes}{" "}
         </button>
       )}
@@ -220,8 +220,8 @@ const Interactions = (props: { pageId: string; parentPageId?: string }) => {
               openInteractionDrawer("comments", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
+          aria-label="Page comments"
         >
-          <span className="sr-only">Page comments</span>
           <CommentTiny aria-hidden /> {comments}{" "}
         </button>
       )}
diff --git a/app/reader/ReaderContent.tsx b/app/reader/ReaderContent.tsx
index 03cecf71..5297cf0f 100644
--- a/app/reader/ReaderContent.tsx
+++ b/app/reader/ReaderContent.tsx
@@ -229,14 +229,12 @@ const PostInterations = (props: {
   return (
     <div className={`flex gap-2 text-tertiary text-sm  items-center`}>
       {props.quotesCount === 0 ? null : (
-        <div className={`flex gap-1 items-center `}>
-          <span className="sr-only">Post quotes</span>
+        <div className={`flex gap-1 items-center `} aria-label="Post quotes">
           <QuoteTiny aria-hidden /> {props.quotesCount}
         </div>
       )}
       {props.showComments === false || props.commentsCount === 0 ? null : (
-        <div className={`flex gap-1 items-center`}>
-          <span className="sr-only">Post comments</span>
+        <div className={`flex gap-1 items-center`} aria-label="Post comments">
           <CommentTiny aria-hidden /> {props.commentsCount}
         </div>
       )}
-- 
2.51.2