feat(ui) : prop required + aria-required + astérisque sur Select/SelectCheckbox/Upload/RichText

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/components/malio/select/Select.test.ts

@@ -21,6 +21,7 @@ type SelectProps = {
   textLabel?: string
   rounded?: string
   disabled?: boolean
+  required?: boolean
 }
 
 const SelectForTest = Select as DefineComponent<SelectProps>
@@ -260,6 +261,22 @@ describe('MalioSelect', () => {
     expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ', required: true},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Champ'},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
     const wrapper = mount(SelectForTest, {
       props: {modelValue: null, options},

app/components/malio/select/Select.vue

@@ -38,6 +38,7 @@
       :aria-controls="listboxId"
       :aria-invalid="hasError"
       :aria-describedby="describedBy"
+      :aria-required="required || undefined"
       :disabled="disabled"
       @click="toggle"
     >
@@ -59,7 +60,7 @@
         ]"
         :style="labelTransformStyle"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <span
@@ -171,6 +172,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioSelect', inheritAttrs: false})
 
@@ -193,6 +195,7 @@ const props = withDefaults(defineProps<{
   disabled?: boolean
   groupClass?: string
   noOptionsText?: string
+  required?: boolean
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -207,6 +210,7 @@ const props = withDefaults(defineProps<{
   disabled: false,
   groupClass: '',
   noOptionsText: 'Aucune option disponible',
+  required: false,
 })
 
 const emit = defineEmits<{

app/components/malio/select/SelectCheckbox.test.ts

@@ -25,6 +25,7 @@ type SelectCheckboxProps = {
   selectAllLabel?: string
   disabled?: boolean
   groupClass?: string
+  required?: boolean
 }
 
 const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
@@ -235,6 +236,22 @@ describe('MalioSelectCheckbox', () => {
     expect(wrapper.get('[data-test="chevron"]').classes()).toContain('text-m-success')
   })
 
+  it('affiche l\'astérisque quand required est vrai', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], label: 'Champ', required: true},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
+  })
+
+  it('n\'affiche pas l\'astérisque par défaut', () => {
+    const wrapper = mount(SelectCheckboxForTest, {
+      props: {modelValue: [], label: 'Champ'},
+    })
+
+    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
+  })
+
   it('keeps the bottom border allocation when open downward (transparent, not zero)', async () => {
     const wrapper = mount(SelectCheckboxForTest, {
       props: {modelValue: [], options},

app/components/malio/select/SelectCheckbox.vue

@@ -38,6 +38,7 @@
       :aria-controls="listboxId"
       :aria-invalid="hasError"
       :aria-describedby="describedBy"
+      :aria-required="required || undefined"
       :disabled="disabled"
       @click="toggle"
     >
@@ -59,7 +60,7 @@
         ]"
         :style="labelTransformStyle"
       >
-        {{ label }}
+        {{ label }}<MalioRequiredMark v-if="required" />
       </label>
 
       <div
@@ -221,6 +222,7 @@ import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import Checkbox from '../checkbox/Checkbox.vue'
+import MalioRequiredMark from '../shared/RequiredMark.vue'
 
 defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
 
@@ -246,6 +248,7 @@ const props = withDefaults(defineProps<{
   disabled?: boolean
   groupClass?: string
   noOptionsText?: string
+  required?: boolean
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -263,6 +266,7 @@ const props = withDefaults(defineProps<{
   disabled: false,
   groupClass: '',
   noOptionsText: 'Aucune option disponible',
+  required: false,
 })
 
 const emit = defineEmits<{