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

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 4d79bc6359e1fc8f069310e3bca173640243284b..851c5c25129871be648497e78af5775c28e5cc9f 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -492,12 +492,14 @@ export class Home extends Component<any, HomeState> {
           showLocal={showLocal(this.isoData)}
         />
         {this.hasFollows && (
-          <section
-            id="sidebarSubscribed"
-            className="card border-secondary mb-3"
-          >
-            <div className="card-body">{this.subscribedCommunities}</div>
-          </section>
+          <div className="accordion">
+            <section
+              id="sidebarSubscribed"
+              className="card border-secondary mb-3"
+            >
+              {this.subscribedCommunities}
+            </section>
+          </div>
         )}
       </div>
     );
@@ -543,39 +545,59 @@ export class Home extends Component<any, HomeState> {
     const { subscribedCollapsed } = this.state;
 
     return (
-      <div>
-        <h5>
-          <T class="d-inline" i18nKey="subscribed_to_communities">
-            #
-            <Link className="text-body" to="/communities">
+      <>
+        <header
+          className="card-header d-flex align-items-center"
+          id="sidebarSubscribedHeader"
+        >
+          <h5 className="mb-0 d-inline">
+            <T class="d-inline" i18nKey="subscribed_to_communities">
               #
-            </Link>
-          </T>
+              <Link className="text-body" to="/communities">
+                #
+              </Link>
+            </T>
+          </h5>
           <button
+            type="button"
             className="btn btn-sm text-muted"
             onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            aria-label={i18n.t("collapse")}
-            data-tippy-content={i18n.t("collapse")}
+            aria-label={
+              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>
-        {!subscribedCollapsed && (
-          <ul className="list-inline mb-0">
-            {UserService.Instance.myUserInfo?.follows.map(cfv => (
-              <li
-                key={cfv.community.id}
-                className="list-inline-item d-inline-block"
-              >
-                <CommunityLink community={cfv.community} />
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
+        </header>
+        <div
+          id="sidebarSubscribedBody"
+          className="collapse show"
+          aria-labelledby="sidebarSubscribedHeader"
+        >
+          <div className="card-body">
+            <ul className="list-inline mb-0">
+              {UserService.Instance.myUserInfo?.follows.map(cfv => (
+                <li
+                  key={cfv.community.id}
+                  className="list-inline-item d-inline-block"
+                >
+                  <CommunityLink community={cfv.community} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </>
     );
   }
 

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index b09f27d20cc71e009accff2995221ed42144ac7d..3df4eb69eb72adbf17171c094290b61d230cfb73 100644 (file)
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/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>
+      </>
     );
   }