a tool for shared writing and social publishing
use aria-label attrs instead of sr-only
sr-only absolutely positions elements which creates wierd scrolling
issues in places.
+8
-12
+2
-4
app/lish/Subscribe.tsx
+2
-4
app/lish/Subscribe.tsx
···
217
217
pub_uri={props.pub_uri}
218
218
setSuccessModalOpen={setSuccessModalOpen}
219
219
/>
220
-
<a href={`${props.base_url}/rss`} className="flex" target="_blank">
221
-
<span className="sr-only">Subscribe to RSS</span>
220
+
<a href={`${props.base_url}/rss`} className="flex" target="_blank" aria-label="Subscribe to RSS">
222
221
<RSSSmall className="self-center" aria-hidden />
223
222
</a>
224
223
</div>
···
267
266
</a>
268
267
)}
269
268
270
-
<a href={`${props.base_url}/rss`} className="flex" target="_blank">
271
-
<span className="sr-only">Subscribe to RSS</span>
269
+
<a href={`${props.base_url}/rss`} className="flex" target="_blank" aria-label="Subscribe to RSS">
272
270
<ButtonPrimary fullWidth compact>
273
271
Get RSS
274
272
</ButtonPrimary>
+2
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+2
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
···
119
119
openInteractionDrawer("quotes", document_uri, props.pageId);
120
120
else setInteractionState(document_uri, { drawerOpen: false });
121
121
}}
122
+
aria-label="Post quotes"
122
123
>
123
-
<span className="sr-only">Post quotes</span>
124
124
<QuoteTiny aria-hidden /> {props.quotesCount}{" "}
125
125
{!props.compact && (
126
126
<span
···
136
136
openInteractionDrawer("comments", document_uri, props.pageId);
137
137
else setInteractionState(document_uri, { drawerOpen: false });
138
138
}}
139
+
aria-label="Post comments"
139
140
>
140
-
<span className="sr-only">Post comments</span>
141
141
<CommentTiny aria-hidden /> {props.commentsCount}{" "}
142
142
{!props.compact && (
143
143
<span
+2
-2
app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
+2
-2
app/lish/[did]/[publication]/[rkey]/PublishedPageBlock.tsx
···
202
202
openInteractionDrawer("quotes", document_uri, props.pageId);
203
203
else setInteractionState(document_uri, { drawerOpen: false });
204
204
}}
205
+
aria-label="Page quotes"
205
206
>
206
-
<span className="sr-only">Page quotes</span>
207
207
<QuoteTiny aria-hidden /> {quotes}{" "}
208
208
</button>
209
209
)}
···
220
220
openInteractionDrawer("comments", document_uri, props.pageId);
221
221
else setInteractionState(document_uri, { drawerOpen: false });
222
222
}}
223
+
aria-label="Page comments"
223
224
>
224
-
<span className="sr-only">Page comments</span>
225
225
<CommentTiny aria-hidden /> {comments}{" "}
226
226
</button>
227
227
)}
+2
-4
app/reader/ReaderContent.tsx
+2
-4
app/reader/ReaderContent.tsx
···
229
229
return (
230
230
<div className={`flex gap-2 text-tertiary text-sm items-center`}>
231
231
{props.quotesCount === 0 ? null : (
232
-
<div className={`flex gap-1 items-center `}>
233
-
<span className="sr-only">Post quotes</span>
232
+
<div className={`flex gap-1 items-center `} aria-label="Post quotes">
234
233
<QuoteTiny aria-hidden /> {props.quotesCount}
235
234
</div>
236
235
)}
237
236
{props.showComments === false || props.commentsCount === 0 ? null : (
238
-
<div className={`flex gap-1 items-center`}>
239
-
<span className="sr-only">Post comments</span>
237
+
<div className={`flex gap-1 items-center`} aria-label="Post comments">
240
238
<CommentTiny aria-hidden /> {props.commentsCount}
241
239
</div>
242
240
)}