From 827eddd6b34e0119e895e6c88cb1452118964b25 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sat, 8 Jul 2023 20:19:39 +0300
Subject: [PATCH 1/3] raw

---
 packages/docs/modules/vuestic.ts              |  6 +-
 .../radio/examples/ComplexOptions.vue         | 28 ++++++++
 .../ui-elements/radio/examples/Default.vue    | 14 ++--
 .../ui-elements/radio/examples/Options.vue    | 16 +++++
 .../ui-elements/radio/examples/Validation.vue | 30 ++++++++
 .../page-config/ui-elements/radio/index.ts    | 13 ++++
 packages/ui/src/components/index.ts           | 11 +--
 .../ui/src/components/va-radio/VaRadio.vue    | 71 +++++++++++++++----
 packages/ui/src/components/va-radio/types.ts  |  5 +-
 9 files changed, 164 insertions(+), 30 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/radio/examples/ComplexOptions.vue
 create mode 100644 packages/docs/page-config/ui-elements/radio/examples/Options.vue
 create mode 100644 packages/docs/page-config/ui-elements/radio/examples/Validation.vue

diff --git a/packages/docs/modules/vuestic.ts b/packages/docs/modules/vuestic.ts
index c05ab0dadb..b05f70fcb6 100644
--- a/packages/docs/modules/vuestic.ts
+++ b/packages/docs/modules/vuestic.ts
@@ -23,8 +23,10 @@ export default defineNuxtModule<VuesticOptions>({
   },
 
   setup (options, nuxt) {
-    // Fix CSS variables made by v-bind in component: they're not rendered in cjs (SSG).
-    addVitePlugin(componentVBindFix({ sourcemap: false }))
+    if (!nuxt.options.dev) {
+      // Fix CSS variables made by v-bind in component: they're not rendered in cjs (SSG).
+      addVitePlugin(componentVBindFix({ sourcemap: false }))
+    }
 
     nuxt.options.alias['@vuestic/ag-grid-theme'] = resolve(__dirname, '../../ag-grid-theme/src/styles/index.scss');
     nuxt.options.alias['vuestic-ui/styles/typography.css'] = resolve(__dirname, '../../ui/src/styles/typography/typography.scss');
diff --git a/packages/docs/page-config/ui-elements/radio/examples/ComplexOptions.vue b/packages/docs/page-config/ui-elements/radio/examples/ComplexOptions.vue
new file mode 100644
index 0000000000..81723d1e15
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/radio/examples/ComplexOptions.vue
@@ -0,0 +1,28 @@
+<template>
+  <va-radio
+    v-model="value"
+    :options="[
+      {
+        text: 'I\'m 18 or older',
+        value: true,
+      },
+      {
+        text: 'I\'m under 18',
+        value: false,
+      },
+    ]"
+    value-by="value"
+  />
+
+  Value: {{ value }}
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: null,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Default.vue b/packages/docs/page-config/ui-elements/radio/examples/Default.vue
index a44231ece1..5dab7a15da 100644
--- a/packages/docs/page-config/ui-elements/radio/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/radio/examples/Default.vue
@@ -1,18 +1,22 @@
 <template>
   <va-radio
-    v-for="(option, index) in options"
-    :key="index"
     v-model="selectedOption"
-    :option="option"
+    option="One"
+  />
+  <va-radio
+    v-model="selectedOption"
+    option="Two"
+  />
+  <va-radio
+    v-model="selectedOption"
+    option="Three"
   />
-  <div>Selected: {{ selectedOption }}</div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      options: ["one", "two", "three"],
       selectedOption: "one",
     };
   },
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Options.vue b/packages/docs/page-config/ui-elements/radio/examples/Options.vue
new file mode 100644
index 0000000000..cd2dcfc467
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/radio/examples/Options.vue
@@ -0,0 +1,16 @@
+<template>
+  <va-radio
+    v-model="value"
+    :options="['One', 'Two', 'Three']"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 'one',
+    };
+  },
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Validation.vue b/packages/docs/page-config/ui-elements/radio/examples/Validation.vue
new file mode 100644
index 0000000000..d782bad810
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/radio/examples/Validation.vue
@@ -0,0 +1,30 @@
+<template>
+  <va-radio
+    v-model="value"
+    :options="[
+      {
+        text: 'I\'m 18 or older',
+        value: true,
+      },
+      {
+        text: 'I\'m under 18',
+        value: false,
+      },
+    ]"
+    value-by="value"
+    :rules="[
+      (v) => v !== null || 'Required',
+      (v) => !!v || 'You must be 18 or older',
+    ]"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: null,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/radio/index.ts b/packages/docs/page-config/ui-elements/radio/index.ts
index 819a672848..a825da3d6b 100644
--- a/packages/docs/page-config/ui-elements/radio/index.ts
+++ b/packages/docs/page-config/ui-elements/radio/index.ts
@@ -12,6 +12,19 @@ export default definePageConfig({
       title: "Default",
       description: "Default usage  of the `va-radio` component."
     }),
