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>
); );
}; };

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

@ -249,10 +249,11 @@ 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 && (
<li>
<ColumnLink <ColumnLink
to='/publish' to='/publish'
icon='plus' icon='plus'
@ -261,7 +262,9 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
text={intl.formatMessage(messages.compose)} text={intl.formatMessage(messages.compose)}
className='button navigation-panel__compose-button' className='button navigation-panel__compose-button'
/> />
</li>
)} )}
<li>
<ColumnLink <ColumnLink
transparent transparent
to='/home' to='/home'
@ -270,10 +273,12 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
activeIconComponent={HomeActiveIcon} activeIconComponent={HomeActiveIcon}
text={intl.formatMessage(messages.home)} text={intl.formatMessage(messages.home)}
/> />
</li>
</> </>
)} )}
{trendsEnabled && ( {trendsEnabled && (
<li>
<ColumnLink <ColumnLink
transparent transparent
to='/explore' to='/explore'
@ -281,10 +286,12 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
iconComponent={TrendingUpIcon} iconComponent={TrendingUpIcon}
text={intl.formatMessage(messages.explore)} text={intl.formatMessage(messages.explore)}
/> />
</li>
)} )}
{(canViewFeed(signedIn, permissions, localLiveFeedAccess) || {(canViewFeed(signedIn, permissions, localLiveFeedAccess) ||
canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && ( canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && (
<li>
<ColumnLink <ColumnLink
transparent transparent
to={ to={
@ -302,22 +309,30 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
: messages.firehose_singular, : messages.firehose_singular,
)} )}
/> />
</li>
)} )}
{signedIn && ( {signedIn && (
<> <>
<li>
<NotificationsLink /> <NotificationsLink />
</li>
<li>
<FollowRequestsLink /> <FollowRequestsLink />
</li>
<li>
<AnnualReportNavItem /> <AnnualReportNavItem />
</li>
<hr /> <li role='separator' />
<ListPanel /> <ListPanel />
<FollowedTagsPanel /> <FollowedTagsPanel />
<li>
<ColumnLink <ColumnLink
transparent transparent
to='/favourites' to='/favourites'
@ -326,6 +341,8 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
activeIconComponent={StarActiveIcon} activeIconComponent={StarActiveIcon}
text={intl.formatMessage(messages.favourites)} text={intl.formatMessage(messages.favourites)}
/> />
</li>
<li>
<ColumnLink <ColumnLink
transparent transparent
to='/bookmarks' to='/bookmarks'
@ -334,7 +351,9 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
activeIconComponent={BookmarksActiveIcon} activeIconComponent={BookmarksActiveIcon}
text={intl.formatMessage(messages.bookmarks)} text={intl.formatMessage(messages.bookmarks)}
/> />
</li>
{areCollectionsEnabled() && ( {areCollectionsEnabled() && (
<li>
<ColumnLink <ColumnLink
transparent transparent
to={`/@${account?.acct}/collections`} to={`/@${account?.acct}/collections`}
@ -343,7 +362,9 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
activeIconComponent={CollectionsActiveIcon} activeIconComponent={CollectionsActiveIcon}
text={intl.formatMessage(messages.collections)} text={intl.formatMessage(messages.collections)}
/> />
</li>
)} )}
<li>
<ColumnLink <ColumnLink
transparent transparent
to='/conversations' to='/conversations'
@ -351,9 +372,11 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
iconComponent={AlternateEmailIcon} iconComponent={AlternateEmailIcon}
text={intl.formatMessage(messages.direct)} text={intl.formatMessage(messages.direct)}
/> />
</li>
<hr /> <li role='separator' />
<li>
<ColumnLink <ColumnLink
transparent transparent
href='/settings/preferences' href='/settings/preferences'
@ -361,12 +384,15 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
iconComponent={SettingsIcon} iconComponent={SettingsIcon}
text={intl.formatMessage(messages.preferences)} text={intl.formatMessage(messages.preferences)}
/> />
</li>
<li>
<MoreLink /> <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;