a11y: Add sr-only info for NC checkbox label

Tells user that focus is going to be moved automatically on the following textarea
DISIC · Aug 1, 2024 · d40b766 · d40b766
1 parent 7d77fdb
commit d40b766
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -40,6 +40,7 @@ const props = defineProps<{
 
 const statuses: Array<{
   label: string;
+  extraLabel?: string;
   value: CriteriumResultStatus;
   color?: RadioColor;
 }> = [
@@ -50,6 +51,7 @@ const statuses: Array<{
   },
   {
     label: formatStatus(CriteriumResultStatus.NOT_COMPLIANT),
+    extraLabel: "le focus se déplacera sur le champ de saisie ci-après",
     value: CriteriumResultStatus.NOT_COMPLIANT,
     color: "red"
   },

diff --git a/confiture-web-app/src/components/ui/RadioGroup.vue b/confiture-web-app/src/components/ui/RadioGroup.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   items: {
     value: any;
     label: string;
+    extraLabel?: string;
     color?: RadioColor;
   }[];
   disabled?: boolean;
@@ -53,7 +54,7 @@ function handleChange(value: string) {
         :class="item.color"
         :for="`checkbox-group-${uniqueId}--${i}`"
       >
-        {{ item.label }}
+        {{ item.label }}<span class="fr-sr-only">, {{ item.extraLabel }}</span>
       </label>
     </div>
   </fieldset>