+
+    block.example("Options", {
+      title: "Multiple Options",
+      description: "You can use `options` prop to pass an array of options to the component. Then multiple components will be rendered."
+    }),
+
+    block.example("ComplexOptions", {
+      description: "You can use more complex options with `textBy` and `valueBy` props if needed."
+    }),
+    block.example("Validation", {
+      description: "Passing multiple `options` at the same time allows you to use validation `rules`.",
+    }),
+
     block.example("Color", {
       title: "Colors",
       description: "With `color` prop you can change the color of the component."
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0b5b94091f..c247b1e0b0 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -9,7 +9,14 @@
  * @notice this exports used in `vuestic-ui` package. Make sure add component to vuestic-plugin as well.
  */
 
+// Components used in other components
+export * from './va-input'
 export * from './va-fallback'
+export * from './va-collapse'
+export * from './va-card'
+export * from './va-button'
+
+// Other components
 export * from './va-accordion'
 export * from './va-affix'
 export * from './va-alert'
@@ -23,12 +30,9 @@ export * from './va-breadcrumbs'
 export * from './va-button-dropdown'
 export * from './va-button-group'
 export * from './va-button-toggle'
-export * from './va-button'
-export * from './va-card'
 export * from './va-carousel'
 export * from './va-checkbox'
 export * from './va-chip'
-export * from './va-collapse'
 export * from './va-color-indicator'
 export * from './va-color-input'
 export * from './va-color-palette'
@@ -46,7 +50,6 @@ export * from './va-icon'
 export * from './va-image'
 export * from './va-infinite-scroll'
 export * from './va-inner-loading'
-export * from './va-input'
 export * from './va-list'
 export * from './va-modal'
 export * from './va-navbar'
diff --git a/packages/ui/src/components/va-radio/VaRadio.vue b/packages/ui/src/components/va-radio/VaRadio.vue
index a761cad34b..4030db486b 100644
--- a/packages/ui/src/components/va-radio/VaRadio.vue
+++ b/packages/ui/src/components/va-radio/VaRadio.vue
@@ -1,6 +1,5 @@
 <template>
   <VaMessageListWrapper
-    :class="computedClass"
     :disabled="disabled"
     :success="success"
     :messages="messages"
@@ -11,19 +10,20 @@
     ref="container"
   >
     <label
-      v-for="(option, index) in options"
+      v-for="(option, index) in computedOptions"
       :key="index"
       class="va-radio va-radio__square"
+      :class="radioClass(option)"
     >
       <input
         ref="input"
         class="va-radio__input"
         type="radio"
-        :value="$props.modelValue"
+        :value="isChecked(option)"
         v-bind="inputAttributesComputed"
-        :checked="$props.modelValue === option.value"
-        :aria-checked="$props.modelValue === option.value"
-        @change="selectOption(option.value)"
+        :checked="isChecked(option)"
+        :aria-checked="isChecked(option)"
+        @change="selectOption(getValue(option), $event)"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -38,9 +38,9 @@
         <span class="va-radio__icon__dot" />
       </span>
 
-      <span ref="label" class="va-radio__text">
+      <span v-if="getText(option)" ref="label" class="va-radio__text">
         <slot>
-          {{ option.label || option.value }}
+          {{ getText(option) }}
         </slot>
       </span>
     </label>
@@ -58,6 +58,8 @@ import {
   Elements,
   useSelectableProps,
   useSelectableEmits,
+  useSelectableList,
+  useSelectableListProps,
 } from '../../composables'
 import { VaMessageListWrapper } from '../va-input'
 import type { VaRadioOption } from './types'
@@ -69,6 +71,7 @@ export default defineComponent({
   props: {
     ...useSelectableProps,
     ...useComponentPresetProp,
+    ...useSelectableListProps,
     modelValue: {
       type: [Boolean, Array, String, Object, Number] as PropType<
         VaRadioOption['value']
@@ -83,6 +86,11 @@ export default defineComponent({
     leftLabel: { type: Boolean, default: false },
     color: { type: String, default: 'primary' },
     ariaLabel: { type: String, default: undefined },
+
+    option: {
+      type: [Object, String, Number] as PropType<VaRadioOption>,
+      default: undefined,
+    },
   },
   setup (props, { emit }) {
     const { getColor } = useColors()
@@ -93,7 +101,6 @@ export default defineComponent({
     }
 
     const {
-      isChecked,
       computedError,
       computedErrorMessages,
       validationAriaAttributes,
@@ -101,16 +108,45 @@ export default defineComponent({
       onFocus,
     } = useSelectable(props, emit, elements)
 
-    const computedClass = computed(() => ({
+    const { getText, getValue } = useSelectableList(props)
+
+    const isNoOption = computed(() => props.options.length === 0 && !props.option)
+
+    const isChecked = (option: VaRadioOption) => {
+      if (isNoOption.value) {
+        return Boolean(props.modelValue)
+      }
+
+      return props.modelValue === getValue(option)
+    }
+
+    const computedOptions = computed(() => {
+      if (isNoOption.value) {
+        return [{}]
+      }
+
+      if (props.option) {
+        return [props.option]
+      } else {
+        return props.options
+      }
+    })
+
+    const radioClass = (option: VaRadioOption) => ({
       'va-radio--left-label': props.leftLabel,
-      'va-radio--selected': isChecked.value,
+      'va-radio--selected': isChecked(option),
       'va-radio--readonly': props.readonly,
       'va-radio--disabled': props.disabled,
       'va-radio--indeterminate': props.indeterminate,
       'va-radio--error': computedError.value,
-    }))
+    })
+
+    const selectOption = (option: any, e: Event) => {
+      if (isNoOption.value) {
+        emit('update:modelValue', !props.modelValue)
+        return
+      }
 
-    const selectOption = (option: VaRadioOption['value']) => {
       emit('update:modelValue', option)
     }
 
@@ -160,7 +196,9 @@ export default defineComponent({
       ...validationAriaAttributes.value,
     }))
     return {
-      computedClass,
+      isChecked,
+      computedOptions,
+      radioClass,
       labelStyle,
       inputStyle,
       computedError,
@@ -173,6 +211,9 @@ export default defineComponent({
       onBlur,
       inputAttributesComputed,
       computedName,
+
+      getText,
+      getValue,
     }
   },
 })
@@ -276,7 +317,7 @@ export default defineComponent({
       border-radius: var(--va-radio-background-border-radius);
       z-index: var(--va-radio-background-z-index);
       opacity: var(--va-radio-background-opacity);
-      background-color: v-bind("iconBackgroundComputedStyles.backgroundColor");
+      background-color: v-bind('iconBackgroundComputedStyles.backgroundColor');
 
       .va-radio:hover & {
         opacity: 0.2;
diff --git a/packages/ui/src/components/va-radio/types.ts b/packages/ui/src/components/va-radio/types.ts
index b22b99b7da..a7fdd5432f 100644
--- a/packages/ui/src/components/va-radio/types.ts
+++ b/packages/ui/src/components/va-radio/types.ts
@@ -1,4 +1 @@
-export type VaRadioOption = {
-  label: string,
-  value: boolean | null | string | number | unknown[] | Record<string, unknown>;
-}
+export type VaRadioOption = any

From 626e006ac48f6b5155a7dd6d487502859af1fced Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sat, 8 Jul 2023 20:46:26 +0300
Subject: [PATCH 2/3] feat(va-radio): no option usage

---
 .../ui-elements/radio/examples/NoOption.vue       | 15 +++++++++++++++
 .../docs/page-config/ui-elements/radio/index.ts   |  9 +++++++--
 packages/ui/src/components/va-radio/VaRadio.vue   | 10 +++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/radio/examples/NoOption.vue

diff --git a/packages/docs/page-config/ui-elements/radio/examples/NoOption.vue b/packages/docs/page-config/ui-elements/radio/examples/NoOption.vue
new file mode 100644
index 0000000000..3f9e13a8e5
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/radio/examples/NoOption.vue
@@ -0,0 +1,15 @@
+<template>
+  <va-radio
+    v-model="isChecked"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isChecked: false,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/radio/index.ts b/packages/docs/page-config/ui-elements/radio/index.ts
index a825da3d6b..6a6572af50 100644
--- a/packages/docs/page-config/ui-elements/radio/index.ts
+++ b/packages/docs/page-config/ui-elements/radio/index.ts
@@ -15,9 +15,9 @@ export default definePageConfig({
 
     block.example("Options", {
       title: "Multiple Options",
-      description: "You can use `options` prop to pass an array of options to the component. Then multiple components will be rendered."
+      description: "You can use `options` prop to pass an array of options to the component. Then multiple components will be rendered.`"
     }),
-
+    block.alert('Prefer using `options` prop over `option`, because it will handle keyboard navigation automatically.'),
     block.example("ComplexOptions", {
       description: "You can use more complex options with `textBy` and `valueBy` props if needed."
     }),
@@ -25,6 +25,11 @@ export default definePageConfig({
       description: "Passing multiple `options` at the same time allows you to use validation `rules`.",
     }),
 
+    block.example("NoOption", {
+      title: "Without option",
+      description: "In case you just need a radio input without option and want to handle everything manually `v-model` will be used as Boolean and represent if radio is checked."
+    }),
+
     block.example("Color", {
       title: "Colors",
       description: "With `color` prop you can change the color of the component."
diff --git a/packages/ui/src/components/va-radio/VaRadio.vue b/packages/ui/src/components/va-radio/VaRadio.vue
index 4030db486b..e60016a1e8 100644
--- a/packages/ui/src/components/va-radio/VaRadio.vue
+++ b/packages/ui/src/components/va-radio/VaRadio.vue
@@ -7,13 +7,17 @@
     :error-messages="computedErrorMessages"
     :error-count="errorCount"
     @blur="onBlur"
+    :role="($props.options?.length || 0) > 0 ? 'radiogroup' : ''"
     ref="container"
   >
     <label
       v-for="(option, index) in computedOptions"
       :key="index"
-      class="va-radio va-radio__square"
       :class="radioClass(option)"
+      class="va-radio va-radio__square"
+      role="radio"
+      @click="selectOption(getValue(option))"
+      @keydown.space.prevent="selectOption(getValue(option))"
     >
       <input
         ref="input"
@@ -23,7 +27,6 @@
         v-bind="inputAttributesComputed"
         :checked="isChecked(option)"
         :aria-checked="isChecked(option)"
-        @change="selectOption(getValue(option), $event)"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -31,6 +34,7 @@
       <span
         aria-hidden="true"
         class="va-radio__icon"
+        @click.stop
       >
         <span
           class="va-radio__icon__background"
@@ -141,7 +145,7 @@ export default defineComponent({
       'va-radio--error': computedError.value,
     })
 
-    const selectOption = (option: any, e: Event) => {
+    const selectOption = (option: any) => {
       if (isNoOption.value) {
         emit('update:modelValue', !props.modelValue)
         return

From c068129917f55513c898a4b00c4acc9593705d6e Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sat, 8 Jul 2023 22:31:47 +0300
Subject: [PATCH 3/3] fix(#3585): va-radio accessibility improvement

---
 packages/docs/page-config/navigationRoutes.ts |  3 +
 .../ui-elements/radio/api-description.ts      | 12 ++-
 .../ui-elements/radio/examples/Color.vue      |  3 +
 .../ui-elements/radio/examples/Default.vue    |  3 +
 .../ui-elements/radio/examples/NoOption.vue   | 15 ----
 .../ui-elements/radio/examples/Slot.vue       | 31 +++++++
 .../ui-elements/radio/examples/Validation.vue |  8 +-
 .../page-config/ui-elements/radio/index.ts    | 26 ++++--
 .../ui/src/components/va-radio/VaRadio.vue    | 84 ++++++++++++-------
 9 files changed, 127 insertions(+), 58 deletions(-)
 delete mode 100644 packages/docs/page-config/ui-elements/radio/examples/NoOption.vue
 create mode 100644 packages/docs/page-config/ui-elements/radio/examples/Slot.vue

diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
index 7616276fa3..5c0d2f9dad 100644
--- a/packages/docs/page-config/navigationRoutes.ts
+++ b/packages/docs/page-config/navigationRoutes.ts
@@ -216,6 +216,9 @@ export const navigationRoutes: NavigationRoute[] = [
       {
         name: "radio",
         displayName: "Radio",
+        meta: {
+          badge : navigationBadge.updated('1.7.0'),
+        }
       },
       {
         name: "option-list",
diff --git a/packages/docs/page-config/ui-elements/radio/api-description.ts b/packages/docs/page-config/ui-elements/radio/api-description.ts
index 9d70b08d2b..8255804b8d 100644
--- a/packages/docs/page-config/ui-elements/radio/api-description.ts
+++ b/packages/docs/page-config/ui-elements/radio/api-description.ts
@@ -4,6 +4,16 @@ export default defineApiDescription({
   props: {
     value: "Model of the component",
     option: "Option value that model is updated to when an option is selected",
-    tabindex: "Sets a custom tabindex"
+    options: "Array of options to be rendered",
+    tabindex: "Sets a custom tabindex",
+    textBy: "This prop is used to get the text of the option if option is an object",
+    trackBy: "In case there are options with the same value, to distinguish them you can use this prop",
+    valueBy: "This prop is used to get the value of the option if option is an object. If not provided, the option itself will be used as a value",
+    disabledBy: "This prop is used to get the disabled state of the option if option is an object",
+    ariaLabel: "Sets aria-label attribute",
+  },
+  slots: {
+    default: "Use this slot to pass a custom content as text to the component.",
+    icon: "Use this slot to pass a custom icon to the component.",
   }
 });
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Color.vue b/packages/docs/page-config/ui-elements/radio/examples/Color.vue
index 3f9a87418e..bc9b826457 100644
--- a/packages/docs/page-config/ui-elements/radio/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/radio/examples/Color.vue
@@ -4,18 +4,21 @@
     :option="options[0]"
     color="warning"
     label="warning"
+    name="color-radio-group"
   />
   <va-radio
     v-model="selectedOption"
     :option="options[1]"
     color="danger"
     label="danger"
+    name="color-radio-group"
   />
   <va-radio
     v-model="selectedOption"
     :option="options[2]"
     color="info"
     label="info"
+    name="color-radio-group"
   />
 </template>
 
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Default.vue b/packages/docs/page-config/ui-elements/radio/examples/Default.vue
index 5dab7a15da..8e34cbc59d 100644
--- a/packages/docs/page-config/ui-elements/radio/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/radio/examples/Default.vue
@@ -2,14 +2,17 @@
   <va-radio
     v-model="selectedOption"
     option="One"
+    name="radio-group"
   />
   <va-radio
     v-model="selectedOption"
     option="Two"
+    name="radio-group"
   />
   <va-radio
     v-model="selectedOption"
     option="Three"
+    name="radio-group"
   />
 </template>
 
diff --git a/packages/docs/page-config/ui-elements/radio/examples/NoOption.vue b/packages/docs/page-config/ui-elements/radio/examples/NoOption.vue
deleted file mode 100644
index 3f9e13a8e5..0000000000
--- a/packages/docs/page-config/ui-elements/radio/examples/NoOption.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <va-radio
-    v-model="isChecked"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      isChecked: false,
-    };
-  },
-};
-</script>
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Slot.vue b/packages/docs/page-config/ui-elements/radio/examples/Slot.vue
new file mode 100644
index 0000000000..a307cbd665
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/radio/examples/Slot.vue
@@ -0,0 +1,31 @@
+<template>
+  <va-radio
+    v-model="value"
+    :options="['One', 'Two', 'Three']"
+  >
+    <template #icon="{ value }">
+      <va-icon
+        class="custom-icon"
+        :name="value ? 'check_circle' : 'radio_button_unchecked'"
+        :color="value ? 'primary': 'secondary'"
+      />
+    </template>
+    <va-badge>Text</va-badge>
+  </va-radio>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 'one',
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.va-radio__input:focus-visible + .custom-icon {
+  outline: 1px solid var(--va-primary);
+}
+</style>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/radio/examples/Validation.vue b/packages/docs/page-config/ui-elements/radio/examples/Validation.vue
index d782bad810..d9c0eb9461 100644
--- a/packages/docs/page-config/ui-elements/radio/examples/Validation.vue
+++ b/packages/docs/page-config/ui-elements/radio/examples/Validation.vue
@@ -1,6 +1,10 @@
 <template>
   <va-radio
     v-model="value"
+    :rules="[
+      (v) => v !== null || 'Required',
+      (v) => !!v || 'You must be 18 or older',
+    ]"
     :options="[
       {
         text: 'I\'m 18 or older',
@@ -12,10 +16,6 @@
       },
     ]"
     value-by="value"
-    :rules="[
-      (v) => v !== null || 'Required',
-      (v) => !!v || 'You must be 18 or older',
-    ]"
   />
 </template>
 
diff --git a/packages/docs/page-config/ui-elements/radio/index.ts b/packages/docs/page-config/ui-elements/radio/index.ts
index 6a6572af50..e12b1f6ec4 100644
--- a/packages/docs/page-config/ui-elements/radio/index.ts
+++ b/packages/docs/page-config/ui-elements/radio/index.ts
@@ -10,14 +10,13 @@ export default definePageConfig({
 
     block.example("Default", {
       title: "Default",
-      description: "Default usage  of the `va-radio` component."
+      description: "Default usage  of the `va-radio` component. Make sure to add a `name` prop to group them together."
     }),
 
     block.example("Options", {
       title: "Multiple Options",
       description: "You can use `options` prop to pass an array of options to the component. Then multiple components will be rendered.`"
     }),
-    block.alert('Prefer using `options` prop over `option`, because it will handle keyboard navigation automatically.'),
     block.example("ComplexOptions", {
       description: "You can use more complex options with `textBy` and `valueBy` props if needed."
     }),
@@ -25,11 +24,6 @@ export default definePageConfig({
       description: "Passing multiple `options` at the same time allows you to use validation `rules`.",
     }),
 
-    block.example("NoOption", {
-      title: "Without option",
-      description: "In case you just need a radio input without option and want to handle everything manually `v-model` will be used as Boolean and represent if radio is checked."
-    }),
-
     block.example("Color", {
       title: "Colors",
       description: "With `color` prop you can change the color of the component."
@@ -42,6 +36,24 @@ export default definePageConfig({
       title: "Disabled",
       description: "With `disabled` prop you can disable a user interaction  with `va-radio` component."
     }),
+    block.example("Slot", {
+      title: "Slot",
+      description: "You can use `default` slot to pass a custom content as text to the component. You can also change icon appearance with `icon` slot."
+    }),
+
+    block.subtitle('Accessibility'),
+    block.paragraph(`
+Each option has [radio](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role)[[target=_blank]] role attribute.
+If \`options\` prop is used the component has a [radiogroup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role)[[target=_blank]] role attribute, 
+otherwise you need to add \`role="radiogroup"\` on parent element manually.
+
+[aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked)[[target=_blank]] is applied on option automatically.
+
+Always set \`name\` prop on the component to group options together for correct keyboard navigation.
+
+Set [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)[[target=_blank]] or [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)[[target=_blank]] attribute on the component to provide a label for screen readers for radio-group if needed.
+By default radio element labeled by text from option.
+    `.trim()),
 
     block.subtitle("API"),
     block.api("VaRadio", apiDescription, apiOptions),
diff --git a/packages/ui/src/components/va-radio/VaRadio.vue b/packages/ui/src/components/va-radio/VaRadio.vue
index e60016a1e8..136732fd5b 100644
--- a/packages/ui/src/components/va-radio/VaRadio.vue
+++ b/packages/ui/src/components/va-radio/VaRadio.vue
@@ -15,35 +15,47 @@
       :key="index"
       :class="radioClass(option)"
       class="va-radio va-radio__square"
-      role="radio"
-      @click="selectOption(getValue(option))"
-      @keydown.space.prevent="selectOption(getValue(option))"
     >
       <input
         ref="input"
         class="va-radio__input"
         type="radio"
+        role="radio"
         :value="isChecked(option)"
-        v-bind="inputAttributesComputed"
         :checked="isChecked(option)"
         :aria-checked="isChecked(option)"
+        v-bind="inputAttributesComputed(option)"
+        @change="selectOption(getValue(option), $event)"
         @focus="onFocus"
         @blur="onBlur"
       />
 
-      <span
-        aria-hidden="true"
-        class="va-radio__icon"
-        @click.stop
-      >
+      <slot name="icon" v-bind="{
+        value: isChecked(option),
+        text: getText(option),
+        disabled: getDisabled(option),
+      }">
         <span
-          class="va-radio__icon__background"
-        />
-        <span class="va-radio__icon__dot" />
-      </span>
+          aria-hidden="true"
+          class="va-radio__icon"
+        >
+          <span
+            class="va-radio__icon__background"
+          />
+          <span class="va-radio__icon__dot" />
+        </span>
+      </slot>
 
-      <span v-if="getText(option)" ref="label" class="va-radio__text">
-        <slot>
+      <span
+        v-if="getText(option) || $slots.default"
+        ref="label"
+        class="va-radio__text"
+      >
+         <slot v-bind="{
+          value: isChecked(option),
+          text: getText(option),
+          disabled: getDisabled(option),
+        }">
           {{ getText(option) }}
         </slot>
       </span>
@@ -89,7 +101,6 @@ export default defineComponent({
     name: { type: String, default: '' },
     leftLabel: { type: Boolean, default: false },
     color: { type: String, default: 'primary' },
-    ariaLabel: { type: String, default: undefined },
 
     option: {
       type: [Object, String, Number] as PropType<VaRadioOption>,
@@ -112,13 +123,15 @@ export default defineComponent({
       onFocus,
     } = useSelectable(props, emit, elements)
 
-    const { getText, getValue } = useSelectableList(props)
+    const { getText, getValue, getDisabled: originalGetDisabled } = useSelectableList(props)
+
+    const getDisabled = (option: Parameters<typeof originalGetDisabled>[0]) => originalGetDisabled(option) || props.disabled
 
     const isNoOption = computed(() => props.options.length === 0 && !props.option)
 
     const isChecked = (option: VaRadioOption) => {
       if (isNoOption.value) {
-        return Boolean(props.modelValue)
+        return props.modelValue
       }
 
       return props.modelValue === getValue(option)
@@ -145,9 +158,9 @@ export default defineComponent({
       'va-radio--error': computedError.value,
     })
 
-    const selectOption = (option: any) => {
+    const selectOption = (option: any, event?: any) => {
       if (isNoOption.value) {
-        emit('update:modelValue', !props.modelValue)
+        emit('update:modelValue', event?.target?.checked || false)
         return
       }
 
@@ -189,17 +202,21 @@ export default defineComponent({
     })
 
     const computedName = computed(() => props.name || generateUniqueId())
-    const inputAttributesComputed = computed(() => ({
-      name: computedName.value,
-      disabled: props.disabled,
-      readonly: props.readonly,
-      tabindex: props.disabled ? -1 : 0,
-      'aria-label': props.ariaLabel,
-      'aria-disabled': props.disabled,
-      'aria-readOnly': props.readonly,
-      ...validationAriaAttributes.value,
-    }))
+    const inputAttributesComputed = (option: any) => {
+      const disabled = getDisabled(option)
+      return {
+        name: computedName.value,
+        disabled: disabled,
+        readonly: props.readonly,
+        tabindex: disabled ? -1 : 0,
+        'aria-disabled': disabled,
+        'aria-readOnly': props.readonly,
+        ...validationAriaAttributes.value,
+      }
+    }
+
     return {
+      getDisabled,
       isChecked,
       computedOptions,
       radioClass,
@@ -259,7 +276,7 @@ export default defineComponent({
   &--left-label {
     flex-direction: row-reverse;
     display: inline-flex;
-    align-items: baseline;
+    align-items: center;
   }
 
   &__input {
@@ -341,6 +358,11 @@ export default defineComponent({
     .va-radio--disabled & {
       @include va-disabled;
     }
+
+    .va-radio--left-label & {
+      margin-right: var(--va-radio-text-margin-left);
+      margin-left: var(--va-radio-text-margin-right);
+    }
   }
 }
 </style>