External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): address Doctor findings (#1143)

Browse Source 
Accessibility/semantics pass aligned with React Doctor: role-based spans/divs become real buttons, role=status becomes <output>, modals use native <dialog>, author/peer flags render as <img>, and embed/challenge iframes are sandboxed. Includes review follow-ups: correct button chrome/centering/themed dialog colors and focus rings, the missing aria-label i18n keys (all languages), the Yandex image-search URL, clearer .bso setup steps, a keyboard-accessible image-search dropdown, and removal of the post-edit ('comment edited') display (mod edits unchanged).
This commit is contained in:
Tommaso Casaburi
2026-05-29 17:09:07 +07:00
committed by GitHub
parent ac95e58433
commit e082c7b428
132 changed files with 1753 additions and 1224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/post/post.module.css
+54 -11
View File
@@ -34,6 +34,9 @@
}
.postDesktop .hideButton {
appearance: none;
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-position: center;
width: 18px;
@@ -42,6 +45,8 @@
image-rendering: pixelated;
cursor: pointer;
transform: translateY(-1px);
margin: 0;
padding: 0;
}
.postDesktopHidden {
@@ -109,6 +114,12 @@
}
.userAddress {
appearance: none;
border: 0;
display: inline;
font: inherit;
line-height: inherit;
margin: 0;
padding: 0 5px;
border-radius: 6px;
font-size: 0.8em;
@@ -144,12 +155,18 @@
image-rendering: pixelated;
}
.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
.postDesktop .postNumLink a, .postDesktop .postNumLink span, .postDesktop .postNumLink button, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span, .replyDesktop .postNumLink button {
appearance: none;
background: transparent;
border: 0;
color: unset;
font: inherit;
margin: 0;
padding: 0;
text-decoration: unset;
}
.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .postDesktop .postNumLink button:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover, .replyDesktop .postNumLink button:hover {
color: var(--button-desktop-text-color-hover);
}
@@ -179,7 +196,13 @@
}
.postDesktop .closeMedia {
appearance: none;
background: transparent;
border: 0;
color: var(--button-desktop-text-color);
font: inherit;
margin: 0;
padding: 0;
text-decoration: underline;
text-transform: capitalize;
}
@@ -310,6 +333,9 @@
}
.postDesktop .summary .omittedRepliesButtonWrapper {
appearance: none;
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-position: center;
width: 18px;
@@ -317,6 +343,8 @@
display: inline-block;
image-rendering: pixelated;
cursor: pointer;
margin: 0;
padding: 0;
}
.postDesktop .summary .hideOmittedReplies {
@@ -361,7 +389,7 @@
justify-content: center;
}
.mobileUnhideButton span {
.mobileUnhideButton span, .mobileUnhideButton button {
padding: 5px 18px 5px;
}
@@ -600,7 +628,14 @@
}
.replyToPost {
appearance: none;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
margin: 0;
padding: 0;
}
.redEditMessage {
@@ -695,22 +730,30 @@
padding: 1.5px 0;
}
.editedInfo {
color: var(--post-mobile-abbr-text-color);
font-size: var(--post-mobile-abbr-font-size);
}
.showOriginal {
.abbr button {
appearance: none;
background: transparent;
border: 0;
color: var(--post-link-text-color);
cursor: pointer;
display: inline;
font: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-decoration: var(--post-content-link-text-decoration);
}
.showOriginal:hover {
cursor: pointer;
.abbr button:hover {
color: var(--post-link-text-color-hover);
text-decoration: var(--post-content-link-text-decoration-hover);
}
.abbr button:focus-visible {
outline: 1px dotted currentcolor;
outline-offset: 1px;
}
@media (max-width: 640px) {
.replyQuotePreview {
margin-right: 10px;
src/views/post/post.tsx
+9 -3
View File
@@ -283,7 +283,13 @@ const PostPage = () => {
const resolvedCommunityAddress = useResolvedCommunityAddress();
const resolvedCommunityIdentifier = useCommunityIdentifier(resolvedCommunityAddress);
const isInAllView = isAllView(pathname);
const routeState = useMemo(() => getEffectiveRouteUserState(locationState), [locationKey, pathname, locationState]);
const routeState = useMemo(() => {
// locationKey/pathname are intentional deps: getEffectiveRouteUserState falls back to the
// non-reactive window.history.state, so the memo must re-run on every navigation to re-read it.
void locationKey;
void pathname;
return getEffectiveRouteUserState(locationState);
}, [locationKey, pathname, locationState]);
const resolvedComment = useCommentWithFeedCache({ commentCid, autoUpdate: autoUpdateEnabled, community: resolvedCommunityIdentifier });
const queuedComment = useMemo(() => getQueuedCommentFromRouteState(routeState, commentCid), [routeState, commentCid]);
@@ -370,16 +376,16 @@ const PostPage = () => {
const queuedReplyHasMore = queuedReplyRepliesResult.hasMore;
const queuedReplyLoadMore = queuedReplyRepliesResult.loadMore;
const queuedReplyReset = (queuedReplyRepliesResult as { reset?: () => Promise<void> }).reset;
const queuedReplyReplies = (queuedReplyRepliesResult.updatedReplies?.length ? queuedReplyRepliesResult.updatedReplies : queuedReplyRepliesResult.replies) || [];
const replyPaginationOverride = useMemo(() => {
if (!queuedReply || !post?.cid) return undefined;
const queuedReplyReplies = (queuedReplyRepliesResult.updatedReplies?.length ? queuedReplyRepliesResult.updatedReplies : queuedReplyRepliesResult.replies) || [];
return {
hasMore: queuedReplyHasMore,
loadMore: queuedReplyLoadMore,
replies: mergeRepliesWithQueuedReply(queuedReplyReplies, queuedReply),
reset: queuedReplyReset,
};
}, [post?.cid, queuedReply, queuedReplyHasMore, queuedReplyLoadMore, queuedReplyReplies, queuedReplyReset]);
}, [post?.cid, queuedReply, queuedReplyHasMore, queuedReplyLoadMore, queuedReplyRepliesResult.replies, queuedReplyRepliesResult.updatedReplies, queuedReplyReset]);
useEffect(() => {
return () => {