fix(a11y): Apply same accordion/collapse markup to Subscribed Communities sidebar card
This commit is contained in:
parent
878e0f0f85
commit
072d253baa
2 changed files with 57 additions and 32 deletions
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue