From: Zetaphor <zetaphor@hey.com>
Date: Fri, 16 Jun 2023 20:27:41 +0000 (-0300)
Subject: Use article semantic HTML tag for posts/comments
X-Git-Url: http://these/git/%22https:/nerdica.net/%7B%24%7B%60data:application/manifest%20json;base64%2C%24%7Bawait?a=commitdiff_plain;h=5d7e5cac33fc27a1a67196377963a54082d5c69e;p=lemmy-ui.git

Use article semantic HTML tag for posts/comments
---

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 9ebbf34..aeb4a71 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -282,7 +282,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     return (
       <li className="comment" role="comment">
-        <div
+        <article
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
             "border-top border-light": !this.props.noBorder,
@@ -945,7 +945,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </div>
             )}
           </div>
-        </div>
+        </article>
         {showMoreChildren && (
           <div
             className={classNames("details ml-1 comment-node py-2", {
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 23ae389..e170a33 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -230,13 +230,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   body() {
     const body = this.postView.post.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 ? (
           <pre>{body}</pre>
         ) : (
           <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
         )}
-      </div>
+      </article>
     ) : (
       <></>
     );
@@ -1398,7 +1398,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {/* The mobile view*/}
         <div className="d-block d-sm-none">
-          <div className="row post-container">
+          <article className="row post-container">
             <div className="col-12">
               {this.createdLine()}
 
@@ -1413,12 +1413,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.duplicatesLine()}
               {this.removeAndBanDialogs()}
             </div>
-          </div>
+          </article>
         </div>
 
         {/* The larger view*/}
         <div className="d-none d-sm-block">
-          <div className="row post-container">
+          <article className="row post-container">
             {!this.props.viewOnly && this.voteBar()}
             <div className="col-sm-2 pr-0 post-media">
               <div className="">{this.thumbnail()}</div>
@@ -1435,7 +1435,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 </div>
               </div>
             </div>
-          </div>
+          </article>
         </div>
       </>
     );
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index dadebcf..36c8436 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -548,7 +548,7 @@ export class Post extends Component<any, PostState> {
     const res = this.state.postRes;
     if (res.state === "success") {
       return (
-        <div className="mb-3">
+        <aside className="mb-3">
           <Sidebar
             community_view={res.data.community_view}
             moderators={res.data.moderators}
@@ -566,7 +566,7 @@ export class Post extends Component<any, PostState> {
             onBlockCommunity={this.handleBlockCommunity}
             onEditCommunity={this.handleEditCommunity}
           />
-        </div>
+        </aside>
       );
     }
   }