diff --git a/.betterer.results b/.betterer.results
index 8eae87a35fa..7c4d3a577f5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -4224,36 +4224,24 @@ exports[`no skipping a11y tests in stories`] = {
     "packages/grafana-alerting/src/grafana/contactPoints/components/ContactPointSelector/ContactPointSelector.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
-    "packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx:5381": [
-      [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
-    ],
     "packages/grafana-ui/src/components/Combobox/MultiCombobox.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
     "packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
-    "packages/grafana-ui/src/components/FormField/FormField.story.tsx:5381": [
-      [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
-    ],
     "packages/grafana-ui/src/components/Forms/Checkbox.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
     "packages/grafana-ui/src/components/Forms/FieldArray.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
-    "packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx:5381": [
-      [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
-    ],
     "packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
     "packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
-    "packages/grafana-ui/src/components/Link/TextLink.story.tsx:5381": [
-      [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
-    ],
     "packages/grafana-ui/src/components/Menu/Menu.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
@@ -4284,9 +4272,6 @@ exports[`no skipping a11y tests in stories`] = {
     "packages/grafana-ui/src/components/Table/Table.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ],
-    "packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx:5381": [
-      [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
-    ],
     "packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx:5381": [
       [0, 0, 0, "No skipping of a11y tests in stories. Please fix the component or story instead.", "5381"]
     ]
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
index 5b3f6921084..d2c681f2e4a 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
@@ -18,12 +18,10 @@ const meta: Meta<typeof ColorPicker> = {
     controls: {
       exclude: ['onChange', 'onColorChange'],
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   args: {
     enableNamedColors: false,
-    color: '#00ff00',
+    color: '#0000ff',
   },
 };
 
diff --git a/packages/grafana-ui/src/components/FormField/FormField.story.tsx b/packages/grafana-ui/src/components/FormField/FormField.story.tsx
index 9d39b20536b..845001dcacc 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.story.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.story.tsx
@@ -9,8 +9,6 @@ const meta: Meta<typeof FormField> = {
     controls: {
       exclude: ['inputEl'],
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   args: {
     inputWidth: 20,
diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
index b949a02d106..4d9bca9ded8 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, useId } from 'react';
 import * as React from 'react';
 
 import { InlineFormLabel } from '../FormLabel/FormLabel';
@@ -36,13 +36,15 @@ export const FormField = ({
   ...inputProps
 }: Props) => {
   const styles = getStyles();
+  const id = useId();
   return (
     <div className={cx(styles.formField, className)}>
-      <InlineFormLabel width={labelWidth} tooltip={tooltip} interactive={interactive}>
+      <InlineFormLabel htmlFor={id} width={labelWidth} tooltip={tooltip} interactive={interactive}>
         {label}
       </InlineFormLabel>
       {inputEl || (
         <input
+          id={id}
           type="text"
           className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`}
           {...inputProps}
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx
index 8f8dadc33f0..b66140fe586 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx
@@ -14,8 +14,6 @@ const meta: Meta = {
     controls: {
       exclude: ['className', 'options', 'value', 'onChange', 'onClick', 'id'],
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   argTypes: {
     disabledOptions: {
@@ -37,9 +35,9 @@ export const RadioButtons: StoryFn = (args) => {
   ];
 
   const optionsWithOnlyIcons = [
-    { description: 'Prometheus', value: 'prometheus', icon: 'gf-interpolation-linear' },
-    { description: 'Graphite', value: 'graphite', icon: 'gf-interpolation-smooth' },
-    { description: 'Elastic', value: 'elastic', icon: 'gf-interpolation-step-after' },
+    { ariaLabel: 'Prometheus', description: 'Prometheus', value: 'prometheus', icon: 'gf-interpolation-linear' },
+    { ariaLabel: 'Graphite', description: 'Graphite', value: 'graphite', icon: 'gf-interpolation-smooth' },
+    { ariaLabel: 'Elastic', description: 'Elastic', value: 'elastic', icon: 'gf-interpolation-step-after' },
   ];
 
   return (
diff --git a/packages/grafana-ui/src/components/Link/TextLink.story.tsx b/packages/grafana-ui/src/components/Link/TextLink.story.tsx
index b353b15674f..6c1b9eb5fff 100644
--- a/packages/grafana-ui/src/components/Link/TextLink.story.tsx
+++ b/packages/grafana-ui/src/components/Link/TextLink.story.tsx
@@ -15,8 +15,6 @@ const meta: Meta = {
       page: mdx,
     },
     controls: { exclude: ['href', 'external'] },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   argTypes: {
     variant: {
diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx
index d73c22c82c4..903afb6e428 100644
--- a/packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx
+++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx
@@ -11,8 +11,6 @@ const meta: Meta = {
     controls: {
       exclude: ['legend'],
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   argTypes: {
     width: { control: { type: 'range', min: 100, max: 1000 } },
@@ -36,7 +34,7 @@ export const BottomLegend: StoryFn = ({ height, width, legendItems }) => {
   const legend = (
     <VizLayout.Legend placement="bottom" maxHeight="30%">
       {items.map((_, index) => (
-        <div style={{ height: '30px', width: '100%', background: 'blue', marginBottom: '2px' }} key={index}>
+        <div style={{ height: '30px', width: '100%', background: 'lightblue', marginBottom: '2px' }} key={index}>
           Legend item {index}
         </div>
       ))}
@@ -66,7 +64,10 @@ export const RightLegend: StoryFn = ({ height, width, legendItems, legendWidth }
   const legend = (
     <VizLayout.Legend placement="right" maxWidth="50%">
       {items.map((_, index) => (
-        <div style={{ height: '30px', width: `${legendWidth}px`, background: 'blue', marginBottom: '2px' }} key={index}>
+        <div
+          style={{ height: '30px', width: `${legendWidth}px`, background: 'lightblue', marginBottom: '2px' }}
+          key={index}
+        >
           Legend item {index}
         </div>
       ))}