Use article semantic HTML tag for posts/comments

This commit is contained in:
Zetaphor 2023-06-16 17:27:41 -03:00
parent c4146cc66a
commit 5d7e5cac33
3 changed files with 10 additions and 10 deletions

View file

@ -282,7 +282,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
return ( return (
<li className="comment" role="comment"> <li className="comment" role="comment">
<div <article
id={`comment-${cv.comment.id}`} id={`comment-${cv.comment.id}`}
className={classNames(`details comment-node py-2`, { className={classNames(`details comment-node py-2`, {
"border-top border-light": !this.props.noBorder, "border-top border-light": !this.props.noBorder,
@ -945,7 +945,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</div> </div>
)} )}
</div> </div>
</div> </article>
{showMoreChildren && ( {showMoreChildren && (
<div <div
className={classNames("details ml-1 comment-node py-2", { className={classNames("details ml-1 comment-node py-2", {

View file

@ -230,13 +230,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
body() { body() {
const body = this.postView.post.body; const body = this.postView.post.body;
return body ? ( return body ? (
<div id="postContent" className="col-12 card my-2 p-2"> <article id="postContent" className="col-12 card my-2 p-2">
{this.state.viewSource ? ( {this.state.viewSource ? (
<pre>{body}</pre> <pre>{body}</pre>
) : ( ) : (
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} /> <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
)} )}
</div> </article>
) : ( ) : (
<></> <></>
); );
@ -1398,7 +1398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
{/* The mobile view*/} {/* The mobile view*/}
<div className="d-block d-sm-none"> <div className="d-block d-sm-none">
<div className="row post-container"> <article className="row post-container">
<div className="col-12"> <div className="col-12">
{this.createdLine()} {this.createdLine()}
@ -1413,12 +1413,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.duplicatesLine()} {this.duplicatesLine()}
{this.removeAndBanDialogs()} {this.removeAndBanDialogs()}
</div> </div>
</div> </article>
</div> </div>
{/* The larger view*/} {/* The larger view*/}
<div className="d-none d-sm-block"> <div className="d-none d-sm-block">
<div className="row post-container"> <article className="row post-container">
{!this.props.viewOnly && this.voteBar()} {!this.props.viewOnly && this.voteBar()}
<div className="col-sm-2 pr-0 post-media"> <div className="col-sm-2 pr-0 post-media">
<div className="">{this.thumbnail()}</div> <div className="">{this.thumbnail()}</div>
@ -1435,7 +1435,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</div> </div>
</div> </div>
</div> </div>
</div> </article>
</div> </div>
</> </>
); );

View file

@ -548,7 +548,7 @@ export class Post extends Component<any, PostState> {
const res = this.state.postRes; const res = this.state.postRes;
if (res.state === "success") { if (res.state === "success") {
return ( return (
<div className="mb-3"> <aside className="mb-3">
<Sidebar <Sidebar
community_view={res.data.community_view} community_view={res.data.community_view}
moderators={res.data.moderators} moderators={res.data.moderators}
@ -566,7 +566,7 @@ export class Post extends Component<any, PostState> {
onBlockCommunity={this.handleBlockCommunity} onBlockCommunity={this.handleBlockCommunity}
onEditCommunity={this.handleEditCommunity} onEditCommunity={this.handleEditCommunity}
/> />
</div> </aside>
); );
} }
} }