Skip to content

Commit

Permalink
Merge pull request #1355 from jsit/fix/site-sidebar-collapse
Browse files Browse the repository at this point in the history 
fix(a11y): Fix some a11y issues in Site Sidebar and use native Bootstrap Collapse and Card classes
  • Loading branch information
@SleeplessOne1917
SleeplessOne1917 authored Jun 18, 2023
2 parents 08cb98f + 4774c82 commit ad0c24f
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 112 deletions.
24 changes: 13 additions & 11 deletions src/shared/components/common/banner-icon-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
const banner = this.props.banner;
const icon = this.props.icon;
return (
<div className="position-relative mb-2">
{banner && <PictrsImage src={banner} banner alt="" />}
{icon && (
<PictrsImage
src={icon}
iconOverlay
pushup={!!this.props.banner}
alt=""
/>
)}
</div>
(banner || icon) && (
<div className="position-relative mb-2">
{banner && <PictrsImage src={banner} banner alt="" />}
{icon && (
<PictrsImage
src={icon}
iconOverlay
pushup={!!this.props.banner}
alt=""
/>
)}
</div>
)
);
}
}
178 changes: 102 additions & 76 deletions src/shared/components/home/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-body">{this.trendingCommunities(true)}</div>
<div className="card border-secondary mb-3">
{this.trendingCommunities()}
</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>
Expand All @@ -471,19 +472,7 @@ export class Home extends Component<any, HomeState> {
return (
<div id="sidebarContainer">
<section 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"
/>
)}
<LinkButton
path="/communities"
translationKey="explore_communities"
/>
</div>
{this.trendingCommunities()}
</section>
<SiteSidebar
site={site}
Expand All @@ -492,18 +481,20 @@ 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(false)}
</section>
</div>
)}
</div>
);
}

trendingCommunities(isMobile = false) {
trendingCommunities() {
switch (this.state.trendingCommunitiesRes?.state) {
case "loading":
return (
Expand All @@ -514,68 +505,103 @@ export class Home extends Component<any, HomeState> {
case "success": {
const trending = this.state.trendingCommunitiesRes.data.communities;
return (
<div className={!isMobile ? "mb-2" : ""}>
<h5>
<T i18nKey="trending_communities">
#
<Link className="text-body" to="/communities">
<>
<header className="card-header d-flex align-items-center">
<h5 className="mb-0">
<T i18nKey="trending_communities">
#
</Link>
</T>
</h5>
<ul className="list-inline mb-0">
{trending.map(cv => (
<li
key={cv.community.id}
className="list-inline-item d-inline-block"
>
<CommunityLink community={cv.community} />
</li>
))}
</ul>
</div>
<Link className="text-body" to="/communities">
#
</Link>
</T>
</h5>
</header>
<div className="card-body">
{trending.length > 0 && (
<ul className="list-inline">
{trending.map(cv => (
<li key={cv.community.id} className="list-inline-item">
<CommunityLink community={cv.community} />
</li>
))}
</ul>
)}
{canCreateCommunity(this.state.siteRes) && (
<LinkButton
path="/create_community"
translationKey="create_a_community"
/>
)}
<LinkButton
path="/communities"
translationKey="explore_communities"
/>
</div>
</>
);
}
}
}

get subscribedCommunities() {
subscribedCommunities(isMobile = false) {
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>
<button
className="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCollapseSubscribe)}
aria-label={i18n.t("collapse")}
data-tippy-content={i18n.t("collapse")}
>
<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>
<Link className="text-body" to="/communities">
#
</Link>
</T>
</h5>
{!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"
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>
</>
);
}

Expand Down
70 changes: 45 additions & 25 deletions src/shared/components/home/site-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface SiteSidebarProps {
showLocal: boolean;
counts?: SiteAggregates;
admins?: PersonView[];
isMobile?: boolean;
}

interface SiteSidebarState {
Expand All @@ -29,39 +30,58 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {

render() {
return (
<section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body">
<div>
<div className="mb-2">{this.siteName()}</div>
<div className="accordion">
<section id="sidebarInfo" className="card border-secondary mb-3">
<header
className="card-header d-flex align-items-center"
id="sidebarInfoHeader"
>
{this.siteName()}
{!this.state.collapsed && (
<>
<BannerIconHeader banner={this.props.site.banner} />
{this.siteInfo()}
</>
<BannerIconHeader banner={this.props.site.banner} />
)}
</header>

<div
id="sidebarInfoBody"
className="collapse show"
aria-labelledby="sidebarInfoHeader"
>
<div className="card-body">{this.siteInfo()}</div>
</div>
</div>
</section>
</section>
</div>
);
}

siteName() {
return (
<h5 className="mb-0 d-inline">
{this.props.site.name}
<button
className="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCollapseSidebar)}
aria-label={i18n.t("collapse")}
data-tippy-content={i18n.t("collapse")}
>
{this.state.collapsed ? (
<Icon icon="plus-square" classes="icon-inline" />
) : (
<Icon icon="minus-square" classes="icon-inline" />
)}
</button>
</h5>
<>
<h5 className="mb-0 d-inline">{this.props.site.name}</h5>
{!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>
)}
</>
);
}

Expand Down

0 comments on commit ad0c24f

Please sign in to comment.