Show a keyboard focus ring on Button and respect reduced motion in lo…

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",

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]"

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

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 {

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;

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)",
+    })
+  })
+})