From f89b77b9e8185aa29b131d4b5931dea97847105d Mon Sep 17 00:00:00 2001
From: novykh <ioannis.klironomos@gmail.com>
Date: Thu, 24 Sep 2026 17:27:21 +0300
Subject: [PATCH 1/2] Show a keyboard focus ring on Button and respect reduced
 motion in loaders

Button removed the outline on every focus, so keyboard users could not see
where focus was. Add a :focus-visible ring using textFocus. Stop the loading
spinner animation when prefers-reduced-motion is set.
---
 .../button/__snapshots__/button.test.js.snap  | 79 +++++++++++++++++++
 src/components/button/button.test.js          | 19 +++++
 src/components/button/styled.js               | 10 +++
 src/components/icon/components/loader.js      |  5 ++
 src/components/icon/components/loader.test.js | 19 +++++
 5 files changed, 132 insertions(+)
 create mode 100644 src/components/icon/components/loader.test.js

diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap
index 0803ead2b..be1f369cf 100644
--- a/src/components/button/__snapshots__/button.test.js.snap
+++ b/src/components/button/__snapshots__/button.test.js.snap
@@ -56,6 +56,11 @@ exports[`Borderless Button renders 1`] = `
   outline: none;
 }
 
+.c0.c0:focus-visible {
+  outline: 2px solid #4A5757;
+  outline-offset: 2px;
+}
+
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
@@ -76,6 +81,13 @@ exports[`Borderless Button renders 1`] = `
   stroke: #00AB44;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c0.c0 .ntd-spinner {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
 <button
   class="c0"
   colors="[object Object]"
@@ -146,6 +158,11 @@ exports[`Button states renders loading icon 1`] = `
   outline: none;
 }
 
+.c0.c0:focus-visible {
+  outline: 2px solid #4A5757;
+  outline-offset: 2px;
+}
+
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
@@ -180,6 +197,20 @@ exports[`Button states renders loading icon 1`] = `
   stroke: #FFFFFF;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c0.c0 .ntd-spinner {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion:reduce) {
+  .c1 {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
 <button
   class="c0"
   colors="[object Object]"
@@ -269,6 +300,11 @@ exports[`Button states renders only icon 1`] = `
   outline: none;
 }
 
+.c0.c0:focus-visible {
+  outline: 2px solid #4A5757;
+  outline-offset: 2px;
+}
+
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
@@ -307,6 +343,13 @@ exports[`Button states renders only icon 1`] = `
   color: #526161;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c0.c0 .ntd-spinner {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
 <button
   class="c0"
   colors="[object Object]"
@@ -391,6 +434,11 @@ exports[`Button states renders smaller only icon 1`] = `
   outline: none;
 }
 
+.c0.c0:focus-visible {
+  outline: 2px solid #4A5757;
+  outline-offset: 2px;
+}
+
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
@@ -429,6 +477,13 @@ exports[`Button states renders smaller only icon 1`] = `
   color: #526161;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c0.c0 .ntd-spinner {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
 <button
   class="c0"
   colors="[object Object]"
@@ -509,6 +564,11 @@ exports[`Default Button renders 1`] = `
   outline: none;
 }
 
+.c0.c0:focus-visible {
+  outline: 2px solid #4A5757;
+  outline-offset: 2px;
+}
+
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
@@ -529,6 +589,13 @@ exports[`Default Button renders 1`] = `
   stroke: #FFFFFF;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c0.c0 .ntd-spinner {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
 <button
   class="c0"
   colors="[object Object]"
@@ -598,6 +665,11 @@ exports[`Hollow Button renders 1`] = `
   outline: none;
 }
 
+.c0.c0:focus-visible {
+  outline: 2px solid #4A5757;
+  outline-offset: 2px;
+}
+
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
@@ -618,6 +690,13 @@ exports[`Hollow Button renders 1`] = `
   stroke: #00AB44;
 }
 
