leaflet.pub
a tool for shared writing and social publishing
add screen reader labels for quotes and comments in Interactions
schlage.town
+11
-5
+11
-5
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+11
-5
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
···
60
60
};
61
61
62
62
// Update query parameter when drawer state changes
63
-
if (typeof window !== "undefined" && (updatedState.drawerOpen !== undefined || updatedState.drawer !== undefined)) {
63
+
if (
64
+
typeof window !== "undefined" &&
65
+
(updatedState.drawerOpen !== undefined ||
66
+
updatedState.drawer !== undefined)
67
+
) {
64
68
const url = new URL(window.location.href);
65
69
const newDocState = newState[document_uri];
66
-
70
+
67
71
if (newDocState.drawerOpen && newDocState.drawer) {
68
72
url.searchParams.set("interactionDrawer", newDocState.drawer);
69
73
} else {
70
74
url.searchParams.delete("interactionDrawer");
71
75
}
72
-
76
+
73
77
window.history.replaceState({}, "", url.toString());
74
78
}
75
79
···
126
130
else setInteractionState(document_uri, { drawerOpen: false });
127
131
}}
128
132
>
129
-
<QuoteTiny /> {props.quotesCount}{" "}
133
+
<span className="sr-only">Post quotes</span>
134
+
<QuoteTiny aria-hidden /> {props.quotesCount}{" "}
130
135
{!props.compact && `Quote${props.quotesCount === 1 ? "" : "s"}`}
131
136
</button>
132
137
{props.showComments === false ? null : (
···
138
143
else setInteractionState(document_uri, { drawerOpen: false });
139
144
}}
140
145
>
141
-
<CommentTiny /> {props.commentsCount}{" "}
146
+
<span className="sr-only">Post comments</span>
147
+
<CommentTiny aria-hidden /> {props.commentsCount}{" "}
142
148
{!props.compact && `Comment${props.commentsCount === 1 ? "" : "s"}`}
143
149
</button>
144
150
)}