From 3d67aebd3547b134f3afac9165fb75816dad358b Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Mon, 23 Mar 2026 16:45:45 +0100 Subject: [PATCH] fix(ui): add prefers-reduced-motion support to Tab indicators Signed-off-by: Johan Persson --- .changeset/olive-ravens-smell.md | 7 +++++++ packages/ui/src/components/Tabs/Tabs.module.css | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 .changeset/olive-ravens-smell.md diff --git a/.changeset/olive-ravens-smell.md b/.changeset/olive-ravens-smell.md new file mode 100644 index 0000000000..4ae0626d46 --- /dev/null +++ b/.changeset/olive-ravens-smell.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Added `prefers-reduced-motion` support to Tab indicator animations. Users with reduced motion preferences will no longer see sliding transitions on the active and hover indicators. + +**Affected components:** Tabs diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css index 68808ae021..e07bef699f 100644 --- a/packages/ui/src/components/Tabs/Tabs.module.css +++ b/packages/ui/src/components/Tabs/Tabs.module.css @@ -99,4 +99,11 @@ padding-inline: var(--bui-space-2); padding-top: var(--bui-space-4); } + + @media (prefers-reduced-motion: reduce) { + .bui-TabActive, + .bui-TabHovered { + transition: none; + } + } }