Add form labels and passthru values for accessibility #147

archesproject · Jan 17, 2025 · cadee7d · cadee7d
1 parent e446b17
commit cadee7d
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 25 deletions.
diff --git a/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/DateDatatype.vue
@@ -10,6 +10,7 @@ interface Props {
     dateFormat?: string;
     mode?: DataComponentMode;
     value?: string;
+    ptAriaLabeledBy?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -37,6 +38,7 @@ const onUpdate = (val: string) => {
             <DateDatatypeEditor
                 :date-format="dateFormat"
                 :value="value"
+                :pt-aria-labeled-by="ptAriaLabeledBy"
                 @update="onUpdate"
             />
         </div>

diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -49,6 +49,7 @@ const route = useRoute();
 const router = useRouter();
 const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
 const { $gettext } = useGettext();
+const formId = (route.params.id as string) ?? Math.random().toString();
 
 const props = withDefaults(
     defineProps<{
@@ -213,23 +214,23 @@ onMounted(async () => {
 </script>
 
 <template>
-    <!-- Label: string -->
-    <label for="">{{ $gettext("Label") }}</label>
+    <label :for="formId + '-label'">{{ $gettext("Label") }}</label>
     <NonLocalizedString
         :value="formValue?.appellative_status_ascribed_name_content"
         :mode="EDIT"
+        :pt-id="formId + '-label'"
         @update="
             (val) =>
                 onUpdateString('appellative_status_ascribed_name_content', val)
         "
     />
-    <!-- Label Language: reference datatype -->
-    <label for="">{{ $gettext("Label Language") }}</label>
+    <p :id="formId + '-label-language'">{{ $gettext("Label Language") }}</p>
     <ReferenceDatatype
         :value="formValue?.appellative_status_ascribed_name_language"
         :mode="EDIT"
         :multi-value="false"
         :options="languageOptions"
+        :pt-aria-labeled-by="formId + '-label-language'"
         @update="
             (val) =>
                 onUpdateReferenceDatatype(
@@ -238,13 +239,13 @@ onMounted(async () => {
                 )
         "
     />
-    <!-- Label Type: reference datatype -->
-    <label for="">{{ $gettext("Label Type") }}</label>
+    <p :id="formId + '-label-type'">{{ $gettext("Label Type") }}</p>
     <ReferenceDatatype
         :value="formValue?.appellative_status_ascribed_relation"
         :mode="EDIT"
         :multi-value="false"
         :options="typeOptions"
+        :pt-aria-labeled-by="formId + '-label-type'"
         @update="
             (val) =>
                 onUpdateReferenceDatatype(
@@ -253,24 +254,24 @@ onMounted(async () => {
                 )
         "
     />
-    <!-- Label Status: reference datatype -->
-    <label for="">{{ $gettext("Label Status") }}</label>
+    <p :id="formId + '-label-status'">{{ $gettext("Label Status") }}</p>
     <ReferenceDatatype
         :value="formValue?.appellative_status_status"
         :mode="EDIT"
         :multi-value="false"
         :options="statusOptions"
+        :pt-aria-labeled-by="formId + '-label-status'"
         @update="
             (val) => onUpdateReferenceDatatype('appellative_status_status', val)
         "
     />
-    <!-- Label Status Metatype: reference datatype -->
-    <label for="">{{ $gettext("Label Metatype") }}</label>
+    <p :id="formId + '-label-metatype'">{{ $gettext("Label Metatype") }}</p>
     <ReferenceDatatype
         :value="formValue?.appellative_status_status_metatype"
         :mode="EDIT"
         :multi-value="false"
         :options="metatypeOptions"
+        :pt-aria-labeled-by="formId + '-label-metatype'"
         @update="
             (val) =>
                 onUpdateReferenceDatatype(
@@ -279,12 +280,13 @@ onMounted(async () => {
                 )
         "
     />
-
-    <!-- Label Temporal Validity Start: date -->
-    <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
+    <p :id="formId + '-label-start'">
+        {{ $gettext("Label Temporal Validity Start") }}
+    </p>
     <DateDatatype
         :value="formValue?.appellative_status_timespan_begin_of_the_begin"
         :mode="EDIT"
+        :pt-aria-labeled-by="formId + '-label-start'"
         @update="
             (val) =>
                 onUpdateString(
@@ -293,12 +295,13 @@ onMounted(async () => {
                 )
         "
     />
-
-    <!-- Label Temporal Validity End: date -->
-    <label for="">{{ $gettext("Label Temporal Validity End") }}</label>
+    <p :id="formId + '-label-end'">
+        {{ $gettext("Label Temporal Validity End") }}
+    </p>
     <DateDatatype
         :value="formValue?.appellative_status_timespan_end_of_the_end"
         :mode="EDIT"
+        :pt-aria-labeled-by="formId + '-label-end'"
         @update="
             (val) =>
                 onUpdateString(
@@ -307,13 +310,12 @@ onMounted(async () => {
                 )
         "
     />
-
-    <!-- Contributor: resource instance -->
-    <label for="">{{ $gettext("Contributor") }}</label>
+    <p :id="formId + '-label-contributor'">{{ $gettext("Contributor") }}</p>
     <ResourceInstanceRelationships
         :value="formValue?.appellative_status_data_assignment_actor"
         :mode="EDIT"
         :options="groupAndPersonOptions"
+        :pt-aria-labeled-by="formId + '-label-contributor'"
         @update="
             (val) =>
                 onUpdateResourceInstance(
@@ -323,12 +325,12 @@ onMounted(async () => {
                 )
         "
     />
-    <!-- Sources: resource instance -->
-    <label for="">{{ $gettext("Sources") }}</label>
+    <p :id="formId + '-label-sources'">{{ $gettext("Sources") }}</p>
     <ResourceInstanceRelationships
         :value="formValue?.appellative_status_data_assignment_object_used"
         :mode="EDIT"
         :options="textualWorkOptions"
+        :pt-aria-labeled-by="formId + '-label-sources'"
         @update="
             (val) =>
                 onUpdateResourceInstance(
@@ -338,13 +340,13 @@ onMounted(async () => {
                 )
         "
     />
-    <!-- Warrant Type: reference datatype -->
-    <label for="">{{ $gettext("Warrant Type") }}</label>
+    <p :id="formId + '-label-warrant'">{{ $gettext("Warrant Type") }}</p>
     <ReferenceDatatype
         :value="formValue?.appellative_status_data_assignment_type"
         :mode="EDIT"
         :multi-value="false"
         :options="eventTypeOptions"
+        :pt-aria-labeled-by="formId + '-label-warrant'"
         @update="
             (val) =>
                 onUpdateReferenceDatatype(
@@ -358,3 +360,8 @@ onMounted(async () => {
         @click="save"
     ></Button>
 </template>
+<style scoped>
+p {
+    margin: 0;
+}
+</style>
diff --git a/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue b/arches_lingo/src/arches_lingo/components/generic/NonLocalizedString.vue
@@ -4,10 +4,12 @@ import NonLocalizedStringEditor from "@/arches_lingo/components/generic/non-loca
 import type { DataComponentMode } from "@/arches_lingo/types.ts";
 import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
 
-const { mode = VIEW } = defineProps<{
+const props = defineProps<{
     mode?: DataComponentMode;
     value?: string;
+    ptId?: string;
 }>();
+console.log(props);
 const emits = defineEmits(["update"]);
 const onUpdate = (val: string) => {
     emits("update", val);
@@ -21,6 +23,7 @@ const onUpdate = (val: string) => {
         <div v-if="mode === EDIT">
             <NonLocalizedStringEditor
                 :value="value ?? ''"
+                :pt-id="props.ptId"
                 @update="onUpdate"
             />
         </div>

diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
@@ -13,6 +13,7 @@ defineProps<{
     value?: ControlledListItem[];
     multiValue?: boolean;
     options?: ControlledListItem[];
+    pt?: object;
 }>();
 const emit = defineEmits(["update"]);
 const onUpdate = (val: ControlledListItem[]) => {
@@ -29,6 +30,7 @@ const onUpdate = (val: ControlledListItem[]) => {
                 :value="value"
                 :options="options"
                 :multi-value="multiValue"
+                :pt="pt"
                 @update="onUpdate"
             />
         </div>

diff --git a/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue b/arches_lingo/src/arches_lingo/components/generic/ResourceInstanceRelationships.vue
@@ -11,6 +11,7 @@ const { mode = VIEW } = defineProps<{
     mode?: DataComponentMode;
     value?: ResourceInstanceReference[];
     options?: ResourceInstanceReference[];
+    ptAriaLabeledBy?: string;
 }>();
 
 const emits = defineEmits(["update"]);
@@ -29,6 +30,7 @@ function onUpdate(val: string[]) {
             :val="
                 value?.map((referenceValue) => referenceValue.resourceId) ?? []
             "
+            :pt-aria-labeled-by="ptAriaLabeledBy"
             @update="onUpdate"
         />
     </div>

diff --git a/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/date-datatype/DateDatatypeEditor.vue
@@ -6,6 +6,7 @@ import DatePicker from "primevue/datepicker";
 const props = defineProps<{
     value: string | undefined;
     dateFormat: string;
+    ptAriaLabeledBy?: string;
 }>();
 
 const emit = defineEmits(["update"]);
@@ -35,6 +36,7 @@ function parseDate(date: unknown): string | null {
         icon-display="input"
         :date-format="dateFormat"
         show-icon
+        :aria-labelledby="props.ptAriaLabeledBy"
         @update:model-value="() => emit('update', parseDate(modelValue))"
     />
 </template>
diff --git a/...ngo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue b/...ngo/src/arches_lingo/components/generic/non-localized-string/NonLocalizedStringEditor.vue
@@ -2,7 +2,10 @@
 import { ref, watch } from "vue";
 import InputText from "primevue/inputtext";
 
-const props = defineProps<{ value: string }>();
+const props = defineProps<{
+    value: string;
+    ptId?: string;
+}>();
 
 const updateableValue = ref<string>(props.value as string);
 
@@ -19,6 +22,7 @@ watch(updateableValue, (newValue) => {
 <template>
     <div>
         <InputText
+            :id="props.ptId"
             v-model="updateableValue"
             type="text"
         />

diff --git a/..._lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue b/..._lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
@@ -16,6 +16,7 @@ const props = withDefaults(
         value?: ControlledListItem[];
         options?: ControlledListItem[];
         multiValue?: boolean;
+        ptAriaLabeledBy?: string;
     }>(),
     {
         value: () => [],
@@ -80,6 +81,7 @@ function getOptionLabels(item: ControlledListItem): string {
             option: { style: { fontFamily: 'sans-serif' } },
         }"
         :placeholder="$gettext('Select References')"
+        :aria-labelledby="props.ptAriaLabeledBy"
     />
     <MultiSelect
         v-if="props.multiValue"
@@ -93,5 +95,6 @@ function getOptionLabels(item: ControlledListItem): string {
             option: { style: { fontFamily: 'sans-serif' } },
         }"
         :placeholder="$gettext('Select References')"
+        :aria-labelledby="props.ptAriaLabeledBy"
     />
 </template>
diff --git a/...omponents/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue b/...omponents/generic/resource-instance-relationships/ResourceInstanceRelationshipsEditor.vue
@@ -10,6 +10,7 @@ const props = withDefaults(
     defineProps<{
         val?: string[];
         options?: ResourceInstanceReference[];
+        ptAriaLabeledBy?: string;
     }>(),
     {
         options: () => [],
@@ -41,5 +42,6 @@ const value = computed({
             option: { style: { fontFamily: 'sans-serif' } },
         }"
         :placeholder="$gettext('Select Resources')"
+        :aria-labelledby="props.ptAriaLabeledBy"
     />
 </template>