feat: simple invalid handler

GPP-Woo · Oct 23, 2024 · 0735be1 · 0735be1
1 parent d63fc89
commit 0735be1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/odpc.client/src/components/checkbox-group/CheckboxGroup.vue b/odpc.client/src/components/checkbox-group/CheckboxGroup.vue
@@ -3,8 +3,7 @@
     role="group"
     ref="groupRef"
     :aria-labelledby="`label-${instanceId}`"
-    :data-required="required ? true : undefined"
-    :data-required-message="required ? 'Kies minimaal één optie.' : undefined"
+    :aria-required="required ? true : undefined"
   >
     <summary :id="`label-${instanceId}`">{{ title }} {{ required ? "*" : "" }}</summary>
 

diff --git a/odpc.client/src/components/checkbox-group/use-checkbox-group.ts b/odpc.client/src/components/checkbox-group/use-checkbox-group.ts
@@ -12,11 +12,7 @@ export const useCheckboxGroup = () => {
       : clearCustomValidityCheckboxGroup(checkboxes);
 
   const setCustomValidityCheckboxGroup = (checkboxes: NodeListOf<HTMLInputElement>) =>
-    checkboxes.forEach((checkbox) =>
-      checkbox.setCustomValidity(
-        groupRef.value?.getAttribute("data-required-message") || "Kies minimaal één optie."
-      )
-    );
+    checkboxes.forEach((checkbox) => checkbox.setCustomValidity("Kies minimaal één optie."));
 
   const clearCustomValidityCheckboxGroup = (checkboxes: NodeListOf<HTMLInputElement>) =>
     checkboxes.forEach((checkbox) => checkbox.setCustomValidity(""));
@@ -28,7 +24,7 @@ export const useCheckboxGroup = () => {
   const addCheckboxListeners = () => {
     removeCheckboxListeners();
 
-    if (!groupRef.value || !groupRef.value.hasAttribute("data-required")) return;
+    if (!groupRef.value || !groupRef.value.hasAttribute("aria-required")) return;
 
     const checkboxes = groupRef.value.querySelectorAll(
       "[type='checkbox']"

diff --git a/odpc.client/src/features/publicatie/components/DocumentForm.vue b/odpc.client/src/features/publicatie/components/DocumentForm.vue
@@ -53,6 +53,7 @@
           aria-required="true"
           :aria-describedby="`titelError-${index}`"
           :aria-invalid="!doc.officieleTitel"
+          @invalid="invalidHandler"
         />
 
         <span :id="`titelError-${index}`" class="error">Titel is een verplicht veld</span>
@@ -113,6 +114,11 @@ const model = computed<PublicatieDocument[]>({
   set: (value) => emit("update:documenten", value)
 });
 
+const invalidHandler = (event: Event) => {
+  const details = (event.target as HTMLInputElement).closest("details");
+  details && (details.open = true);
+};
+
 const dialog = useConfirmDialog();
 
 const filesSelected = (event: Event | DragEvent) => {