FIX: add a skip-to-main-content link for keyboard users

frontend/src/components/Layout/MainLayout.styles.ts

@@ -8,6 +8,23 @@ export const useMainLayoutStyles = makeStyles({
     width: '100vw',
     overflow: 'hidden',
   },
+  skipLink: {
+    position: 'absolute',
+    top: '-40px',
+    left: '0',
+    zIndex: 1000,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    fontWeight: tokens.fontWeightSemibold,
+    textDecorationLine: 'none',
+    borderBottomRightRadius: tokens.borderRadiusMedium,
+    transitionProperty: 'top',
+    transitionDuration: tokens.durationFast,
+    ':focus-visible': {
+      top: '0',
+    },
+  },
   topBar: {
     height: '60px',
     backgroundColor: tokens.colorNeutralBackground3,

frontend/src/components/Layout/MainLayout.test.tsx

@@ -231,4 +231,32 @@ describe("MainLayout", () => {
       expect(mockedVersionApi.getVersion).toHaveBeenCalled();
     });
   });
+
+  it("renders a skip link as the first focusable element that targets the main landmark", async () => {
+    mockedVersionApi.getVersion.mockResolvedValue({ version: "1.0.0" });
+
+    const { container } = renderWithProvider(
+      <MainLayout {...defaultProps}>
+        <div>Content</div>
+      </MainLayout>
+    );
+
+    const skipLink = screen.getByRole("link", { name: /skip to main content/i });
+    expect(skipLink).toHaveAttribute("href", "#main-content");
+
+    const main = container.querySelector("main");
+    expect(main).toHaveAttribute("id", "main-content");
+    expect(main).toHaveAttribute("tabIndex", "-1");
+
+    // The skip link must be the first focusable element in the shell so
+    // keyboard users reach it on the very first Tab press.
+    const focusable = container.querySelectorAll<HTMLElement>(
+      'a[href], button, [tabindex]:not([tabindex="-1"])'
+    );
+    expect(focusable[0]).toBe(skipLink);
+
+    await waitFor(() => {
+      expect(mockedVersionApi.getVersion).toHaveBeenCalled();
+    });
+  });
 });

frontend/src/components/Layout/MainLayout.tsx

@@ -44,6 +44,9 @@ export default function MainLayout({
 
   return (
     <div className={styles.root}>
+      <a href="#main-content" className={styles.skipLink}>
+        Skip to main content
+      </a>
       <div className={styles.topBar}>
         <Tooltip
           content={
@@ -86,7 +89,9 @@ export default function MainLayout({
             canManageConfiguration={canManageConfiguration}
           />
         </aside>
-        <main className={styles.main}>{children}</main>
+        <main id="main-content" tabIndex={-1} className={styles.main}>
+          {children}
+        </main>
       </div>
     </div>
   )