Spinner: Change spinner icon when prefers-reduced-motion is set (#87641)

* change spinner icon when prefers-reduced-motion is set

* update mock

* remove outdated comment

* fix matchMedia mocks

* update spinner aria label

packages/grafana-ui/src/components/Spinner/Spinner.tsx

@@ -6,6 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 import { IconSize, isIconSize } from '../../types';
+import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { getIconRoot, getIconSubDir } from '../Icon/utils';
 
@@ -38,6 +39,8 @@ export const Spinner = ({
   const styles = useStyles2(getStyles);
 
   const deprecatedStyles = useStyles2(getDeprecatedStyles, size);
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const iconName = prefersReducedMotion ? 'hourglass' : 'spinner';
 
   // this entire if statement is handling the deprecated size prop
   // TODO remove once we fully remove the deprecated type
@@ -80,7 +83,17 @@ export const Spinner = ({
         className
       )}
     >
-      <Icon className={cx('fa-spin', iconClassName)} name="spinner" size={size} aria-label="loading spinner" />
+      <Icon
+        className={cx(
+          {
+            'fa-spin': !prefersReducedMotion,
+          },
+          iconClassName
+        )}
+        name={iconName}
+        size={size}
+        aria-label={t('grafana-ui.spinner.aria-label', 'Loading')}
+      />
     </div>
   );
 };

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.test.tsx

@@ -30,11 +30,14 @@ const renderWithProvider = ({ initialState }: { initialState?: Partial<appTypes.
 
 describe('OrganisationSwitcher', () => {
   beforeEach(() => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
+    jest.spyOn(window, 'matchMedia').mockImplementation(
-      addEventListener: jest.fn(),
+      () =>
-      removeEventListener: jest.fn(),
+        ({
-      matches: true,
+          addEventListener: jest.fn(),
-    }));
+          removeEventListener: jest.fn(),
+          matches: true,
+        }) as unknown as MediaQueryList
+    );
   });
 
   it('should only render if more than one organisations', () => {
@@ -80,11 +83,14 @@ describe('OrganisationSwitcher', () => {
   });
 
   it('should render a picker in mobile screen', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
+    jest.spyOn(window, 'matchMedia').mockImplementation(
-      addEventListener: jest.fn(),
+      () =>
-      removeEventListener: jest.fn(),
+        ({
-      matches: false,
+          addEventListener: jest.fn(),
-    }));
+          removeEventListener: jest.fn(),
+          matches: false,
+        }) as unknown as MediaQueryList
+    );
     renderWithProvider({
       initialState: {
         organization: {

public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx

@@ -14,11 +14,14 @@ const renderComponent = (options?: { props: TopSearchBarSectionProps }) => {
 
 describe('TopSearchBarSection', () => {
   it('should use a wrapper on non mobile screen', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
+    jest.spyOn(window, 'matchMedia').mockImplementation(
-      addEventListener: jest.fn(),
+      () =>
-      removeEventListener: jest.fn(),
+        ({
-      matches: true,
+          addEventListener: jest.fn(),
-    }));
+          removeEventListener: jest.fn(),
+          matches: true,
+        }) as unknown as MediaQueryList
+    );
 
     const component = renderComponent();
 
@@ -27,11 +30,14 @@ describe('TopSearchBarSection', () => {
   });
 
   it('should not use a wrapper on mobile screen', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
+    jest.spyOn(window, 'matchMedia').mockImplementation(
-      addEventListener: jest.fn(),
+      () =>
-      removeEventListener: jest.fn(),
+        ({
-      matches: false,
+          addEventListener: jest.fn(),
-    }));
+          removeEventListener: jest.fn(),
+          matches: false,
+        }) as unknown as MediaQueryList
+    );
 
     const component = renderComponent();
 

public/locales/en-US/grafana.json

@@ -618,6 +618,9 @@
     "select": {
       "no-options-label": "No options found",
       "placeholder": "Choose"
+    },
+    "spinner": {
+      "aria-label": "Loading"
     }
   },
   "graph": {

public/locales/pseudo-LOCALE/grafana.json

@@ -618,6 +618,9 @@
     "select": {
       "no-options-label": "Ńő őpŧįőʼnş ƒőūʼnđ",
       "placeholder": "Cĥőőşę"
+    },
+    "spinner": {
+      "aria-label": "Ŀőäđįʼnģ"
     }
   },
   "graph": {

public/test/jest-setup.ts

@@ -34,19 +34,15 @@ global.grafanaBootData = {
   navTree: [],
 };
 
-// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+window.matchMedia = (query) => ({
-Object.defineProperty(global, 'matchMedia', {
+  matches: false,
-  writable: true,
+  media: query,
-  value: jest.fn().mockImplementation((query) => ({
+  onchange: null,
-    matches: false,
+  addListener: jest.fn(), // Deprecated
-    media: query,
+  removeListener: jest.fn(), // Deprecated
-    onchange: null,
+  addEventListener: jest.fn(),
-    addListener: jest.fn(), // deprecated
+  removeEventListener: jest.fn(),
-    removeListener: jest.fn(), // deprecated
+  dispatchEvent: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
 });
 
 angular.module('grafana', ['ngRoute']);