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)} showLocal={showLocal(this.isoData)}
/> />
{this.hasFollows && ( {this.hasFollows && (
<div className="accordion">
<section <section
id="sidebarSubscribed" id="sidebarSubscribed"
className="card border-secondary mb-3" className="card border-secondary mb-3"
> >
<div className="card-body">{this.subscribedCommunities}</div> {this.subscribedCommunities}
</section> </section>
</div>
)} )}
</div> </div>
); );
@ -543,27 +545,46 @@ export class Home extends Component<any, HomeState> {
const { subscribedCollapsed } = this.state; const { subscribedCollapsed } = this.state;
return ( 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"> <T class="d-inline" i18nKey="subscribed_to_communities">
# #
<Link className="text-body" to="/communities"> <Link className="text-body" to="/communities">
# #
</Link> </Link>
</T> </T>
</h5>
<button <button
type="button"
className="btn btn-sm text-muted" className="btn btn-sm text-muted"
onClick={linkEvent(this, this.handleCollapseSubscribe)} onClick={linkEvent(this, this.handleCollapseSubscribe)}
aria-label={i18n.t("collapse")} aria-label={
data-tippy-content={i18n.t("collapse")} 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
icon={`${subscribedCollapsed ? "plus" : "minus"}-square`} icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
classes="icon-inline" classes="icon-inline"
/> />
</button> </button>
</h5> </header>
{!subscribedCollapsed && ( <div
id="sidebarSubscribedBody"
className="collapse show"
aria-labelledby="sidebarSubscribedHeader"
>
<div className="card-body">
<ul className="list-inline mb-0"> <ul className="list-inline mb-0">
{UserService.Instance.myUserInfo?.follows.map(cfv => ( {UserService.Instance.myUserInfo?.follows.map(cfv => (
<li <li
@ -574,8 +595,9 @@ export class Home extends Component<any, HomeState> {
</li> </li>
))} ))}
</ul> </ul>
)}
</div> </div>
</div>
</>
); );
} }

View file

@ -34,7 +34,10 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
id="sidebarInfo" id="sidebarInfo"
className="card border-secondary mb-3 overflow-hidden" 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.siteName()}
{!this.state.collapsed && ( {!this.state.collapsed && (
<BannerIconHeader banner={this.props.site.banner} /> <BannerIconHeader banner={this.props.site.banner} />
@ -55,7 +58,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
siteName() { siteName() {
return ( return (
<div className="d-flex align-items-center"> <>
<h5 className="mb-0 d-inline">{this.props.site.name}</h5> <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
<button <button
type="button" type="button"
@ -78,7 +81,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
<Icon icon="minus-square" classes="icon-inline" /> <Icon icon="minus-square" classes="icon-inline" />
)} )}
</button> </button>
</div> </>
); );
} }