From 802de37dfbe85cc63552ab0007323e7c1959a311 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 12 Nov 2026 09:43:17 +0100
Subject: [PATCH] fix: Visible focus, switch contrast and forced colors support
 in theme

---
 CHANGELOG.md                                  |   5 +
 app/browse/ui/search-dataset-sort-control.tsx |   2 +-
 app/browse/ui/select-dataset-step.tsx         |  15 +-
 app/charts/combo/axis-height-linear-dual.tsx  |   5 +
 app/charts/map/map.tsx                        |   3 +
 app/charts/shared/axis-height-title.tsx       |   2 +
 app/charts/table/table.tsx                    |   6 +
 app/components/chart-footnotes.tsx            |   2 +
 app/components/data-download.tsx              |   2 +-
 app/components/footer.tsx                     |  80 +++----
 app/components/tabs.tsx                       |  10 +
 .../components/annotator-options.tsx          |   2 +-
 .../components/chart-configurator.tsx         |   3 +
 .../components/chart-controls/color-ramp.tsx  |   7 +-
 .../chart-controls/drag-and-drop-tab.tsx      |  18 ++
 .../components/chart-controls/section.tsx     |   4 +
 app/configurator/components/configurator.tsx  |   3 +-
 app/configurator/components/field.tsx         |   2 +
 app/configurator/components/icon-button.tsx   |  10 +
 app/federal-ci/components/common.ts           |  12 +
 .../components/footer-section-button.tsx      |  21 +-
 app/federal-ci/components/footer.tsx          |   5 +-
 app/federal-ci/components/top-bar.tsx         |   2 +
 app/federal-ci/foundations/button.tsx         |   9 +-
 app/federal-ci/foundations/index.ts           |   2 +-
 app/federal-ci/theme/index.ts                 |   4 +
 app/login/components/profile-tables.tsx       |  12 +-
 app/pages/docs/index.tsx                      |  11 +-
 app/statistics/base-stats-card.tsx            |  17 +-
 app/themes/components.spec.ts                 |  40 ++++
 app/themes/components.tsx                     | 214 +++++++++++++++++-
 app/themes/focus.ts                           |  52 +++++
 e2e/focus.ts                                  | 202 +++++++++++++++++
 e2e/keyboard-focus.spec.ts                    |  65 ++++++
 34 files changed, 767 insertions(+), 82 deletions(-)
 create mode 100644 app/themes/components.spec.ts
 create mode 100644 app/themes/focus.ts
 create mode 100644 e2e/focus.ts
 create mode 100644 e2e/keyboard-focus.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f16129045f..46d8856a2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,11 @@ You can also check the
 
 ## Next Release
 
+- Fixes
+  - Keyboard focus is now visible on buttons, links, tabs and menu items, the
+    switch has sufficient contrast, and switches and tabs stay visible in
+    forced colors (high contrast) mode
+
 ## 6.5.7 - 2026-11-10
 
 - Fixes
