From: Anansi <72401951+0xAnansi@users.noreply.github.com>
Date: Mon, 26 Jun 2023 18:51:04 +0000 (+0200)
Subject: Fix: missing semantic css classes and html elements (#1583)
X-Git-Url: http://these/git/%7B%60%24%7Bdocument.location.origin%7D/feeds/%7Bicon?a=commitdiff_plain;h=cb6ab15254a60a10fa993e65387d40c739c432ef;p=lemmy-ui.git

Fix: missing semantic css classes and html elements (#1583)

* Fix: missing semantic css classes and html elements.

Now all pages have a main and aside element when a sidebar is present to facilitate custom theming. This does not impact the default behavior of the front.

* Fix: re-added communityref on main element

---------

Co-authored-by: 0xAnansi <0xAnansi@omageni.com>
Co-authored-by: Jay Sitter <jsit@users.noreply.github.com>
Co-authored-by: Dessalines <dessalines@users.noreply.github.com>
---

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 08ba40e..be0319d 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -59,7 +59,7 @@ export class App extends Component<any, any> {
 
                         return (
                           <ErrorGuard>
-                            <main tabIndex={-1} ref={this.mainContentRef}>
+                            <div tabIndex={-1}>
                               {RouteComponent &&
                                 (isAuthPath(path ?? "") ? (
                                   <AuthGuard>
@@ -68,7 +68,7 @@ export class App extends Component<any, any> {
                                 ) : (
                                   <RouteComponent {...routeProps} />
                                 ))}
-                            </main>
+                            </div>
                           </ErrorGuard>
                         );
                       }}
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 111b47c..a18153f 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -22,7 +22,7 @@ import {
 } from "@utils/helpers";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
-import { Component, linkEvent } from "inferno";
+import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
   AddAdmin,
@@ -154,7 +154,7 @@ export class Community extends Component<
     finished: new Map(),
     isIsomorphic: false,
   };
-
+  private readonly mainContentRef: RefObject<HTMLElement>;
   constructor(props: RouteComponentProps<{ name: string }>, context: any) {
     super(props, context);
 
@@ -195,7 +195,7 @@ export class Community extends Component<
     this.handleSavePost = this.handleSavePost.bind(this);
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
-
+    this.mainContentRef = createRef();
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
       const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
@@ -317,7 +317,7 @@ export class Community extends Component<
             />
 
             <div className="row">
-              <div className="col-12 col-md-8">
+              <main className="col-12 col-md-8" ref={this.mainContentRef}>
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
@@ -339,10 +339,10 @@ export class Community extends Component<
                 {this.selects(res)}
                 {this.listings(res)}
                 <Paginator page={page} onChange={this.handlePageChange} />
-              </div>
-              <div className="d-none d-md-block col-md-4">
+              </main>
+              <aside className="d-none d-md-block col-md-4">
                 {this.sidebar(res)}
-              </div>
+              </aside>
             </div>
           </>
         );
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index f0aa3ff..1aaf50d 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
         const res = this.state.postRes.data;
         return (
           <div className="row">
-            <div className="col-12 col-md-8 mb-3">
+            <main className="col-12 col-md-8 mb-3">
               <HtmlTags
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
@@ -415,8 +415,10 @@ export class Post extends Component<any, PostState> {
                 this.commentsTree()}
               {this.state.commentViewType == CommentViewType.Flat &&
                 this.commentsFlat()}
-            </div>
-            <div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
+            </main>
+            <aside className="d-none d-md-block col-md-4">
+              {this.sidebar()}
+            </aside>
           </div>
         );
       }