fix(a11y): Fix some mobile styles for Sidebar Cards

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 851c5c25129871be648497e78af5775c28e5cc9f..23b0941410954b3153b03e797cde266b8b5196bb 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -443,16 +443,17 @@ export class Home extends Component<any, HomeState> {
               admins={admins}
               counts={counts}
               showLocal={showLocal(this.isoData)}
+              isMobile={true}
             />
           )}
           {showTrendingMobile && (
-            <div className="col-12 card border-secondary mb-3">
+            <div className="card border-secondary mb-3">
               <div className="card-body">{this.trendingCommunities(true)}</div>
             </div>
           )}
           {showSubscribedMobile && (
-            <div className="col-12 card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
+            <div className="card border-secondary mb-3">
+              {this.subscribedCommunities(true)}
             </div>
           )}
         </div>
@@ -497,7 +498,7 @@ export class Home extends Component<any, HomeState> {
               id="sidebarSubscribed"
               className="card border-secondary mb-3"
             >
-              {this.subscribedCommunities}
+              {this.subscribedCommunities(false)}
             </section>
           </div>
         )}
@@ -541,7 +542,7 @@ export class Home extends Component<any, HomeState> {
     }
   }
 
-  get subscribedCommunities() {
+  subscribedCommunities(isMobile = false) {
     const { subscribedCollapsed } = this.state;
 
     return (
@@ -558,26 +559,28 @@ export class Home extends Component<any, HomeState> {
               </Link>
             </T>
           </h5>
-          <button
-            type="button"
-            className="btn btn-sm text-muted"
-            onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            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>
+          {!isMobile && (
+            <button
+              type="button"
+              className="btn btn-sm text-muted"
+              onClick={linkEvent(this, this.handleCollapseSubscribe)}
+              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>
+          )}
         </header>
         <div
           id="sidebarSubscribedBody"

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 3df4eb69eb72adbf17171c094290b61d230cfb73..f4081737edf3dcf80fff5b49fbef09647722aa62 100644 (file)
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -12,6 +12,7 @@ interface SiteSidebarProps {
   showLocal: boolean;
   counts?: SiteAggregates;
   admins?: PersonView[];
+  isMobile?: boolean;
 }
 
 interface SiteSidebarState {
@@ -60,27 +61,29 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     return (
       <>
         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
-        <button
-          type="button"
-          className="btn btn-sm"
-          onClick={linkEvent(this, this.handleCollapseSidebar)}
-          aria-label={
-            this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
-          }
-          data-tippy-content={
-            this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
-          }
-          data-bs-toggle="collapse"
-          data-bs-target="#sidebarInfoBody"
-          aria-expanded="true"
-          aria-controls="sidebarInfoBody"
-        >
-          {this.state.collapsed ? (
-            <Icon icon="plus-square" classes="icon-inline" />
-          ) : (
-            <Icon icon="minus-square" classes="icon-inline" />
-          )}
-        </button>
+        {!this.props.isMobile && (
+          <button
+            type="button"
+            className="btn btn-sm"
+            onClick={linkEvent(this, this.handleCollapseSidebar)}
+            aria-label={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-tippy-content={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebarInfoBody"
+            aria-expanded="true"
+            aria-controls="sidebarInfoBody"
+          >
+            {this.state.collapsed ? (
+              <Icon icon="plus-square" classes="icon-inline" />
+            ) : (
+              <Icon icon="minus-square" classes="icon-inline" />
+            )}
+          </button>
+        )}
       </>
     );
   }