fix: replace v-radio-group with RadioGroup component and fix DialogContent accessibility warnings

components/modal.vue

@@ -61,12 +61,8 @@ const handleEscape = (event: Event) => {
 
 <template>
   <Dialog :open="modelValue" @update:open="handleUpdateOpen">
-    <DialogContent
-      :class="cn(sizeClassMap[size], props.class, contentClass)"
-      @pointerDownOutside="handlePointerOutside"
-      @interactOutside="handlePointerOutside"
-      @escapeKeyDown="handleEscape"
-    >
+    <DialogContent :class="cn(sizeClassMap[size], props.class, contentClass)" @pointerDownOutside="handlePointerOutside" @interactOutside="handlePointerOutside"
+      @escapeKeyDown="handleEscape">
       <DialogHeader v-if="title || description || $slots.header" class="text-left">
         <slot name="header">
           <DialogTitle v-if="title">{{ title }}</DialogTitle>

components/object/info.vue

@@ -103,13 +103,15 @@
           <Field>
             <FieldLabel>{{ t('Retention Mode') }}</FieldLabel>
             <FieldContent>
-              <v-radio-group
-                v-model="retentionMode"
-                :options="[
+              <RadioGroup v-model="retentionMode" class="grid gap-2 sm:grid-cols-2">
+                <label v-for="option in [
                   { label: t('COMPLIANCE'), value: 'COMPLIANCE' },
                   { label: t('GOVERNANCE'), value: 'GOVERNANCE' },
-                ]"
-              />
+                ]" :key="option.value" class="flex items-start gap-3 rounded-md border border-border/50 p-3">
+                  <RadioGroupItem :value="option.value" class="mt-0.5" />
+                  <span class="text-sm font-medium">{{ option.label }}</span>
+                </label>
+              </RadioGroup>
             </FieldContent>
           </Field>
           <Field>
@@ -128,14 +130,8 @@
     </Modal>
 
     <object-preview-modal v-model:show="showPreview" :object="previewObject ?? object" />
-    <ObjectVersions
-      :bucket-name="bucketName"
-      :object-key="object?.Key || ''"
-      :visible="showVersions"
-      @close="handleVersionsClose"
-      @preview="handlePreviewVersion"
-      @refresh-parent="handleVersionsRefresh"
-    />
+    <ObjectVersions :bucket-name="bucketName" :object-key="object?.Key || ''" :visible="showVersions" @close="handleVersionsClose" @preview="handlePreviewVersion"
+      @refresh-parent="handleVersionsRefresh" />
   </Drawer>
 </template>
 
@@ -153,6 +149,7 @@ import { Button } from '@/components/ui/button'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { Item, ItemContent, ItemHeader, ItemTitle } from '@/components/ui/item'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Switch } from '@/components/ui/switch'
 import Drawer from '~/components/drawer.vue'
 import Modal from '~/components/modal.vue'