Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(a11y): Fix some a11y issues in Site Sidebar and use native Bootstrap Collapse and Card classes #1355

Merged
merged 12 commits into from
Jun 18, 2023
Merged

fix(a11y): Fix some a11y issues in Site Sidebar and use native Bootstrap Collapse and Card classes #1355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ff4d37d
fix(a11y): Fix some a11y issues in Site Sidebar and use native Bootst…
jsit Jun 17, 2023
878e0f0
fix: Add .accordion wrapper around sidebar to obtain negative bottom …
jsit Jun 17, 2023
072d253
fix(a11y): Apply same accordion/collapse markup to Subscribed Communi…
jsit Jun 17, 2023
cf5c8a1
fix(a11y): Fix some mobile styles for Sidebar Cards
jsit Jun 17, 2023
0d302c0
fix: Cleaner logic
jsit Jun 17, 2023
c875831
fix: Fix Trending sidebar card too
jsit Jun 17, 2023
3564c6c
fix: Fix some small style issues
jsit Jun 17, 2023
0d35d9a
Merge branch 'main' into fix/site-sidebar-collapse
jsit Jun 17, 2023
ffaa3c4
fix: Remove unused var
jsit Jun 17, 2023
9084a91
chore: Empty commit to re-trigger woodpecker job
jsit Jun 17, 2023
f702cbd
fix: Fix build error
jsit Jun 17, 2023
4774c82
Merge branch 'main' into fix/site-sidebar-collapse
SleeplessOne1917 Jun 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions src/shared/components/common/banner-icon-header.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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