A11y: Do not force colors in the color swatch and icon series (#70862)

packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx

@@ -82,6 +82,9 @@ const getStyles = (
       '&:hover': {
         transform: 'scale(1.1)',
       },
+      '@media (forced-colors: active)': {
+        forcedColorAdjust: 'none',
+      },
     }),
   };
 };

packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx

@@ -1,8 +1,9 @@
+import { css, cx } from '@emotion/css';
 import React, { CSSProperties } from 'react';
 
 import { fieldColorModeRegistry } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2, useStyles2 } from '../../themes';
 
 export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   color?: string;
@@ -12,6 +13,8 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
 export const SeriesIcon = React.memo(
   React.forwardRef<HTMLDivElement, Props>(({ color, className, gradient, ...restProps }, ref) => {
     const theme = useTheme2();
+    const styles2 = useStyles2(getStyles);
+
     let cssColor: string;
 
     if (gradient) {
@@ -35,8 +38,24 @@ export const SeriesIcon = React.memo(
       marginRight: '8px',
     };
 
-    return <div data-testid="series-icon" ref={ref} className={className} style={styles} {...restProps} />;
+    return (
+      <div
+        data-testid="series-icon"
+        ref={ref}
+        className={cx(className, styles2.forcedColors)}
+        style={styles}
+        {...restProps}
+      />
+    );
   })
 );
 
+const getStyles = () => ({
+  forcedColors: css`
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+    }
+  `,
+});
+
 SeriesIcon.displayName = 'SeriesIcon';