tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Accessibility] Add list semantics to main navigation (#39145)

Browse Source
This commit is contained in:
diondiondion 2026-05-22 16:25:00 +02:00 committed by GitHub
parent 90e505d295
commit 28849e433a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 119 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/features/navigation_panel/components/collapsible_panel.tsx
View File

@ -36,7 +36,7 @@ export const CollapsiblePanel: React.FC<{
}, [setExpanded]); }, [setExpanded]);
return ( return (
<div className='navigation-panel__list-panel'> <li className='navigation-panel__list-panel'>
<div className='navigation-panel__list-panel__header'> <div className='navigation-panel__list-panel__header'>
<ColumnLink <ColumnLink
transparent transparent
@ -64,7 +64,7 @@ export const CollapsiblePanel: React.FC<{
} }
title={expanded ? collapseTitle : expandTitle} title={expanded ? collapseTitle : expandTitle}
onClick={handleClick} onClick={handleClick}
aria-controls={`${accessibilityId}-content`} ariaControls={`${accessibilityId}-content`}
/> />
</> </>
)} )}
@ -80,6 +80,6 @@ export const CollapsiblePanel: React.FC<{
{children} {children}
</div> </div>
)} )}
</div> </li>
); );
}; };

202
app/javascript/mastodon/features/navigation_panel/index.tsx
View File