diff --git a/app/browse/ui/search-dataset-sort-control.tsx b/app/browse/ui/search-dataset-sort-control.tsx
index 9d54f2f82d..c8b553e5c4 100644
--- a/app/browse/ui/search-dataset-sort-control.tsx
+++ b/app/browse/ui/search-dataset-sort-control.tsx
@@ -42,7 +42,7 @@ export const SearchDatasetSortControl = ({
   }, [disableScore]);
 
   return (
-    <Flex alignItems="center">
+    <Flex alignItems="center" gap={2}>
       <label htmlFor="datasetSort">
         <Typography variant="body3">
           <Trans id="dataset.sortby">Sort by</Trans>
diff --git a/app/browse/ui/select-dataset-step.tsx b/app/browse/ui/select-dataset-step.tsx
index 39eceafe05..4a76c2e562 100644
--- a/app/browse/ui/select-dataset-step.tsx
+++ b/app/browse/ui/select-dataset-step.tsx
@@ -301,7 +301,11 @@ const SelectDatasetStepInner = ({
               <MotionBox
                 key="navigation"
                 initial={{ opacity: 0, height: 0, overflow: "hidden" }}
-                animate={{ opacity: 1, height: "auto" }}
+                animate={{
+                  opacity: 1,
+                  height: "auto",
+                  transitionEnd: { overflow: "visible" },
+                }}
                 exit={{ opacity: 0, height: 0 }}
                 // To match mode="wait" enter / exit animation duration
                 transition={{ duration: odsIframe ? 0 : DURATION * 2 }}
@@ -574,6 +578,8 @@ const useStyles = makeStyles<
   },
   panelLeft: {
     marginBottom: theme.spacing(12),
+    paddingInline: theme.spacing(1),
+    marginInline: theme.spacing(-1),
     boxShadow: "none",
     outline: "none",
     transition: "padding-top 0.5s ease",
@@ -582,8 +588,11 @@ const useStyles = makeStyles<
       position: ({ datasetPresent }) => (datasetPresent ? "static" : "sticky"),
       top: ({ datasetPresent }) => (datasetPresent ? 0 : theme.spacing(8)),
       overflowY: "auto",
-      minHeight: "100vh",
-      maxHeight: ({ datasetPresent }) => (datasetPresent ? "none" : "100vh"),
+      boxSizing: "border-box",
+      minHeight: ({ datasetPresent }) =>
+        datasetPresent ? "100vh" : `calc(100vh - ${theme.spacing(8)})`,
+      maxHeight: ({ datasetPresent }) =>
+        datasetPresent ? "none" : `calc(100vh - ${theme.spacing(8)})`,
       marginBottom: "unset",
       paddingBottom: ({ datasetPresent }) =>
         datasetPresent ? 0 : theme.spacing(16),
diff --git a/app/charts/combo/axis-height-linear-dual.tsx b/app/charts/combo/axis-height-linear-dual.tsx
index 03237cfcfb..841eca8768 100644
--- a/app/charts/combo/axis-height-linear-dual.tsx
+++ b/app/charts/combo/axis-height-linear-dual.tsx
@@ -15,6 +15,10 @@ import { useChartState } from "@/charts/shared/chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
 import { DISABLE_SCREENSHOT_COLOR_WIPE_ATTR } from "@/components/chart-shared";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
+import {
+  FOCUS_OUTLINE_ON_FILL_CLASS_NAME,
+  INSET_FOCUS_OUTLINE_CLASS_NAME,
+} from "@/themes/focus";
 import { theme } from "@/themes/theme";
 
 type AxisHeightLinearDualProps = {
@@ -56,6 +60,7 @@ export const AxisHeightLinearDual = (props: AxisHeightLinearDualProps) => {
   return (
     <>
       <foreignObject
+        className={`${INSET_FOCUS_OUTLINE_CLASS_NAME} ${FOCUS_OUTLINE_ON_FILL_CLASS_NAME}`}
         data-testid={`axis-title-${orientation}`}
         x={axisTitleX}
         width={axisTitleWidth}
diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
index 96a06bb7bc..036c01f44e 100644
--- a/app/charts/map/map.tsx
+++ b/app/charts/map/map.tsx
@@ -58,6 +58,7 @@ import {
 import { GeoFeature, GeoPoint } from "@/domain/data";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
+import { FOCUS_OUTLINE_INSET, FOCUS_VISIBLE } from "@/themes/focus";
 import { hexToRgba } from "@/utils/color-utils";
 import { useEvent } from "@/utils/use-event";
 import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
@@ -649,6 +650,8 @@ const ControlButton = ({
       className={classes.controlButton}
       variant="contained"
       onClick={onClick}
+      // The stacked buttons would cover an outside ring.
+      sx={{ [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET }}
     >
       <Icon name={iconName} size={24} />
     </Button>
diff --git a/app/charts/shared/axis-height-title.tsx b/app/charts/shared/axis-height-title.tsx
index e74709c6fd..a5eb2e64c4 100644
--- a/app/charts/shared/axis-height-title.tsx
+++ b/app/charts/shared/axis-height-title.tsx
@@ -3,6 +3,7 @@ import { AxisHeightLinearChartState } from "@/charts/shared/axis-height-linear";
 import { useChartState } from "@/charts/shared/chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
+import { INSET_FOCUS_OUTLINE_CLASS_NAME } from "@/themes/focus";
 
 // Axis title can be used in both "linear" and pie charts.
 type AxisHeightTitleChartState = AxisHeightLinearChartState | PieState;
@@ -28,6 +29,7 @@ export const AxisHeightTitle = () => {
         </text>
       ) : (
         <foreignObject
+          className={INSET_FOCUS_OUTLINE_CLASS_NAME}
           y={leftAxisLabelOffsetTop}
           width={leftAxisLabelSize.width}
           height={leftAxisLabelSize.height}
diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx
index 302563e4ab..5ea8527429 100644
--- a/app/charts/table/table.tsx
+++ b/app/charts/table/table.tsx
@@ -26,6 +26,10 @@ import { Flex } from "@/components/flex";
 import { Input, Switch } from "@/components/form";
 import { Observation } from "@/domain/data";
 import { Icon } from "@/icons";
+import {
+  FOCUS_OUTLINE_INSET,
+  FOCUS_VISIBLE_WITHIN_FIELD,
+} from "@/themes/focus";
 import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const MOBILE_VIEW_THRESHOLD = 384;
@@ -312,6 +316,8 @@ export const Table = () => {
               message: "Search...",
             })}
             endAdornment={<Icon name="search" />}
+            // The chart container scrolls and would clip an outside ring.
+            sx={{ [FOCUS_VISIBLE_WITHIN_FIELD]: FOCUS_OUTLINE_INSET }}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.currentTarget.value)}
           />
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index 45291fa92e..495139b7c9 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -25,6 +25,7 @@ import { Component, Measure } from "@/domain/data";
 import { useTimeFormatLocale } from "@/formatters";
 import { useDataCubesMetadataQuery } from "@/graphql/hooks";
 import { useLocale } from "@/locales/use-locale";
+import { UNCLIP_FOCUS_OUTLINE } from "@/themes/focus";
 import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 export const useFootnotesStyles = makeStyles<Theme, { useMarginTop: boolean }>(
@@ -39,6 +40,7 @@ export const useFootnotesStyles = makeStyles<Theme, { useMarginTop: boolean }>(
       alignItems: "center",
       flexWrap: "wrap",
       overflow: "hidden",
+      ...UNCLIP_FOCUS_OUTLINE,
       fontSize: theme.typography.caption.fontSize,
       "& > button": {
         minWidth: "auto",
diff --git a/app/components/data-download.tsx b/app/components/data-download.tsx
index f9729d6ffb..428c7c448b 100644
--- a/app/components/data-download.tsx
+++ b/app/components/data-download.tsx
@@ -238,7 +238,7 @@ const DataDownloadInnerMenu = ({
           width: "fit-content",
           minHeight: 0,
           p: 0,
-          ml: "2.5px",
+          ml: 0,
           fontSize: "inherit",
         }}
       >
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index df7b7f8438..9c3ff16ce9 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -1,5 +1,5 @@
 import { t } from "@lingui/macro";
-import { Link, SxProps } from "@mui/material";
+import { SxProps } from "@mui/material";
 import NextLink from "next/link";
 
 import contentRoutes from "@/content-routes.json";
@@ -91,62 +91,44 @@ export const Footer = ({ sx }: { sx?: SxProps }) => {
             message: "Further information",
           })}
         />
-        <Link
+        <FooterSectionButton
           href={`https://lindas.admin.ch/?lang=${locale}`}
           target="_blank"
-          underline="none"
-        >
-          <FooterSectionButton
-            iconName="external"
-            label={t({
-              id: "footer.button.lindas",
-              message: "LINDAS Linked Data Services",
-            })}
-          />
-        </Link>
-        <Link
+          iconName="external"
+          label={t({
+            id: "footer.button.lindas",
+            message: "LINDAS Linked Data Services",
+          })}
+        />
+        <FooterSectionButton
           href={`https://cognizone.atlassian.net/servicedesk/customer/portal/1`}
           target="_blank"
-          underline="none"
-        >
-          <FooterSectionButton
-            iconName="external"
-            label={t({
-              id: "footer.button.service-desk",
-              message: "Service Desk",
-            })}
-          />
-        </Link>
-        <Link
+          iconName="external"
+          label={t({
+            id: "footer.button.service-desk",
+            message: "Service Desk",
+          })}
+        />
+        <FooterSectionButton
           href={`https://www.youtube.com/@visualizetutorials`}
           target="_blank"
-          underline="none"
-        >
-          <FooterSectionButton
-            iconName="external"
-            label={t({
-              id: "footer.tutorials",
-              message: "Tutorials",
-            })}
-          />
-        </Link>
-        <NextLink href="/statistics" passHref legacyBehavior>
-          <Link underline="none">
-            <FooterSectionButton
-              label={t({ id: "footer.statistics", message: "Statistics" })}
-            />
-          </Link>
-        </NextLink>
-        <Link
+          iconName="external"
+          label={t({
+            id: "footer.tutorials",
+            message: "Tutorials",
+          })}
+        />
+        <FooterSectionButton
+          href="/statistics"
+          LinkComponent={NextLink}
+          label={t({ id: "footer.statistics", message: "Statistics" })}
+        />
+        <FooterSectionButton
           href="https://status.lindas.admin.ch/"
           target="_blank"
-          underline="none"
-        >
-          <FooterSectionButton
-            iconName="external"
-            label={t({ id: "footer.status", message: "Status" })}
-          />
-        </Link>
+          iconName="external"
+          label={t({ id: "footer.status", message: "Status" })}
+        />
       </FooterSection>
     </SwissFederalCiFooter>
   );
diff --git a/app/components/tabs.tsx b/app/components/tabs.tsx
index 6ba0bee024..a8e9cf5a8b 100644
--- a/app/components/tabs.tsx
+++ b/app/components/tabs.tsx
@@ -40,6 +40,16 @@ export const VisualizeTab = styled(Tab)<TabProps>(({ theme }) => {
     "&.Mui-selected": {
       borderBottomColor: theme.palette.background.paper,
     },
+    "@media (forced-colors: active)": {
+      "&.Mui-selected": {
+        forcedColorAdjust: "none",
+        backgroundColor: "Canvas",
+        color: "CanvasText",
+        borderColor: "CanvasText",
+        borderBottomColor: "Canvas",
+        boxShadow: "inset 0 3px 0 Highlight",
+      },
+    },
     minWidth: "fit-content",
     padding: theme.spacing(0, 2),
   };
diff --git a/app/configurator/components/annotator-options.tsx b/app/configurator/components/annotator-options.tsx
index 0b5d17d190..eb3a0cd58f 100644
--- a/app/configurator/components/annotator-options.tsx
+++ b/app/configurator/components/annotator-options.tsx
@@ -84,7 +84,7 @@ const AnnotatorOptions = ({
       id={`annotator-panel-${activeField}`}
       aria-labelledby={`annotator-tab-${activeField}`}
       tabIndex={-1}
-      sx={{ overflowX: "hidden", overflowY: "auto" }}
+      sx={{ overflowX: "hidden", overflowY: "auto", outline: "none" }}
     >
       <ControlSection hideTopBorder>
         <SectionTitle closable>{getFieldLabel(activeField)}</SectionTitle>
diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx
index 8f84fc51aa..e720bb67ae 100644
--- a/app/configurator/components/chart-configurator.tsx
+++ b/app/configurator/components/chart-configurator.tsx
@@ -107,6 +107,7 @@ import {
 import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
 import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters";
+import { UNCLIP_FOCUS_OUTLINE } from "@/themes/focus";
 import { useEvent } from "@/utils/use-event";
 
 export const DataFilterSelectGeneric = ({
@@ -574,9 +575,11 @@ const useStyles = makeStyles<Theme, { fetching: boolean }>((theme) => ({
     overflow: "hidden",
     width: "100%",
     marginBottom: theme.spacing(5),
+    ...UNCLIP_FOCUS_OUTLINE,
 
     "& > *": {
       overflow: "hidden",
+      ...UNCLIP_FOCUS_OUTLINE,
     },
 
     "&:last-child": {
diff --git a/app/configurator/components/chart-controls/color-ramp.tsx b/app/configurator/components/chart-controls/color-ramp.tsx
index 8741d4137f..fede6e0ab4 100644
--- a/app/configurator/components/chart-controls/color-ramp.tsx
+++ b/app/configurator/components/chart-controls/color-ramp.tsx
@@ -293,11 +293,8 @@ const PaletteSection = (props: PaletteSectionProps) => {
           handleAddColorPalette(e);
         }}
         variant="text"
-        sx={{
-          width: "100%",
-          paddingY: 3,
-          paddingX: 4,
-        }}
+        fullWidth
+        sx={{ paddingY: 3, paddingX: 4 }}
       >
         <Trans id="login.profile.my-color-palettes.add">
           Add color palette
diff --git a/app/configurator/components/chart-controls/drag-and-drop-tab.tsx b/app/configurator/components/chart-controls/drag-and-drop-tab.tsx
index 629e8a659b..6284977e72 100644
--- a/app/configurator/components/chart-controls/drag-and-drop-tab.tsx
+++ b/app/configurator/components/chart-controls/drag-and-drop-tab.tsx
@@ -15,6 +15,7 @@ import {
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { useActiveChartField } from "@/configurator/config-form";
 import { Component, Dimension, Measure } from "@/domain/data";
+import { FOCUS_OUTLINE_INSET, UNCLIP_FOCUS_OUTLINE } from "@/themes/focus";
 
 const useStyles = makeStyles((theme: Theme) => ({
   filterRow: {
@@ -25,9 +26,26 @@ const useStyles = makeStyles((theme: Theme) => ({
     gridColumnGap: theme.spacing(2),
     gridTemplateRows: "min-content min-content",
     gridTemplateAreas: '"description drag-button" "select drag-button"',
+    position: "relative",
+    ...UNCLIP_FOCUS_OUTLINE,
+
+    // The row's children paint over an outline, so the ring is an overlay.
+    "&:focus-visible": {
+      outline: "none",
+
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        zIndex: 1,
+        pointerEvents: "none",
+        ...FOCUS_OUTLINE_INSET,
+      },
+    },
 
     "& > *": {
       overflow: "hidden",
+      ...UNCLIP_FOCUS_OUTLINE,
     },
   },
   dragButtons: {
diff --git a/app/configurator/components/chart-controls/section.tsx b/app/configurator/components/chart-controls/section.tsx
index 6b8356a83b..043ee853de 100644
--- a/app/configurator/components/chart-controls/section.tsx
+++ b/app/configurator/components/chart-controls/section.tsx
@@ -25,6 +25,7 @@ import { useDisclosure } from "@/components/use-disclosure";
 import { isConfiguring, isLayouting } from "@/configurator/configurator-state";
 import { Icon, IconName } from "@/icons";
 import { useConfiguratorState } from "@/src";
+import { FOCUS_OUTLINE_INSET } from "@/themes/focus";
 
 const useControlSectionStyles = makeStyles<Theme, { hideTopBorder: boolean }>(
   (theme) => ({
@@ -85,6 +86,9 @@ export const useSectionTitleStyles = makeStyles<
     WebkitUserSelect: "none",
     transition: "background-color 0.2s ease",
 
+    // The collapsible section clips an outside ring.
+    "&:focus-visible": FOCUS_OUTLINE_INSET,
+
     "&:hover": {
       cursor: ({ interactive }) => (interactive ? "pointer" : "initial"),
       backgroundColor: ({ interactive }) => {
diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
index 8fee7779c7..87b677a912 100644
--- a/app/configurator/components/configurator.tsx
+++ b/app/configurator/components/configurator.tsx
@@ -671,7 +671,8 @@ const LayoutingStep = () => {
           top: centerLayout ? LAYOUT_HEADER_HEIGHT : 0,
           width: DRAWER_WIDTH,
           height: "100%",
-          transition: "left 0.3s",
+          visibility: centerLayout ? "hidden" : "visible",
+          transition: "left 0.3s, visibility 0.3s",
         }}
       >
         <LayoutConfigurator />
diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
index 0d02232aa6..2ece0c59ea 100644
--- a/app/configurator/components/field.tsx
+++ b/app/configurator/components/field.tsx
@@ -87,6 +87,7 @@ import { useTimeFormatLocale } from "@/formatters";
 import { Locale } from "@/locales/locales";
 import { useLocale } from "@/locales/use-locale";
 import { ColorItem, getPalette } from "@/palettes";
+import { UNCLIP_FOCUS_OUTLINE } from "@/themes/focus";
 import { assert } from "@/utils/assert";
 import { hierarchyToOptions } from "@/utils/hierarchy";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
@@ -110,6 +111,7 @@ const useStyles = makeStyles<Theme>((theme) => ({
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: 2,
     overflow: "hidden",
+    ...UNCLIP_FOCUS_OUTLINE,
   },
   loadingIndicator: {
     display: "inline-block",
diff --git a/app/configurator/components/icon-button.tsx b/app/configurator/components/icon-button.tsx
index f508bf4506..55998f2742 100644
--- a/app/configurator/components/icon-button.tsx
+++ b/app/configurator/components/icon-button.tsx
@@ -7,6 +7,7 @@ import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { FieldProps } from "@/configurator/config-form";
 import { Icon } from "@/icons";
+import { FORCED_COLORS_SELECTED } from "@/themes/focus";
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -41,6 +42,14 @@ const useStyles = makeStyles((theme: Theme) => ({
     "& svg": {
       color: "white",
     },
+
+    "@media (forced-colors: active)": {
+      "&, &:hover": FORCED_COLORS_SELECTED,
+
+      "& svg": {
+        color: "HighlightText",
+      },
+    },
   },
   disabled: {
     cursor: "initial",
@@ -71,6 +80,7 @@ export const IconButton = ({
     <ButtonBase
       tabIndex={0}
       value={value}
+      aria-pressed={checked}
       onClick={onClick}
       disabled={disabled}
       className={clsx(
diff --git a/app/federal-ci/components/common.ts b/app/federal-ci/components/common.ts
index a0e1055f76..c6a0a8bd04 100644
--- a/app/federal-ci/components/common.ts
+++ b/app/federal-ci/components/common.ts
@@ -1 +1,13 @@
+import { CSSObject } from "@mui/material/styles";
+
+import { c } from "@/federal-ci/theme";
+
 export const TRANSITION_DURATION = 350;
+
+export const FOCUS_OUTLINE_COLOR_VAR = "--focus-outline-color";
+
+export const FOCUS_OUTLINE_COLOR_ON_DARK_SURFACE = c.purple[300];
+
+export const FOCUS_OUTLINE_ON_DARK_SURFACE = {
+  [FOCUS_OUTLINE_COLOR_VAR]: FOCUS_OUTLINE_COLOR_ON_DARK_SURFACE,
+} satisfies CSSObject;
diff --git a/app/federal-ci/components/footer-section-button.tsx b/app/federal-ci/components/footer-section-button.tsx
index 97a97917bc..3ff32fd76f 100644
--- a/app/federal-ci/components/footer-section-button.tsx
+++ b/app/federal-ci/components/footer-section-button.tsx
@@ -1,5 +1,5 @@
 import { FooterSectionText } from "@/federal-ci/components/footer-section-text";
-import { Button } from "@/federal-ci/foundations";
+import { Button, ButtonProps } from "@/federal-ci/foundations";
 import { ArrowRightIcon, DownloadIcon, ExternalIcon } from "@/federal-ci/icons";
 import { c, s } from "@/federal-ci/theme";
 
@@ -8,15 +8,26 @@ type FooterSectionButtonProps = {
   disabled?: boolean;
   onClick?: () => void;
   iconName?: "arrow-right" | "download" | "external";
-};
+} & Partial<Pick<ButtonProps, "href" | "target" | "LinkComponent">>;
 
 export const FooterSectionButton = (props: FooterSectionButtonProps) => {
-  const { label, disabled, onClick, iconName = "arrow-right" } = props;
+  const {
+    label,
+    disabled,
+    onClick,
+    iconName = "arrow-right",
+    href,
+    target,
+    LinkComponent,
+  } = props;
 
   return (
     <Button
       disabled={disabled}
       onClick={onClick}
+      href={href}
+      target={target}
+      LinkComponent={LinkComponent}
       sx={{
         justifyContent: "space-between",
         width: "100%",
@@ -33,6 +44,10 @@ export const FooterSectionButton = (props: FooterSectionButtonProps) => {
         "& *": {
           color: disabled ? c.cobalt[300] : c.monochrome[50],
         },
+
+        "@media (forced-colors: active)": {
+          "& svg, & svg *": { color: "inherit" },
+        },
       }}
     >
       <FooterSectionText text={label} />
diff --git a/app/federal-ci/components/footer.tsx b/app/federal-ci/components/footer.tsx
index 4144a85c9c..a84fdf3bbf 100644
--- a/app/federal-ci/components/footer.tsx
+++ b/app/federal-ci/components/footer.tsx
@@ -1,6 +1,7 @@
 import { Box, Breakpoint, SxProps, Typography } from "@mui/material";
 import { Children, PropsWithChildren } from "react";
 
+import { FOCUS_OUTLINE_ON_DARK_SURFACE } from "@/federal-ci/components/common";
 import { ContentWrapper } from "@/federal-ci/components/content-wrapper";
 import { FooterSectionLink } from "@/federal-ci/components/footer-section-link";
 import { b, c, t } from "@/federal-ci/theme";
@@ -8,6 +9,8 @@ import { makeStyles } from "@/federal-ci/utils/make-styles";
 
 const useStyles = makeStyles<{ nCols: number | "auto" }>()(
   ({ breakpoints: b, spacing: s }, { nCols }) => ({
+    root: FOCUS_OUTLINE_ON_DARK_SURFACE,
+
     top: {
       paddingTop: s(10),
       paddingBottom: s(10),
@@ -73,7 +76,7 @@ export const Footer = (props: FooterProps) => {
   const { classes } = useStyles({ nCols });
 
   return (
-    <Box component="footer">
+    <Box component="footer" className={classes.root}>
       <Box className={classes.top}>
         <ContentWrapper sx={ContentWrapperProps?.sx}>
           <Box className={classes.topColumns}>{children}</Box>
diff --git a/app/federal-ci/components/top-bar.tsx b/app/federal-ci/components/top-bar.tsx
index c3d5c18691..485749fcbd 100644
--- a/app/federal-ci/components/top-bar.tsx
+++ b/app/federal-ci/components/top-bar.tsx
@@ -1,5 +1,6 @@
 import { Box, Breakpoint, SxProps } from "@mui/material";
 
+import { FOCUS_OUTLINE_ON_DARK_SURFACE } from "@/federal-ci/components/common";
 import { ContentWrapper } from "@/federal-ci/components/content-wrapper";
 import { makeStyles } from "@/federal-ci/utils/make-styles";
 
@@ -11,6 +12,7 @@ const useStyles = makeStyles()(
       height: s(10),
       minHeight: s(10),
       backgroundColor: p.cobalt[600],
+      ...FOCUS_OUTLINE_ON_DARK_SURFACE,
       [b.between("xxs" as Breakpoint, "xs")]: {
         height: s(11),
         minHeight: s(11),
diff --git a/app/federal-ci/foundations/button.tsx b/app/federal-ci/foundations/button.tsx
index 89064b4217..1c7a5a248f 100644
--- a/app/federal-ci/foundations/button.tsx
+++ b/app/federal-ci/foundations/button.tsx
@@ -1,5 +1,5 @@
 import { ButtonBase, ButtonBaseProps, styled } from "@mui/material";
-import { forwardRef } from "react";
+import { forwardRef, HTMLAttributeAnchorTarget } from "react";
 
 const StyledButtonBase = styled(ButtonBase)({
   display: "flex",
@@ -9,7 +9,12 @@ const StyledButtonBase = styled(ButtonBase)({
   textTransform: "none",
 });
 
-export const Button = forwardRef<HTMLButtonElement, ButtonBaseProps>(
+export type ButtonProps = ButtonBaseProps<
+  "button",
+  { href?: string; target?: HTMLAttributeAnchorTarget }
+>;
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     return <StyledButtonBase ref={ref} disableRipple {...props} />;
   }
diff --git a/app/federal-ci/foundations/index.ts b/app/federal-ci/foundations/index.ts
index 4fb7205b23..3cd5ff4763 100644
--- a/app/federal-ci/foundations/index.ts
+++ b/app/federal-ci/foundations/index.ts
@@ -1,2 +1,2 @@
-export { Button } from "./button";
+export { Button, type ButtonProps } from "./button";
 export { Link } from "./link";
diff --git a/app/federal-ci/theme/index.ts b/app/federal-ci/theme/index.ts
index 1276629b1a..94300e32e4 100644
--- a/app/federal-ci/theme/index.ts
+++ b/app/federal-ci/theme/index.ts
@@ -44,6 +44,10 @@ export const c = {
     800: "#1F2937",
     900: "#111827",
   },
+  purple: {
+    300: "#C4B5FD",
+    500: "#8655F6",
+  },
   red: {
     50: "#FFEDEE",
     100: "#FAE1E2",
diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 27864a571e..adb900953f 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -6,6 +6,7 @@ import {
   PopoverPosition,
   Skeleton,
   styled,
+  SxProps,
   Table,
   TableBody,
   TableCell,
@@ -14,6 +15,7 @@ import {
   tableHeadClasses,
   TableRow,
   tableRowClasses,
+  Theme,
   Typography,
 } from "@mui/material";
 import { PUBLISHED_STATE } from "@prisma/client";
@@ -48,6 +50,12 @@ import { useMutate } from "@/utils/use-fetch-data";
 const PREVIEW_LIMIT = 3;
 const POPOVER_PADDING = 8;
 
+const CELL_LINK_SX = {
+  display: "inline-block",
+  maxWidth: "100%",
+  verticalAlign: "top",
+} satisfies SxProps<Theme>;
+
 export const SectionContent = ({
   children,
   title,
@@ -368,7 +376,7 @@ const ProfileVisualizationsRow = ({
           passHref
           legacyBehavior
         >
-          <Link>
+          <Link sx={CELL_LINK_SX}>
             <OverflowTooltip
               arrow
               title={<Markdown>{chartTitle}</Markdown>}
@@ -392,7 +400,7 @@ const ProfileVisualizationsRow = ({
             passHref
             legacyBehavior
           >
-            <Link>
+            <Link sx={CELL_LINK_SX}>
               <OverflowTooltip
                 arrow
                 title={data?.dataCubesMetadata[0]?.title ?? ""}
diff --git a/app/pages/docs/index.tsx b/app/pages/docs/index.tsx
index c69a700360..a5f7276fe3 100644
--- a/app/pages/docs/index.tsx
+++ b/app/pages/docs/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-anonymous-default-export */
 import { MDXProvider } from "@mdx-js/react";
-import { CssBaseline } from "@mui/material";
+import { CssBaseline, GlobalStyles } from "@mui/material";
 import {
   AudioSpecimen,
   Catalog,
@@ -22,6 +22,7 @@ import { useEffect, useMemo, useState } from "react";
 
 import { c } from "@/federal-ci/theme";
 import { i18n, I18nProvider, parseLocaleString } from "@/src";
+import { FOCUS_OUTLINE_INSET } from "@/themes/focus";
 
 const pages: ConfigPageOrGroup[] = [
   {
@@ -182,6 +183,14 @@ export default () => {
     <MDXProvider components={mdxComponents}>
       <I18nProvider i18n={i18n}>
         <CssBaseline />
+        {/* The docs catalog renders third-party markup the theme can't style. */}
+        <GlobalStyles
+          styles={{
+            "li a[href]:focus-visible, div > a[href]:has(> svg):focus-visible":
+              FOCUS_OUTLINE_INSET,
+            "div:has(> a[href]:focus-visible)": { opacity: 1 },
+          }}
+        />
         <Catalog
           basePath="/docs"
           useBrowserHistory
diff --git a/app/statistics/base-stats-card.tsx b/app/statistics/base-stats-card.tsx
index b396a83d79..d7d6276941 100644
--- a/app/statistics/base-stats-card.tsx
+++ b/app/statistics/base-stats-card.tsx
@@ -6,6 +6,10 @@ import { ReactNode } from "react";
 
 import { useFlag } from "@/flags/use-flag";
 import { formatInteger } from "@/statistics/formatters";
+import {
+  FOCUS_OUTLINE_ROOM,
+  UNCLIP_FOCUS_OUTLINE,
+} from "@/themes/focus";
 
 type Datum = [string, { count: number; label: ReactNode }];
 
@@ -33,7 +37,7 @@ export const BaseStatsCard = ({
   const maxCount = max(data, ([, { count }]) => count) ?? 1;
 
   return (
-    <Card className={classes.root}>
+    <Card className={classes.root} sx={UNCLIP_FOCUS_OUTLINE}>
       <Box sx={{ px: 5 }}>
         <Box sx={{ display: "grid", gridTemplateColumns: "1fr 24px", gap: 2 }}>
           <Typography variant="h2" sx={{ fontWeight: "normal" }}>
@@ -79,6 +83,8 @@ export const BaseStatsCard = ({
         </Typography>
       </Box>
       <div
+        role="region"
+        aria-label={title}
         className={classes.table}
         style={{
           gridTemplateColumns: showPercentage
@@ -144,7 +150,9 @@ const Bar = ({
           component="p"
           sx={{
             overflow: "hidden",
-            maxWidth: 200,
+            maxWidth: 200 + 2 * FOCUS_OUTLINE_ROOM,
+            padding: `${FOCUS_OUTLINE_ROOM}px`,
+            margin: `-${FOCUS_OUTLINE_ROOM}px`,
             cursor: "default",
             whiteSpace: "nowrap",
             textOverflow: "ellipsis",
@@ -222,12 +230,11 @@ const useStyles = makeStyles<Theme>((theme) => ({
     overflowY: "auto",
     marginTop: theme.spacing(3),
     padding: theme.spacing(1),
-    paddingTop: 0,
     backgroundColor: theme.palette.grey[200],
   },
   tableHeader: {
     position: "sticky",
-    top: 0,
+    top: theme.spacing(-1),
     width: "100%",
     padding: "0.3rem 0.6rem",
     borderBottom: `2px solid ${theme.palette.divider}`,
@@ -241,7 +248,7 @@ const useStyles = makeStyles<Theme>((theme) => ({
   divider: {
     zIndex: 1,
     position: "sticky",
-    top: 0,
+    top: theme.spacing(-1),
     width: "100%",
     height: "100%",
     padding: "0.3rem",
diff --git a/app/themes/components.spec.ts b/app/themes/components.spec.ts
new file mode 100644
index 0000000000..dfcc3b1d87
--- /dev/null
+++ b/app/themes/components.spec.ts
@@ -0,0 +1,40 @@
+import { getContrastRatio } from "@mui/material/styles";
+import { describe, expect, it } from "vitest";
+
+import { FOCUS_OUTLINE_COLOR_ON_DARK_SURFACE } from "@/federal-ci/components/common";
+import { c } from "@/federal-ci/theme";
+import { SWITCH_COLORS } from "@/themes/components";
+import { FOCUS_OUTLINE_COLOR } from "@/themes/focus";
+import { palette } from "@/themes/palette";
+
+const BACKGROUNDS = ["#fff", palette.monochrome[100], palette.cobalt[50]];
+const DARK_SURFACES = [c.cobalt[600], c.cobalt[700]];
+const NON_TEXT_CONTRAST = 3;
+
+describe("theme a11y", () => {
+  it.each([
+    ["focus outline", FOCUS_OUTLINE_COLOR],
+    ["unchecked switch", SWITCH_COLORS.unchecked],
+    ["checked switch track", SWITCH_COLORS.checkedTrack],
+  ])("gives the %s ≥ 3:1 contrast against backgrounds", (_, color) => {
+    for (const background of BACKGROUNDS) {
+      expect(getContrastRatio(color, background)).toBeGreaterThanOrEqual(
+        NON_TEXT_CONTRAST
+      );
+    }
+  });
+
+  it("gives the dark surface focus outline ≥ 3:1 contrast", () => {
+    for (const surface of DARK_SURFACES) {
+      expect(
+        getContrastRatio(FOCUS_OUTLINE_COLOR_ON_DARK_SURFACE, surface)
+      ).toBeGreaterThanOrEqual(NON_TEXT_CONTRAST);
+    }
+  });
+
+  it("gives the checked switch thumb ≥ 3:1 contrast against its track", () => {
+    expect(
+      getContrastRatio(SWITCH_COLORS.checkedThumb, SWITCH_COLORS.checkedTrack)
+    ).toBeGreaterThanOrEqual(NON_TEXT_CONTRAST);
+  });
+});
diff --git a/app/themes/components.tsx b/app/themes/components.tsx
index a48f549237..f1a851e862 100644
--- a/app/themes/components.tsx
+++ b/app/themes/components.tsx
@@ -9,10 +9,27 @@ import {
   RadioCheckedIcon,
   RadioIcon,
 } from "@/themes/custom-icons";
+import {
+  FOCUS_OUTLINE,
+  FOCUS_OUTLINE_INSET,
+  FOCUS_OUTLINE_ON_FILL_CLASS_NAME,
+  FOCUS_OUTLINE_ROOM,
+  FOCUS_VISIBLE,
+  FOCUS_VISIBLE_WITHIN_FIELD,
+  FORCED_COLORS_SELECTED,
+  INSET_FOCUS_OUTLINE_CLASS_NAME,
+  INSET_FOCUS_ROLE_SELECTOR,
+} from "@/themes/focus";
 import { palette } from "@/themes/palette";
 import { shadows } from "@/themes/shadows";
 import { typography } from "@/themes/typography";
 
+export const SWITCH_COLORS = {
+  unchecked: palette.monochrome[500],
+  checkedThumb: "#fff",
+  checkedTrack: palette.monochrome[800],
+};
+
 export const components: Components = {
   MuiAccordion: {
     defaultProps: {
@@ -42,6 +59,8 @@ export const components: Components = {
       root: {
         alignItems: "center",
         padding: 0,
+
+        [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET,
       },
     },
   },
@@ -86,6 +105,7 @@ export const components: Components = {
       message: {
         width: "100%",
         padding: 0,
+        overflow: "visible",
         ...typography.body3,
       },
       icon: {
@@ -245,6 +265,12 @@ export const components: Components = {
       root: {
         textTransform: "none !important",
 
+        [FOCUS_VISIBLE]: FOCUS_OUTLINE,
+
+        [`&:is(${INSET_FOCUS_ROLE_SELECTOR})`]: {
+          [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET,
+        },
+
         "& .MuiButton-startIcon": {
           marginRight: 4,
         },
@@ -323,6 +349,10 @@ export const components: Components = {
                 backgroundColor: color[400],
                 color: "#fff",
 
+                "@media (forced-colors: active)": {
+                  border: "1px solid ButtonText",
+                },
+
                 "&:hover": {
                   backgroundColor: color[600],
                 },
@@ -342,6 +372,20 @@ export const components: Components = {
                 color: color[700],
                 padding: 0,
 
+                "& .MuiButton-startIcon": {
+                  marginLeft: 0,
+                },
+
+                "& .MuiButton-endIcon": {
+                  marginRight: 0,
+                },
+
+                ...(ownerState.startIcon && { marginLeft: -4 }),
+                ...(ownerState.endIcon && { marginRight: -4 }),
+                ...(ownerState.fullWidth && {
+                  [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET,
+                }),
+
                 "&:hover": {
                   backgroundColor: "transparent",
                   color: color[900],
@@ -462,6 +506,8 @@ export const components: Components = {
           border: `1px solid ${palette.monochrome[500]}`,
         },
 
+        [FOCUS_VISIBLE_WITHIN_FIELD]: FOCUS_OUTLINE,
+
         "& fieldset": {
           display: "none",
         },
@@ -731,7 +777,7 @@ export const components: Components = {
               };
             case "standard": {
               return {
-                padding: "4px 24px 4px 4px !important",
+                padding: "4px 28px 4px 4px !important",
 
                 "&:hover, &[aria-expanded='true']": {
                   backgroundColor: palette.cobalt[50],
@@ -756,7 +802,7 @@ export const components: Components = {
 
         return {
           top: "calc(50% - 12px)",
-          right: variant === "standard" ? 0 : 14,
+          right: variant === "standard" ? FOCUS_OUTLINE_ROOM : 14,
           color: "inherit !important",
           transition: "color 0.2s ease, transform 0.2s ease !important",
         };
@@ -801,6 +847,8 @@ export const components: Components = {
           boxShadow: "none",
         },
 
+        [FOCUS_VISIBLE]: FOCUS_OUTLINE,
+
         "&::before": {
           display: "none",
         },
@@ -839,35 +887,98 @@ export const components: Components = {
         width: 32,
         height: 16,
         padding: 0,
+        borderRadius: 12,
 
         "&:hover": {
           "& .MuiSwitch-switchBase": {
             backgroundColor: "transparent",
           },
         },
+
+        "&:has(:focus-visible)": FOCUS_OUTLINE,
       },
       switchBase: {
         padding: 2,
 
+        [FOCUS_VISIBLE]: {
+          outline: "none",
+        },
+
         "&.Mui-checked": {
           transform: "translateX(16px)",
 
+          "& .MuiSwitch-thumb": {
+            backgroundColor: SWITCH_COLORS.checkedThumb,
+          },
+
           "& + .MuiSwitch-track": {
-            backgroundColor: palette.monochrome[800],
+            borderColor: SWITCH_COLORS.checkedTrack,
+            backgroundColor: SWITCH_COLORS.checkedTrack,
             opacity: 1,
           },
         },
+
+        "&.Mui-disabled": {
+          "& .MuiSwitch-thumb": {
+            opacity: 0.4,
+          },
+
+          "& + .MuiSwitch-track": {
+            opacity: 0.4,
+          },
+        },
+
+        // Declared last so it wins over the state rules above.
+        "@media (forced-colors: active)": {
+          "& .MuiSwitch-thumb": {
+            forcedColorAdjust: "none",
+            backgroundColor: "ButtonText",
+          },
+
+          "& + .MuiSwitch-track": {
+            borderColor: "ButtonText",
+          },
+
+          "&.Mui-checked .MuiSwitch-thumb": {
+            backgroundColor: "HighlightText",
+          },
+
+          "&.Mui-checked + .MuiSwitch-track": {
+            forcedColorAdjust: "none",
+            borderColor: "Highlight",
+            backgroundColor: "Highlight",
+          },
+
+          "&.Mui-disabled .MuiSwitch-thumb": {
+            backgroundColor: "GrayText",
+          },
+
+          "&.Mui-disabled + .MuiSwitch-track": {
+            borderColor: "GrayText",
+          },
+
+          "&.Mui-checked.Mui-disabled + .MuiSwitch-track": {
+            backgroundColor: "GrayText",
+          },
+
+          "&.Mui-checked.Mui-disabled .MuiSwitch-thumb": {
+            backgroundColor: "Canvas",
+          },
+        },
       },
       thumb: {
         width: 12,
         height: 12,
         padding: 0,
-        backgroundColor: "white",
-        boxShadow: shadows[2],
+        backgroundColor: SWITCH_COLORS.unchecked,
+        boxShadow: "none",
       },
       track: {
+        boxSizing: "border-box",
         borderRadius: 12,
-        backgroundColor: palette.monochrome[300],
+        border: `1px solid ${SWITCH_COLORS.unchecked}`,
+        backgroundColor: "transparent",
+        opacity: 1,
       },
     },
   },
@@ -875,6 +986,22 @@ export const components: Components = {
     styleOverrides: {
       indicator: {
         backgroundColor: palette.red[600],
+
+        "@media (forced-colors: active)": {
+          forcedColorAdjust: "none",
+          backgroundColor: "Highlight",
+        },
+      },
+    },
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      root: {
+        [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET,
+
+        "@media (forced-colors: active)": {
+          "&.Mui-selected, &.Mui-selected:hover": FORCED_COLORS_SELECTED,
+        },
       },
     },
   },
@@ -883,12 +1010,27 @@ export const components: Components = {
       root: {
         color: palette.text.primary,
 
+        [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET,
+
         "&.Mui-selected": {
           color: palette.text.primary,
         },
       },
     },
   },
+  MuiTableSortLabel: {
+    defaultProps: {
+      onFocus: (e) =>
+        e.currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" }),
+    },
+    styleOverrides: {
+      root: {
+        paddingLeft: FOCUS_OUTLINE_ROOM,
+        marginLeft: -FOCUS_OUTLINE_ROOM,
+        [FOCUS_VISIBLE]: FOCUS_OUTLINE_INSET,
+      },
+    },
+  },
   MuiTable: {
     defaultProps: {
       stickyHeader: true,
@@ -1006,6 +1148,12 @@ export const components: Components = {
         flexGrow: 1,
         padding: "4px 0",
         userSelect: "none",
+
+        "&:focus-visible": {
+          outline: "none",
+
+          "& .MuiTreeItem-content.Mui-focused": FOCUS_OUTLINE_INSET,
+        },
       },
     },
   },
@@ -1050,6 +1198,60 @@ export const components: Components = {
         fieldset {
           border: none;
         }
+
+        /* :where() keeps specificity at zero so component styles win. */
+        :where(a, button, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [role="region"]):focus-visible {
+          outline: ${FOCUS_OUTLINE.outline};
+          outline-offset: ${FOCUS_OUTLINE.outlineOffset}px;
+        }
+
+        :where(${INSET_FOCUS_ROLE_SELECTOR}, [contenteditable="true"]):focus-visible {
+          outline-offset: ${FOCUS_OUTLINE_INSET.outlineOffset}px;
+        }
+
+        svg:has(foreignObject :focus-visible),
+        foreignObject:has(:focus-visible) {
+          overflow: visible;
+        }
+
+        foreignObject.${INSET_FOCUS_OUTLINE_CLASS_NAME} :focus-visible {
+          outline-offset: -2px;
+        }
+
+        foreignObject.${FOCUS_OUTLINE_ON_FILL_CLASS_NAME} :focus-visible > span {
+          box-shadow: inset 0 0 0 4px #fff;
+        }
+
+        .PrivatePickersYear-yearButton:focus-visible,
+        .MuiPickersDay-root:focus-visible {
+          outline: ${FOCUS_OUTLINE.outline};
+          outline-offset: 1px;
+        }
+
+        @media (forced-colors: active) {
+          .PrivatePickersYear-yearButton.Mui-selected,
+          .MuiPickersDay-root.Mui-selected {
+            forced-color-adjust: none;
+            background-color: Highlight;
+            color: HighlightText;
+          }
+        }
+
+        /* Overrides the outline: none set by the rich text editor library. */
+        .mdxeditor [contenteditable="true"]:focus-visible {
+          outline: ${FOCUS_OUTLINE.outline};
+          outline-offset: ${FOCUS_OUTLINE_INSET.outlineOffset}px;
+        }
+
+        /* !important overrides the inline outline: none set by the map library. */
+        .maplibregl-canvas:focus-visible {
+          outline: ${FOCUS_OUTLINE.outline} !important;
+          outline-offset: -2px;
+        }
+
+        :focus-visible {
+          scroll-margin: 8px;
+        }
   
         @font-face {
           font-family: "NotoSans";
diff --git a/app/themes/focus.ts b/app/themes/focus.ts
new file mode 100644
index 0000000000..13a9f5a720
--- /dev/null
+++ b/app/themes/focus.ts
@@ -0,0 +1,52 @@
+import { CSSObject } from "@mui/material/styles";
+
+import { FOCUS_OUTLINE_COLOR_VAR } from "@/federal-ci/components/common";
+import { c } from "@/federal-ci/theme";
+
+export const FOCUS_VISIBLE = "&:focus-visible, &:has(> input:focus-visible)";
+
+export const FOCUS_VISIBLE_WITHIN_FIELD =
+  "&:has(input:focus-visible, textarea:focus-visible, [role=combobox]:focus-visible)";
+
+export const INSET_FOCUS_ROLE_SELECTOR = [
+  "tab",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "treeitem",
+]
+  .map((role) => `[role="${role}"]`)
+  .join(", ");
+
+export const FOCUS_OUTLINE_COLOR = c.purple[500];
+
+export const FOCUS_OUTLINE_ROOM = 4;
+
+// For SVG foreignObject content, which theme overrides can't target.
+export const INSET_FOCUS_OUTLINE_CLASS_NAME = "inset-focus-outline";
+
+export const FOCUS_OUTLINE_ON_FILL_CLASS_NAME = "focus-outline-on-fill";
+
+export const FORCED_COLORS_SELECTED = {
+  forcedColorAdjust: "none",
+  backgroundColor: "Highlight",
+  color: "HighlightText",
+} satisfies CSSObject;
+
+export const FOCUS_OUTLINE = {
+  outline: `2px solid var(${FOCUS_OUTLINE_COLOR_VAR}, ${FOCUS_OUTLINE_COLOR})`,
+  outlineOffset: 2,
+} satisfies CSSObject;
+
+// For containers that clip overflow to truncate text.
+export const UNCLIP_FOCUS_OUTLINE = {
+  "&:has(:focus-visible)": {
+    overflow: "visible",
+  },
+} satisfies CSSObject;
+
+export const FOCUS_OUTLINE_INSET = {
+  ...FOCUS_OUTLINE,
+  outlineOffset: -2,
+} satisfies CSSObject;
diff --git a/e2e/focus.ts b/e2e/focus.ts
new file mode 100644
index 0000000000..656a53ae7f
--- /dev/null
+++ b/e2e/focus.ts
@@ -0,0 +1,202 @@
+import { expect, Page } from "@playwright/test";
+
+type FocusStop = {
+  isRepeated: boolean;
+  issue?: string;
+};
+
+const MAX_FOCUS_STOPS = 250;
+const NON_TEXT_CONTRAST = 3;
+
+export const expectVisibleFocusRings = async ({ page }: { page: Page }) => {
+  const issues: string[] = [];
+
+  for (let i = 0; i < MAX_FOCUS_STOPS; i++) {
+    await page.keyboard.press("Tab");
+    const stop = await page.evaluate(inspectFocusedElement, NON_TEXT_CONTRAST);
+
+    if (stop?.isRepeated) {
+      break;
+    }
+
+    if (stop?.issue) {
+      issues.push(stop.issue);
+    }
+  }
+
+  expect(issues).toEqual([]);
+};
+
+const inspectFocusedElement = (minContrast: number): FocusStop | null => {
+  type Ring = { left: number; top: number; right: number; bottom: number };
+
+  const parseRgb = (color: string) => {
+    const [r = 0, g = 0, b = 0, a = 1] = (color.match(/[\d.]+/g) ?? []).map(
+      Number
+    );
+
+    return [r, g, b, a];
+  };
+
+  const getLuminance = (color: string) => {
+    const [r, g, b] = parseRgb(color)
+      .slice(0, 3)
+      .map((channel) => {
+        const value = channel / 255;
+
+        return value <= 0.03928
+          ? value / 12.92
+          : Math.pow((value + 0.055) / 1.055, 2.4);
+      });
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+
+  const getContrast = (foreground: string, background: string) => {
+    const [lighter, darker] = [
+      getLuminance(foreground),
+      getLuminance(background),
+    ].sort((a, b) => b - a);
+
+    return (lighter + 0.05) / (darker + 0.05);
+  };
+
+  const describe = (target: Element) => {
+    const role = target.getAttribute("role");
+    const label = (
+      target.getAttribute("aria-label") ??
+      (target instanceof HTMLElement ? target.innerText : "") ??
+      ""
+    )
+      .trim()
+      .replace(/\s+/g, " ")
+      .slice(0, 40);
+
+    return `<${target.tagName.toLowerCase()}${role ? ` role=${role}` : ""}> "${label}"`;
+  };
+
+  const findRingElement = (focused: HTMLElement) => {
+    const candidates = [
+      focused,
+      focused.parentElement,
+      focused.parentElement?.parentElement,
+      focused.querySelector(".Mui-focused"),
+    ];
+
+    return candidates.find((candidate): candidate is HTMLElement => {
+      if (!(candidate instanceof HTMLElement)) {
+        return false;
+      }
+
+      const style = getComputedStyle(candidate);
+
+      return (
+        style.opacity !== "0" &&
+        style.outlineStyle !== "none" &&
+        parseFloat(style.outlineWidth) > 0
+      );
+    });
+  };
+
+  const findClippingAncestor = ({
+    element,
+    ring,
+  }: {
+    element: Element;
+    ring: Ring;
+  }) => {
+    const tolerance = 0.5;
+
+    for (
+      let ancestor = element.parentElement;
+      ancestor && ancestor !== document.body;
+      ancestor = ancestor.parentElement
+    ) {
+      const style = getComputedStyle(ancestor);
+
+      if (
+        style.display === "contents" ||
+        (style.overflowX === "visible" && style.overflowY === "visible")
+      ) {
+        continue;
+      }
+
+      const bounds = ancestor.getBoundingClientRect();
+
+      if (
+        ring.left < bounds.left - tolerance ||
+        ring.top < bounds.top - tolerance ||
+        ring.right > bounds.right + tolerance ||
+        ring.bottom > bounds.bottom + tolerance
+      ) {
+        return ancestor;
+      }
+    }
+  };
+
+  const findBackgroundColor = (start: Element | null) => {
+    for (let node = start; node; node = node.parentElement) {
+      const color = getComputedStyle(node).backgroundColor;
+
+      if (parseRgb(color)[3] > 0) {
+        return color;
+      }
+    }
+
+    return "rgb(255, 255, 255)";
+  };
+
+  const element = document.activeElement;
+
+  if (!(element instanceof HTMLElement) || element === document.body) {
+    return null;
+  }
+
+  if (element.dataset.focusWalked) {
+    return { isRepeated: true };
+  }
+
+  element.dataset.focusWalked = "true";
+
+  const name = describe(element);
+  const ringElement = findRingElement(element);
+
+  if (!ringElement) {
+    return { isRepeated: false, issue: `${name}: no focus ring` };
+  }
+
+  const style = getComputedStyle(ringElement);
+  const extent =
+    parseFloat(style.outlineOffset) + parseFloat(style.outlineWidth);
+  const rect = ringElement.getBoundingClientRect();
+  const clipper = findClippingAncestor({
+    element: ringElement,
+    ring: {
+      left: rect.left - extent,
+      top: rect.top - extent,
+      right: rect.right + extent,
+      bottom: rect.bottom + extent,
+    },
+  });
+
+  if (clipper) {
+    return {
+      isRepeated: false,
+      issue: `${name}: focus ring clipped by ${describe(clipper)}`,
+    };
+  }
+
+  const background = findBackgroundColor(
+    extent > 0 ? ringElement.parentElement : ringElement
+  );
+  const contrast = getContrast(style.outlineColor, background);
+
+  if (contrast < minContrast) {
+    return {
+      isRepeated: false,
+      issue: `${name}: focus ring contrast ${contrast.toFixed(2)}:1 against ${background}`,
+    };
+  }
+
+  return { isRepeated: false };
+};
diff --git a/e2e/keyboard-focus.spec.ts b/e2e/keyboard-focus.spec.ts
new file mode 100644
index 0000000000..502d83611d
--- /dev/null
+++ b/e2e/keyboard-focus.spec.ts
@@ -0,0 +1,65 @@
+import { setup } from "./common";
+import { expectVisibleFocusRings } from "./focus";
+
+const { test } = setup();
+
+const RED_LIST_CUBE = "https://environment.ld.admin.ch/foen/ubd003001/10";
+
+test.describe("keyboard focus", () => {
+  test("is visible on every focus stop in the chart editor", async ({
+    page,
+    actions,
+  }) => {
+    await actions.chart.createFrom({ iri: RED_LIST_CUBE, dataSource: "Prod" });
+    await expectVisibleFocusRings({ page });
+  });
+
+  test("is visible on every focus stop in forced colors mode", async ({
+    page,
+    actions,
+  }) => {
+    await page.emulateMedia({ forcedColors: "active" });
+    await actions.chart.createFrom({ iri: RED_LIST_CUBE, dataSource: "Prod" });
+    await expectVisibleFocusRings({ page });
+  });
+
+  test("is visible on every focus stop of the layout step", async ({
+    page,
+    actions,
+    selectors,
+  }) => {
+    await actions.chart.createFrom({ iri: RED_LIST_CUBE, dataSource: "Prod" });
+    await (await selectors.chart.moreButton()).click();
+    await selectors.mui.popover().getByText("Duplicate").click();
+    await page.locator("button:has-text('Proceed to layout options')").click();
+    await selectors.chart.loaded();
+    await expectVisibleFocusRings({ page });
+  });
+
+  test("is visible on every focus stop of the browse page", async ({
+    page,
+  }) => {
+    await page.goto("/en/browse");
+    await page.locator("footer").waitFor();
+    await expectVisibleFocusRings({ page });
+  });
+
+  test("is visible on every focus stop of the dataset preview", async ({
+    page,
+  }) => {
+    await page.goto(
+      `/en/browse?dataset=${encodeURIComponent(RED_LIST_CUBE)}&dataSource=Prod`
+    );
+    await page.getByRole("table").waitFor();
+    await page.waitForFunction(
+      () => !document.querySelector("main [style*='overflow: hidden']")
+    );
+    await expectVisibleFocusRings({ page });
+  });
+
+  test("is visible on every focus stop of the home page", async ({ page }) => {
+    await page.goto("/en");
+    await page.locator("footer").waitFor();
+    await expectVisibleFocusRings({ page });
+  });
+});