diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx
index bf0b1d6b90f..09ea3fb424c 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx
@@ -6,6 +6,8 @@ import { Link } from 'react-router-dom';
import { IconLogo } from '@/mastodon/components/logo';
import { customAppIcon, domain, title } from '@/mastodon/initial_state';
+import { getNavigationSkipLinkId } from '../../ui/components/skip_links';
+
import classes from './header.module.scss';
export const NavigationHeader: React.FC<{
@@ -24,7 +26,11 @@ export const LogoLockup: React.FC<{
className?: string;
}> = ({ siteName, className }) => {
return (
-
+
{customAppIcon && (
)}
diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss b/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
index a23e9d53b87..170e85ace1f 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
+++ b/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
@@ -11,6 +11,16 @@
gap: var(--multi-column-gap);
padding-inline-end: var(--multi-column-gap);
overflow-x: auto;
+ scroll-padding-inline-start: var(--multi-column-navigation-width);
+
+ &:focus-visible {
+ // Scrollable elements are made focusable by some browsers, this adds
+ // a visible outline in this case. Using `border` instead of `outline`
+ // causes a light layout jump shift on focus, but an outline would be
+ // rendered below the navbar and columns and didn't look right.
+ border: var(--outline-focus-default);
+ border-radius: var(--radius-2);
+ }
}
.navigationWrapper {
diff --git a/app/javascript/mastodon/features/ui/components/skip_links/index.tsx b/app/javascript/mastodon/features/ui/components/skip_links/index.tsx
index e5a74ba992b..f297f52bb86 100644
--- a/app/javascript/mastodon/features/ui/components/skip_links/index.tsx
+++ b/app/javascript/mastodon/features/ui/components/skip_links/index.tsx
@@ -2,15 +2,16 @@ import { useCallback, useId } from 'react';
import { useIntl } from 'react-intl';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
import { useAppSelector } from 'mastodon/store';
import classes from './skip_links.module.scss';
export const getNavigationSkipLinkId = () => 'skip-link-target-nav';
-export const getColumnSkipLinkId = (index: number) =>
- `skip-link-target-content-${index}`;
+export const getColumnSkipLinkId = (index: number | null) =>
+ `skip-link-target-content-${index ?? ''}`;
-export const SkipLinks: React.FC<{
+const LegacySkipLinks: React.FC<{
multiColumn: boolean;
onFocusGettingStartedColumn: () => void;
}> = ({ multiColumn, onFocusGettingStartedColumn }) => {
@@ -54,6 +55,23 @@ export const SkipLinks: React.FC<{
);
};
+const RedesignSkipLinks: React.FC = () => {
+ const intl = useIntl();
+
+ return (
+