Implemented more aria-labels, updated tests and translations accordingly

folio-org · May 28, 2024 · be6ad76 · be6ad76
1 parent 07bd699
commit be6ad76
Show file tree

Hide file tree

Showing 9 changed files with 247 additions and 194 deletions.
diff --git a/src/components/Criteria/AggregateCriteriaCard.tsx b/src/components/Criteria/AggregateCriteriaCard.tsx
@@ -7,13 +7,13 @@ import css from '../Card.module.css';
 import OperatorSelect from './OperatorSelect';
 
 export default function AggregateCriteriaCard() {
+  const intl = useIntl();
+
   const selectedType = useField<CriteriaAggregateType>('aggregateFilter.type', {
     subscription: { value: true },
     format: (value) => value ?? CriteriaAggregateType.PASS,
   }).input.value;
 
-  const intl = useIntl();
-
   const criteriaOptions = useMemo(
     () => [
       {

diff --git a/src/components/Criteria/CriteriaFeeFineType.tsx b/src/components/Criteria/CriteriaFeeFineType.tsx
@@ -100,7 +100,7 @@ export default function CriteriaFeeFineType({ prefix }: Readonly<{ prefix: strin
               {...fieldProps}
               fullWidth
               marginBottom0
-              aria-label={typeName === undefined ? 'Fee/fine type' : typeName}
+              aria-label={typeName === undefined ? intl.formatMessage({ id: 'ui-plugin-bursar-export.bursarExports.criteria.select.FeeType' }) : typeName}
               dataOptions={typeSelectOptionsForDisplay}
             />
           )}

diff --git a/src/components/Token/Data/AccountDateToken.tsx b/src/components/Token/Data/AccountDateToken.tsx
@@ -1,44 +1,54 @@
-import { Col, Select, TextField } from '@folio/stripes/components';
+import { Col, Select, TextField, Label } from '@folio/stripes/components';
 import React from 'react';
-import { Field } from 'react-final-form';
+import { Field, useField } from 'react-final-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import DatePartPicker from '../Shared/DatePartPicker';
 import TimezonePicker from '../Shared/TimezonePicker';
 import css from '../TokenStyles.module.css';
 
 export default function AccountDateToken({ prefix }: Readonly<{ prefix: string }>) {
   const intl = useIntl();
+
+  const selectedDateType = useField<'CREATED' | 'UPDATED' | 'DUE' | 'RETURNED'>(`${prefix}dateProperty`, {
+    subscription: { value: true }
+  }).input.value;
+
   return (
     <>
       <Col xs={12} md={6}>
+        <Label required >
+          {intl.formatMessage({ id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType' })}
+        </Label>
         <Field<'CREATED' | 'UPDATED' | 'DUE' | 'RETURNED'> name={`${prefix}dateProperty`} defaultValue="CREATED">
           {(fieldProps) => (
             <Select<'CREATED' | 'UPDATED' | 'DUE' | 'RETURNED'>
               {...fieldProps}
               required
-              label={<FormattedMessage id="ui-plugin-bursar-export.bursarExports.token.accountDate.dateType" />}
+              aria-label={selectedDateType ? 
+                intl.formatMessage({ id: `ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.${selectedDateType}` }) :
+                intl.formatMessage({ id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType' })}
               dataOptions={[
                 {
                   label: intl.formatMessage({
-                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.created',
+                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.CREATED',
                   }),
                   value: 'CREATED',
                 },
                 {
                   label: intl.formatMessage({
-                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.updated',
+                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.UPDATED',
                   }),
                   value: 'UPDATED',
                 },
                 {
                   label: intl.formatMessage({
-                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.dueItem',
+                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.DUE',
                   }),
                   value: 'DUE',
                 },
                 {
                   label: intl.formatMessage({
-                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.dueLoan',
+                    id: 'ui-plugin-bursar-export.bursarExports.token.accountDate.dateType.RETURNED',
                   }),
                   value: 'RETURNED',
                 },

diff --git a/src/components/Token/Data/DataTypeSelect.tsx b/src/components/Token/Data/DataTypeSelect.tsx
@@ -10,37 +10,41 @@ export default function DataTypeSelect({ name }: Readonly<{ name: string }>) {
     format: (value) => value ?? false,
   }).input.value;
 
+  const selectedDataType = useField<DataTokenType>(name, {
+    subscription: { value: true }
+  }).input.value;
+
   const intl = useIntl();
 
   const alwaysAvailableOptions = useMemo(() => {
     const topOptions = [
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.newline',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Newline',
         }),
         value: DataTokenType.NEWLINE,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.newlineMicrosoft',
+          id: 'ui-plugin-bursar-export.bursarExports.token.NewlineMicrosoft',
         }),
         value: DataTokenType.NEWLINE_MICROSOFT,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.tab',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Tab',
         }),
         value: DataTokenType.TAB,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.comma',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Comma',
         }),
         value: DataTokenType.COMMA,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.whitespace',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Space',
         }),
         value: DataTokenType.SPACE,
       },
@@ -49,19 +53,19 @@ export default function DataTypeSelect({ name }: Readonly<{ name: string }>) {
     const bottomOptions = [
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.arbitraryText',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Constant',
         }),
         value: DataTokenType.ARBITRARY_TEXT,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.currentDate',
+          id: 'ui-plugin-bursar-export.bursarExports.token.CurrentDate',
         }),
         value: DataTokenType.CURRENT_DATE,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.constantConditional',
+          id: 'ui-plugin-bursar-export.bursarExports.token.ConstantConditional',
         }),
         value: DataTokenType.CONSTANT_CONDITIONAL,
       },
@@ -87,31 +91,31 @@ export default function DataTypeSelect({ name }: Readonly<{ name: string }>) {
     () => [
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.userData',
+          id: 'ui-plugin-bursar-export.bursarExports.token.UserData',
         }),
         value: DataTokenType.USER_DATA,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.accountAmount',
+          id: 'ui-plugin-bursar-export.bursarExports.token.AccountAmount',
         }),
         value: DataTokenType.ACCOUNT_AMOUNT,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.accountDate',
