wowowowowo

resources/js/pages/servers/Create.vue

@@ -1,16 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import RadioButton from "@/components/RadioButton.vue";
 import { Button } from "@/components/ui/button";
 import AppLayout from "@/layouts/AppLayout.vue";
 import { Head, router, useForm } from "@inertiajs/vue3";
 import { watch } from "vue";
 
-const props = defineProps({
-    providers: Array,
-    locations: Array,
-    serverTypes: Array,
-    images: Array,
-});
+const props = defineProps<{
+    providers?: Record<string, any>[];
+    locations?: Record<string, any>[];
+    serverTypes?: Record<string, any>[];
+    images?: Record<string, any>[];
+}>();
 
 const form = useForm({
     provider: null,
@@ -30,7 +30,7 @@ watch(
 watch(
     () => form.location,
     (location) => {
-        const selectedLoc = props.locations.find((loc) => loc.id === location)?.networkZone;
+        const selectedLoc = props.locations?.find((loc) => loc.id === location)?.networkZone;
         form.network_zone = selectedLoc;
         loadServerTypes();
     },
@@ -82,9 +82,10 @@ function loadServerTypes() {
         ]"
     >
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            <div class="flex flex-wrap gap-2">
+            <div class="flex flex-wrap gap-2" role="radiogroup" aria-label="Cloud provider">
                 <RadioButton
                     v-for="provider in providers"
+                    :key="provider.id"
                     v-model="form.provider"
                     :value="provider.id"
                     :disabled="provider.disabled"
@@ -93,9 +94,15 @@ function loadServerTypes() {
                     {{ provider.name }}
                 </RadioButton>
             </div>
-            <div v-if="form.provider" class="flex flex-wrap gap-2">
+            <div
+                v-if="form.provider"
+                class="flex flex-wrap gap-2"
+                role="radiogroup"
+                aria-label="Server location"
+            >
                 <RadioButton
                     v-for="location in locations"
+                    :key="location.id"
                     v-model="form.location"
                     :value="location.id"
                     :disabled="location.disabled"
@@ -107,26 +114,36 @@ function loadServerTypes() {
             <div
                 v-if="form.location"
                 class="grid gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                role="radiogroup"
+                aria-label="Server type"
             >
                 <RadioButton
                     v-for="serverType in serverTypes?.sort((a, b) => a.cores - b.cores) ?? []"
+                    :key="serverType.id"
                     v-model="form.server_type"
                     :value="serverType.id"
                     :disabled="serverType.disabled"
                     name="server-type"
+                    :described-by="`server-type-${serverType.id}-description`"
                 >
                     <h5 class="text-lg font-semibold uppercase tracking-tight">
                         {{ serverType.name }}
                     </h5>
-                    <p class="text-sm opacity-60">
+                    <p :id="`server-type-${serverType.id}-description`" class="text-sm opacity-60">
                         {{ serverType.cores }} cores &bull; {{ serverType.memory }} GB RAM &bull;
                         {{ serverType.disk }} GB disk
                     </p>
                 </RadioButton>
             </div>
-            <div v-if="form.server_type" class="flex flex-wrap gap-2">
+            <div
+                v-if="form.server_type"
+                class="flex flex-wrap gap-2"
+                role="radiogroup"
+                aria-label="Server image"
+            >
                 <RadioButton
                     v-for="image in images"
+                    :key="image.id"
                     v-model="form.image"
                     :value="image.id"
                     :disabled="image.disabled"