Use aside semantic HTML tag for sidebars

src/shared/components/community/sidebar.tsx

@@ -133,7 +133,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const { name, actor_id } = this.props.community_view.community;
     return (
       <div id="sidebarContainer">
-        <div id="sidebarMain" className="card border-secondary mb-3">
+        <section id="sidebarMain" className="card border-secondary mb-3">
           <div className="card-body">
             {this.communityTitle()}
             {this.props.editable && this.adminButtons()}
@@ -154,14 +154,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               </div>
             )}
           </div>
-        </div>
-        <div id="sidebarInfo" className="card border-secondary mb-3">
+        </section>
+        <section id="sidebarInfo" className="card border-secondary mb-3">
           <div className="card-body">
             {this.description()}
             {this.badges()}
             {this.mods()}
           </div>
-        </div>
+        </section>
       </div>
     );
   }

src/shared/components/home/home.tsx

@@ -422,36 +422,37 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div>
-        <div id="sidebarContainer">
-          <div id="sidebarMain" className="card border-secondary mb-3">
-            <div className="card-body">
-              {this.trendingCommunities()}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
+      <div id="sidebarContainer">
+        <section id="sidebarMain" className="card border-secondary mb-3">
+          <div className="card-body">
+            {this.trendingCommunities()}
+            {canCreateCommunity(this.state.siteRes) && (
               <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
+                path="/create_community"
+                translationKey="create_a_community"
               />
-            </div>
+            )}
+            <LinkButton
+              path="/communities"
+              translationKey="explore_communities"
+            />
           </div>
-          <SiteSidebar
-            site={site}
-            admins={admins}
-            counts={counts}
-            online={online}
-            showLocal={showLocal(this.isoData)}
-          />
-          {this.hasFollows && (
-            <div id="sidebarSubscribed" className="card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
-            </div>
-          )}
-        </div>
+        </section>
+        <SiteSidebar
+          site={site}
+          admins={admins}
+          counts={counts}
+          online={online}
+          showLocal={showLocal(this.isoData)}
+        />
+        {this.hasFollows && (
+          <section
+            id="sidebarSubscribed"
+            className="card border-secondary mb-3"
+          >
+            <div className="card-body">{this.subscribedCommunities}</div>
+          </section>
+        )}
       </div>
     );
   }

src/shared/components/home/site-sidebar.tsx

@@ -30,7 +30,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <div id="sidebarInfo" className="card border-secondary mb-3">
+      <section id="sidebarInfo" className="card border-secondary mb-3">
         <div className="card-body">
           <div>
             <div className="mb-2">{this.siteName()}</div>
@@ -42,7 +42,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             )}
           </div>
         </div>
-      </div>
+      </section>
     );
   }