+          id: 'ui-plugin-bursar-export.bursarExports.token.AccountDate',
         }),
         value: DataTokenType.ACCOUNT_DATE,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType',
+          id: 'ui-plugin-bursar-export.bursarExports.token.FeeFineMetaData',
         }),
         value: DataTokenType.FEE_FINE_TYPE,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.itemInfo',
+          id: 'ui-plugin-bursar-export.bursarExports.token.ItemData',
         }),
         value: DataTokenType.ITEM_INFO,
       },
@@ -129,13 +133,13 @@ export default function DataTypeSelect({ name }: Readonly<{ name: string }>) {
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.totalAmount',
+          id: 'ui-plugin-bursar-export.bursarExports.token.AggregateTotal',
         }),
         value: DataTokenType.AGGREGATE_TOTAL,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.numAccounts',
+          id: 'ui-plugin-bursar-export.bursarExports.token.AggregateCount',
         }),
         value: DataTokenType.AGGREGATE_COUNT,
       },
@@ -148,7 +152,7 @@ export default function DataTypeSelect({ name }: Readonly<{ name: string }>) {
       name={name}
       defaultValue={DataTokenType.NEWLINE}
       aria-label={intl.formatMessage({
-        id: 'ui-plugin-bursar-export.bursarExports.token.dataType.typeSelect',
+        id: `ui-plugin-bursar-export.bursarExports.token.${selectedDataType}`,
       })}
     >
       {(fieldProps) => (

diff --git a/src/components/Token/Data/FeeFineTypeToken.tsx b/src/components/Token/Data/FeeFineTypeToken.tsx
@@ -1,12 +1,22 @@
-import { Col, Select } from '@folio/stripes/components';
+import { Col, Select, Label } from '@folio/stripes/components';
 import React from 'react';
-import { Field } from 'react-final-form';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { Field, useField } from 'react-final-form';
+import { useIntl } from 'react-intl';
 
 export default function FeeFineTypeToken({ prefix }: Readonly<{ prefix: string }>) {
   const intl = useIntl();
+
+  const selectedType = useField<'FEE_FINE_TYPE_ID' | 'FEE_FINE_TYPE_NAME'>(`${prefix}feeFineAttribute`, {
+    subscription: { value: true }
+  }).input.value;
+
+  console.log(selectedType);
+
   return (
     <Col xs={12}>
+      <Label>
+        {intl.formatMessage({ id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType.attribute'})}
+      </Label>
       <Field<'FEE_FINE_TYPE_ID' | 'FEE_FINE_TYPE_NAME'>
         name={`${prefix}feeFineAttribute`}
         defaultValue="FEE_FINE_TYPE_NAME"
@@ -16,17 +26,19 @@ export default function FeeFineTypeToken({ prefix }: Readonly<{ prefix: string }
             {...fieldProps}
             required
             marginBottom0
-            label={<FormattedMessage id="ui-plugin-bursar-export.bursarExports.token.feeFineType.attribute" />}
+            aria-label={selectedType ? 
+              intl.formatMessage({ id: `ui-plugin-bursar-export.bursarExports.token.feeFineType.${selectedType}` }) :
+              intl.formatMessage({ id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType.attribute' })}
             dataOptions={[
               {
                 label: intl.formatMessage({
-                  id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType.name',
+                  id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType.FEE_FINE_TYPE_NAME',
                 }),
                 value: 'FEE_FINE_TYPE_NAME',
               },
               {
                 label: intl.formatMessage({
-                  id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType.id',
+                  id: 'ui-plugin-bursar-export.bursarExports.token.feeFineType.FEE_FINE_TYPE_ID',
                 }),
                 value: 'FEE_FINE_TYPE_ID',
               },

diff --git a/src/components/Token/HeaderFooter/HeaderFooterTypeSelect.tsx b/src/components/Token/HeaderFooter/HeaderFooterTypeSelect.tsx
@@ -1,40 +1,45 @@
 import React, { useMemo } from 'react';
 import { Select } from '@folio/stripes/components';
-import { Field } from 'react-final-form';
+import { Field, useField } from 'react-final-form';
 import { useIntl } from 'react-intl';
 import { HeaderFooterTokenType } from '../../../types';
 
 export default function HeaderFooterTypeSelect({ name }: Readonly<{ name: string }>) {
   const intl = useIntl();
+
+  const selectedType = useField<HeaderFooterTokenType>(name, {
+    subscription: { value: true },
+  }).input.value;
+
   const options = useMemo(() => {
     const topSection = [
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.newline',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Newline',
         }),
         value: HeaderFooterTokenType.NEWLINE,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.newlineMicrosoft',
+          id: 'ui-plugin-bursar-export.bursarExports.token.NewlineMicrosoft',
         }),
         value: HeaderFooterTokenType.NEWLINE_MICROSOFT,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.tab',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Tab',
         }),
         value: HeaderFooterTokenType.TAB,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.comma',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Comma',
         }),
         value: HeaderFooterTokenType.COMMA,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.whitespace',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Space',
         }),
         value: HeaderFooterTokenType.SPACE,
       },
@@ -43,25 +48,25 @@ export default function HeaderFooterTypeSelect({ name }: Readonly<{ name: string
     const bottomSection = [
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.arbitraryText',
+          id: 'ui-plugin-bursar-export.bursarExports.token.Constant',
         }),
         value: HeaderFooterTokenType.ARBITRARY_TEXT,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.currentDate',
+          id: 'ui-plugin-bursar-export.bursarExports.token.CurrentDate',
         }),
         value: HeaderFooterTokenType.CURRENT_DATE,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.numAccounts',
+          id: 'ui-plugin-bursar-export.bursarExports.token.AggregateCount',
         }),
         value: HeaderFooterTokenType.AGGREGATE_COUNT,
       },
       {
         label: intl.formatMessage({
-          id: 'ui-plugin-bursar-export.bursarExports.token.totalAmount',
+          id: 'ui-plugin-bursar-export.bursarExports.token.AggregateTotal',
         }),
         value: HeaderFooterTokenType.AGGREGATE_TOTAL,
       },
@@ -86,7 +91,7 @@ export default function HeaderFooterTypeSelect({ name }: Readonly<{ name: string
       name={name}
       defaultValue={HeaderFooterTokenType.NEWLINE}
       aria-label={intl.formatMessage({
-        id: 'ui-plugin-bursar-export.bursarExports.token.headerFooter.typeSelect',
+        id:  `ui-plugin-bursar-export.bursarExports.token.${selectedType}`,
       })}
     >
       {(fieldProps) => <Select<HeaderFooterTokenType> {...fieldProps} required marginBottom0 dataOptions={options} />}