+@media (prefers-reduced-motion:reduce) {
+  .c0.c0 .ntd-spinner {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
 <button
   class="c0"
   colors="[object Object]"
diff --git a/src/components/button/button.test.js b/src/components/button/button.test.js
index 4196644be..a7ecb7359 100644
--- a/src/components/button/button.test.js
+++ b/src/components/button/button.test.js
@@ -6,6 +6,25 @@ import { renderWithProviders, fireEvent } from "testUtilities"
 import { Button } from "./button"
 
 describe("Button states", () => {
+  it("shows a focus ring for keyboard focus only", () => {
+    const { container } = renderWithProviders(<Button label="Test prop text" />)
+    const button = container.firstChild
+    expect(button).toHaveStyleRule("outline", "none", { modifier: "&&:focus" })
+    expect(button).toHaveStyleRule("outline", expect.stringMatching(/^2px solid /), {
+      modifier: "&&:focus-visible",
+    })
+    expect(button).toHaveStyleRule("outline-offset", "2px", { modifier: "&&:focus-visible" })
+  })
+
+  it("stops the loading spinner when reduced motion is requested", () => {
+    const { container } = renderWithProviders(<Button label="Save" isLoading />)
+    const button = container.firstChild
+    expect(button).toHaveStyleRule("animation", "none", {
+      modifier: "&& .ntd-spinner",
+      media: "(prefers-reduced-motion:reduce)",
+    })
+  })
+
   it("renders disabled", () => {
     const { container } = renderWithProviders(<Button label="Test prop text" disabled />)
     const button = container.firstChild
diff --git a/src/components/button/styled.js b/src/components/button/styled.js
index 40267bc4d..219b517af 100644
--- a/src/components/button/styled.js
+++ b/src/components/button/styled.js
@@ -202,6 +202,11 @@ export const StyledButton = styled.button.attrs(
       outline: none;
     }
 
+    &:focus-visible {
+      outline: ${getSizeBy(0.25)} solid ${getColor("textFocus")};
+      outline-offset: ${getSizeBy(0.25)};
+    }
+
     .button-icon {
       height: ${props =>
         props.iconWidth
@@ -226,6 +231,11 @@ export const StyledButton = styled.button.attrs(
       animation: ntd-draw 1s linear infinite;
       stroke: ${props => props.colors.color(props)};
       width: 24px;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        stroke-dashoffset: 0;
+      }
     }
 
     .path {
diff --git a/src/components/icon/components/loader.js b/src/components/icon/components/loader.js
index ade4d0c96..93bdf4b1c 100644
--- a/src/components/icon/components/loader.js
+++ b/src/components/icon/components/loader.js
@@ -14,6 +14,11 @@ const StyledSvg = styled.svg`
     stroke: ${getColor("bright")};
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
   @keyframes ntd-draw {
     to {
       stroke-dashoffset: 0;
diff --git a/src/components/icon/components/loader.test.js b/src/components/icon/components/loader.test.js
new file mode 100644
index 000000000..d0a2e46af
--- /dev/null
+++ b/src/components/icon/components/loader.test.js
@@ -0,0 +1,19 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react"
+import { renderWithProviders } from "testUtilities"
+import { LoaderIcon } from "./loader"
+
+describe("LoaderIcon", () => {
+  it("stops animating when reduced motion is requested", () => {
+    const { container } = renderWithProviders(<LoaderIcon />)
+    const svg = container.firstChild
+    expect(svg).toHaveStyleRule("animation", "none", {
+      media: "(prefers-reduced-motion:reduce)",
+    })
+    expect(svg).toHaveStyleRule("stroke-dashoffset", "0", {
+      media: "(prefers-reduced-motion:reduce)",
+    })
+  })
+})

From c2049c5a7399c79d7884d1b159a28e1c3efeca9e Mon Sep 17 00:00:00 2001
From: novykh <ioannis.klironomos@gmail.com>
Date: Fri, 25 Sep 2026 09:19:01 +0300
Subject: [PATCH 2/2] v5.5.14

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 59f69afbf..b1bc2aacc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.5.13",
+  "version": "5.5.14",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",