fix(a11y): Apply same accordion/collapse markup to Subscribed Communities sidebar card

src/shared/components/home/home.tsx

@@ -492,12 +492,14 @@ export class Home extends Component<any, HomeState> {
           showLocal={showLocal(this.isoData)}
         />
         {this.hasFollows && (
-          <section
+          <div className="accordion">
-            id="sidebarSubscribed"
+            <section
-            className="card border-secondary mb-3"
+              id="sidebarSubscribed"
-          >
+              className="card border-secondary mb-3"
-            <div className="card-body">{this.subscribedCommunities}</div>
+            >
-          </section>
+              {this.subscribedCommunities}
+            </section>
+          </div>
         )}
       </div>
     );
@@ -543,39 +545,59 @@ export class Home extends Component<any, HomeState> {
     const { subscribedCollapsed } = this.state;
 
     return (
-      <div>
+      <>
-        <h5>
+        <header
-          <T class="d-inline" i18nKey="subscribed_to_communities">
+          className="card-header d-flex align-items-center"
-            #
+          id="sidebarSubscribedHeader"
-            <Link className="text-body" to="/communities">
+        >
+          <h5 className="mb-0 d-inline">
+            <T class="d-inline" i18nKey="subscribed_to_communities">
               #
-            </Link>
+              <Link className="text-body" to="/communities">
-          </T>
+                #
+              </Link>
+            </T>
+          </h5>
           <button
+            type="button"
             className="btn btn-sm text-muted"
             onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            aria-label={i18n.t("collapse")}
+            aria-label={
-            data-tippy-content={i18n.t("collapse")}
+              subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-tippy-content={
+              subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebarSubscribedBody"
+            aria-expanded="true"
+            aria-controls="sidebarSubscribedBody"
           >
             <Icon
               icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
               classes="icon-inline"
             />
           </button>
-        </h5>
+        </header>
-        {!subscribedCollapsed && (
+        <div
-          <ul className="list-inline mb-0">
+          id="sidebarSubscribedBody"
-            {UserService.Instance.myUserInfo?.follows.map(cfv => (
+          className="collapse show"
-              <li
+          aria-labelledby="sidebarSubscribedHeader"
-                key={cfv.community.id}
+        >
-                className="list-inline-item d-inline-block"
+          <div className="card-body">
-              >
+            <ul className="list-inline mb-0">
-                <CommunityLink community={cfv.community} />
+              {UserService.Instance.myUserInfo?.follows.map(cfv => (
-              </li>
+                <li
-            ))}
+                  key={cfv.community.id}
-          </ul>
+                  className="list-inline-item d-inline-block"
-        )}
+                >
-      </div>
+                  <CommunityLink community={cfv.community} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </>
     );
   }
 

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

@@ -34,7 +34,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
           id="sidebarInfo"
           className="card border-secondary mb-3 overflow-hidden"
         >
-          <header className="card-header" id="sidebarInfoHeader">
+          <header
+            className="card-header d-flex align-items-center"
+            id="sidebarInfoHeader"
+          >
             {this.siteName()}
             {!this.state.collapsed && (
               <BannerIconHeader banner={this.props.site.banner} />
@@ -55,7 +58,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   siteName() {
     return (
-      <div className="d-flex align-items-center">
+      <>
         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
         <button
           type="button"
@@ -78,7 +81,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             <Icon icon="minus-square" classes="icon-inline" />
           )}
         </button>
-      </div>
+      </>
     );
   }