CED-1815 Fix accessibility issue in v3 EsRadioButton

es-ds-components/components/es-radio-input-group.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/*
+Similar API to https://bootstrap-vue.org/docs/components/form-radio#component-reference
+
+Only more restrained, and based on historical usage. Things like configurable
+value field aren't supported as they weren't used downstream.
+
+Similarly things like size are not implemented
+*/
+
+interface IOptions {
+    text: string;
+    value: any;
+    disabled?: boolean;
+}
+
+interface IProps {
+    id: string;
+    label: string;
+    name?: string;
+    options?: IOptions[];
+    inline?: boolean;
+}
+
+withDefaults(defineProps<IProps>(), {
+    inline: false,
+})
+
+const model = defineModel();
+
+</script>
+
+<template>
+    <fieldset class="form-group" :id="id">
+        <legend :id="`legend-${id}`" class="font-size-100" tabindex="-1">{{ label }}</legend>
+        <template v-if="$slots.default">
+            <slot />
+        </template>
+        <template v-else>
+            <es-radio-input
+                v-for="option in options"
+                :disabled="option?.disabled || false"
+                :displayName="option?.text"
+                :groupName="name"
+                :inline="inline"
+                :value="option.value"
+                v-model="model"
+            />
+        </template>
+    </fieldset>
+</template>

es-ds-components/components/es-radio-input.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import RadioButton from 'primevue/radiobutton';
+
+interface IProps {
+    disabled?: boolean,
+    displayName: string,
+    groupName?: string,
+    inline?: boolean,
+    value: any,
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    disabled: false,
+    displayName: "",
+    groupName: "",
+    inline: false,
+    value: null,
+});
+</script>
+
+<template>
+    <div :class="`custom-control custom-radio custom-control${inline ? '-inline' : ''}`">
+        <radio-button
+            class="custom-control-input"
+            input-class="custom-radio-input"
+            v-bind="$attrs"
+            :disabled="disabled"
+            :input-id="`${props.value}-${props.groupName}`"
+            :name="props.groupName"
+            :value="props.value"
+        />
+        <slot>
+            <label
+                :for="`${props.value}-${props.groupName}`"
+                class="custom-control-label">
+                {{ props.displayName }}
+            </label>
+        </slot>
+    </div>
+</template>

es-ds-docs/components/ds-molecules-list.vue

@@ -76,8 +76,8 @@
             </ds-link>
          </li>
         <li>
-            <ds-link to="/molecules/radio-button">
-                Radio button
+            <ds-link to="/molecules/radio-input">
+                Radio input
             </ds-link>
         </li>
         <li>