fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-27 16:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Jay Sitter 2023-06-17 15:09:10 -04:00
parent 878e0f0f85
commit 072d253baa
2 changed files with 57 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/shared/components/home/home.tsx
View file

@ -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>
</>
);
}

9
src/shared/components/home/site-sidebar.tsx
View file

@ -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>
</>
);
}