@ -249,124 +249,150 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
{banner && <div className='navigation-panel__banner'>{banner}</div>} {banner && <div className='navigation-panel__banner'>{banner}</div>}
<div className='navigation-panel__menu'> <ul className='navigation-panel__menu'>
{signedIn && ( {signedIn && (
<> <>
{!multiColumn && ( {!multiColumn && (
<ColumnLink <li>
to='/publish' <ColumnLink
icon='plus' to='/publish'
iconComponent={AddIcon} icon='plus'
activeIconComponent={AddIcon} iconComponent={AddIcon}
text={intl.formatMessage(messages.compose)} activeIconComponent={AddIcon}
className='button navigation-panel__compose-button' text={intl.formatMessage(messages.compose)}
/> className='button navigation-panel__compose-button'
/>
</li>
)} )}
<ColumnLink <li>
transparent <ColumnLink
to='/home' transparent
icon='home' to='/home'
iconComponent={HomeIcon} icon='home'
activeIconComponent={HomeActiveIcon} iconComponent={HomeIcon}
text={intl.formatMessage(messages.home)} activeIconComponent={HomeActiveIcon}
/> text={intl.formatMessage(messages.home)}
/>
</li>
</> </>
)} )}
{trendsEnabled && ( {trendsEnabled && (
<ColumnLink <li>
transparent <ColumnLink
to='/explore' transparent
icon='explore' to='/explore'
iconComponent={TrendingUpIcon} icon='explore'
text={intl.formatMessage(messages.explore)} iconComponent={TrendingUpIcon}
/> text={intl.formatMessage(messages.explore)}
/>
</li>
)} )}
{(canViewFeed(signedIn, permissions, localLiveFeedAccess) || {(canViewFeed(signedIn, permissions, localLiveFeedAccess) ||
canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && ( canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && (
<ColumnLink <li>
transparent <ColumnLink
to={ transparent
canViewFeed(signedIn, permissions, localLiveFeedAccess) to={
? '/public/local' canViewFeed(signedIn, permissions, localLiveFeedAccess)
: '/public/remote' ? '/public/local'
} : '/public/remote'
icon='globe' }
iconComponent={PublicIcon} icon='globe'
isActive={isFirehoseActive} iconComponent={PublicIcon}
text={intl.formatMessage( isActive={isFirehoseActive}
canViewFeed(signedIn, permissions, localLiveFeedAccess) && text={intl.formatMessage(
canViewFeed(signedIn, permissions, remoteLiveFeedAccess) canViewFeed(signedIn, permissions, localLiveFeedAccess) &&
? messages.firehose canViewFeed(signedIn, permissions, remoteLiveFeedAccess)
: messages.firehose_singular, ? messages.firehose
)} : messages.firehose_singular,
/> )}
/>
</li>
)} )}
{signedIn && ( {signedIn && (
<> <>
<NotificationsLink /> <li>
<NotificationsLink />
</li>
<FollowRequestsLink /> <li>
<FollowRequestsLink />
</li>
<AnnualReportNavItem /> <li>
<AnnualReportNavItem />
</li>
<hr /> <li role='separator' />
<ListPanel /> <ListPanel />
<FollowedTagsPanel /> <FollowedTagsPanel />
<ColumnLink <li>
transparent
to='/favourites'
icon='star'
iconComponent={StarIcon}
activeIconComponent={StarActiveIcon}
text={intl.formatMessage(messages.favourites)}
/>
<ColumnLink
transparent
to='/bookmarks'
icon='bookmarks'
iconComponent={BookmarksIcon}
activeIconComponent={BookmarksActiveIcon}
text={intl.formatMessage(messages.bookmarks)}
/>
{areCollectionsEnabled() && (
<ColumnLink <ColumnLink
transparent transparent
to={`/@${account?.acct}/collections`} to='/favourites'
icon='collections' icon='star'
iconComponent={CollectionsIcon} iconComponent={StarIcon}
activeIconComponent={CollectionsActiveIcon} activeIconComponent={StarActiveIcon}
text={intl.formatMessage(messages.collections)} text={intl.formatMessage(messages.favourites)}
/> />
</li>
<li>
<ColumnLink
transparent
to='/bookmarks'
icon='bookmarks'
iconComponent={BookmarksIcon}
activeIconComponent={BookmarksActiveIcon}
text={intl.formatMessage(messages.bookmarks)}
/>
</li>
{areCollectionsEnabled() && (
<li>
<ColumnLink
transparent
to={`/@${account?.acct}/collections`}
icon='collections'
iconComponent={CollectionsIcon}
activeIconComponent={CollectionsActiveIcon}
text={intl.formatMessage(messages.collections)}
/>
</li>
)} )}
<ColumnLink <li>
transparent <ColumnLink
to='/conversations' transparent
icon='at' to='/conversations'
iconComponent={AlternateEmailIcon} icon='at'
text={intl.formatMessage(messages.direct)} iconComponent={AlternateEmailIcon}
/> text={intl.formatMessage(messages.direct)}
/>
</li>
<hr /> <li role='separator' />
<ColumnLink <li>
transparent <ColumnLink
href='/settings/preferences' transparent
icon='cog' href='/settings/preferences'
iconComponent={SettingsIcon} icon='cog'
text={intl.formatMessage(messages.preferences)} iconComponent={SettingsIcon}
/> text={intl.formatMessage(messages.preferences)}
/>
</li>
<MoreLink /> <li>
<MoreLink />
</li>
</> </>
)} )}
<div className='navigation-panel__legal'> <li className='navigation-panel__legal'>
<ColumnLink <ColumnLink
transparent transparent
to='/about' to='/about'
@ -374,16 +400,16 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
iconComponent={InfoIcon} iconComponent={InfoIcon}
text={intl.formatMessage(messages.about)} text={intl.formatMessage(messages.about)}
/> />
</div> </li>
{!signedIn && ( {!signedIn && (
<div className='navigation-panel__sign-in-banner'> <li className='navigation-panel__sign-in-banner'>
<hr /> <hr />
{disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner />} {disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner />}
</div> </li>
)} )}
</div> </ul>
<div className='flex-spacer' /> <div className='flex-spacer' />

3
app/javascript/styles/mastodon/components.scss
View File

@ -3801,7 +3801,8 @@ a.account__display-name {
.navigation-panel, .navigation-panel,
.compose-panel { .compose-panel {
hr { hr,
li[role='separator'] {
flex: 0 0 auto; flex: 0 0 auto;
border: 0; border: 0;
background: transparent; background: transparent;