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

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

View file

@ -492,12 +492,14 @@ export class Home extends Component<any, HomeState> {
showLocal={showLocal(this.isoData)}
/>
{this.hasFollows && (
<div className="accordion">
<section
id="sidebarSubscribed"
className="card border-secondary mb-3"
>
<div className="card-body">{this.subscribedCommunities}</div>
{this.subscribedCommunities}
</section>
</div>
)}
</div>
);
@ -543,27 +545,46 @@ export class Home extends Component<any, HomeState> {
const { subscribedCollapsed } = this.state;
return (
<div>
<h5>
<>
<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 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 && (
</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
@ -574,8 +595,9 @@ export class Home extends Component<any, HomeState> {
</li>
))}
</ul>
)}
</div>
</div>
</>
);
}

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