Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Jay Sitter 2023-06-17 13:51:21 -04:00
parent 7c51837688
commit ff4d37d03a
2 changed files with 34 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/shared/components/common/banner-icon-header.tsx
View file

@ -14,7 +14,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
render() {
const banner = this.props.banner;
const icon = this.props.icon;
return (
return banner || icon ? (
<div className="position-relative mb-2">
{banner && <PictrsImage src={banner} banner alt="" />}
{icon && (
@ -26,6 +26,6 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
/>
)}
</div>
);
) : null;
}
}

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

@ -29,17 +29,23 @@ 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>
{!this.state.collapsed && (
<>
<BannerIconHeader banner={this.props.site.banner} />
{this.siteInfo()}
</>
)}
</div>
<section
id="sidebarInfo"
className="card border-secondary mb-3 overflow-hidden"
>
<header className="card-header" id="sidebarInfoHeader">
{this.siteName()}
{!this.state.collapsed && (
<BannerIconHeader banner={this.props.site.banner} />
)}
</header>
<div
id="sidebarInfoBody"
className="collapse show"
aria-labelledby="sidebarInfoHeader"
>
<div className="card-body">{this.siteInfo()}</div>
</div>
</section>
);
@ -47,13 +53,22 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
siteName() {
return (
<h5 className="mb-0 d-inline">
{this.props.site.name}
<div className="d-flex align-items-center">
<h5 className="mb-0 d-inline">{this.props.site.name}</h5>
<button
className="btn btn-sm text-muted"
type="button"
className="btn btn-sm"
onClick={linkEvent(this, this.handleCollapseSidebar)}
aria-label={i18n.t("collapse")}
data-tippy-content={i18n.t("collapse")}
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" />
@ -61,7 +76,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
<Icon icon="minus-square" classes="icon-inline" />
)}
</button>
</h5>
</div>
);
}