Merge pull request #888 from dnum-mi/develop

Develop

Author: laruiss

src/components/DsfrCheckbox/DsfrCheckbox.types.ts

@@ -24,4 +24,5 @@ export type DsfrCheckboxSetProps = {
   legend?: string
   options?: (DsfrCheckboxProps & InputHTMLAttributes)[]
   modelValue?: string[]
+  ariaInvalid?: boolean
 }

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -32,6 +32,7 @@ const onChange = ({ name, checked }: { name: string, checked: boolean }) => {
     : props.modelValue.filter(val => val !== name)
   emit('update:modelValue', selected)
 }
+const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages-${props.titleId}` : props.titleId)
 </script>
 
 <template>
@@ -43,7 +44,8 @@ const onChange = ({ name, checked }: { name: string, checked: boolean }) => {
         'fr-fieldset--valid': !errorMessage && validMessage,
       }"
       :disabled="disabled"
-      :aria-labelledby="`${titleId} messages-${titleId}`"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="ariaInvalid"
       :role="(errorMessage || validMessage) ? 'group' : undefined"
     >
       <legend

src/components/DsfrRadioButton/DsfrRadioButton.types.ts

@@ -27,4 +27,5 @@ export type DsfrRadioButtonSetProps = {
   legend?: string
   modelValue?: string | number | boolean | undefined
   options?: Omit<DsfrRadioButtonProps, 'modelValue'>[]
+  ariaInvalid?: boolean | 'grammar' | 'spelling'
 }

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -41,6 +41,7 @@ const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages
       }"
       :disabled="disabled"
       :aria-labelledby="ariaLabelledby"
+      :aria-invalid="ariaInvalid"
       :role="(errorMessage || validMessage) ? 'group' : undefined"
     >
       <legend

src/components/DsfrSelect/DsfrSelect.vue

@@ -67,6 +67,7 @@ const messageType = computed(() => {
       :disabled="disabled"
       :aria-disabled="disabled"
       :required="required"
+      v-bind="$attrs"
       @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
     >
       <option