leaflet.pub / leaflet
a tool for shared writing and social publishing
fork atom

use aria-label attrs instead of sr-only

sr-only absolutely positions elements which creates wierd scrolling
issues in places.

awarm.space f73b2048 44ebaf1c

+8 -12
+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
··· 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
··· 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
··· 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 )}