Use aside semantic HTML tag for sidebars

This commit is contained in:
Zetaphor 2023-06-16 17:27:55 -03:00
parent 5d7e5cac33
commit 9a943e1f2e
3 changed files with 34 additions and 33 deletions

View file

@ -133,7 +133,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const { name, actor_id } = this.props.community_view.community; const { name, actor_id } = this.props.community_view.community;
return ( return (
<div id="sidebarContainer"> <div id="sidebarContainer">
<div id="sidebarMain" className="card border-secondary mb-3"> <section id="sidebarMain" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
{this.communityTitle()} {this.communityTitle()}
{this.props.editable && this.adminButtons()} {this.props.editable && this.adminButtons()}
@ -154,14 +154,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</div> </div>
)} )}
</div> </div>
</div> </section>
<div id="sidebarInfo" className="card border-secondary mb-3"> <section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
{this.description()} {this.description()}
{this.badges()} {this.badges()}
{this.mods()} {this.mods()}
</div> </div>
</div> </section>
</div> </div>
); );
} }

View file

@ -422,9 +422,8 @@ export class Home extends Component<any, HomeState> {
} = this.state; } = this.state;
return ( return (
<div>
<div id="sidebarContainer"> <div id="sidebarContainer">
<div id="sidebarMain" className="card border-secondary mb-3"> <section id="sidebarMain" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
{this.trendingCommunities()} {this.trendingCommunities()}
{canCreateCommunity(this.state.siteRes) && ( {canCreateCommunity(this.state.siteRes) && (
@ -438,7 +437,7 @@ export class Home extends Component<any, HomeState> {
translationKey="explore_communities" translationKey="explore_communities"
/> />
</div> </div>
</div> </section>
<SiteSidebar <SiteSidebar
site={site} site={site}
admins={admins} admins={admins}
@ -447,12 +446,14 @@ export class Home extends Component<any, HomeState> {
showLocal={showLocal(this.isoData)} showLocal={showLocal(this.isoData)}
/> />
{this.hasFollows && ( {this.hasFollows && (
<div id="sidebarSubscribed" className="card border-secondary mb-3"> <section
id="sidebarSubscribed"
className="card border-secondary mb-3"
>
<div className="card-body">{this.subscribedCommunities}</div> <div className="card-body">{this.subscribedCommunities}</div>
</div> </section>
)} )}
</div> </div>
</div>
); );
} }

View file

@ -30,7 +30,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
render() { render() {
return ( return (
<div id="sidebarInfo" className="card border-secondary mb-3"> <section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body"> <div className="card-body">
<div> <div>
<div className="mb-2">{this.siteName()}</div> <div className="mb-2">{this.siteName()}</div>
@ -42,7 +42,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
)} )}
</div> </div>
</div> </div>
</div> </section>
); );
} }