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 9ebbf3482004d2b2b47a9396c19f9d7dc2b10121..aeb4a71c7f83e9f3edcb632876d69ed2aa5fd168 100644 (file)
--- 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 23ae3892b4c2d706e0fd15acd03b06eb38307571..e170a3321b973c606617d70598162bee7391f8f8 100644 (file)
--- 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 dadebcf9a8689c20878dc8ad4320a27c4d6b6203..36c843688e1093b313cabac85a62ef62e96a28f7 100644 (file)
--- 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>
       );
     }
   }