@ukhomeoffice/cop-react-form-renderer 6.15.11-alpha → 6.15.12-accessibility

package/dist/components/FormComponent/FormComponent.js

@@ -76,6 +76,12 @@ const FormComponent = _ref => {
 
       // eslint-disable-next-line no-param-reassign
       target = (0, _helpers.addLabel)(target, component, data);
+      if (component.type === _models.ComponentTypes.SELECT && target.value === '') {
+        // eslint-disable-next-line no-param-reassign
+        target.value = null;
+        // eslint-disable-next-line no-param-reassign
+        target.label = null;
+      }
       onChange({
         target
       });

package/dist/components/FormComponent/helpers/addLabel.js

@@ -10,13 +10,14 @@ exports.default = void 0;
  * @returns The updated target.
  */
 const addLabel = (paramTarget, component, data) => {
+  var _target$value;
   const target = paramTarget;
   // target.value can be an object in which case use value in object attribute
-  const value = typeof target.value === 'object' ? target.value.value : target.value;
+  const value = typeof target.value === 'object' ? (_target$value = target.value) === null || _target$value === void 0 ? void 0 : _target$value.value : target.value;
   // find the reference data item using the value
   const item = data.find(e => String(e.id) === value);
   // if item is null it means that the target.value can be used as a label otherwise use item.label
-  target.label = item === undefined ? target.value : item.label;
+  target.label = item === undefined ? target.value || '' : item.label;
   target.component = component.cya_label;
   return target;
 };

package/dist/components/FormPage/FormPage.js

@@ -19,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Global imports
 // Local imports.
@@ -67,20 +69,31 @@ const FormPage = _ref => {
       target
     } = _ref2;
     const formPage = page;
-    if (target.value == null) {
+    const {
+      value
+    } = target;
+    if (!value) {
       delete formPage.formData[target.name];
       setPatch(prev => {
-        const data = prev;
-        return delete data[target.name];
+        const _target$name = target.name,
+          {
+            [_target$name]: removedValue
+          } = prev,
+          newState = _objectWithoutProperties(prev, [_target$name].map(_toPropertyKey));
+        return newState;
       });
       setPatchLabel(prev => {
-        const data = prev;
-        return delete data[target.component];
+        const _target$component = target.component,
+          {
+            [_target$component]: removedValue
+          } = prev,
+          newState = _objectWithoutProperties(prev, [_target$component].map(_toPropertyKey));
+        return newState;
       });
     } else {
-      formPage.formData[target.name] = target.value;
+      formPage.formData[target.name] = value;
       setPatch(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        [target.name]: target.value
+        [target.name]: value
       }));
       setPatchLabel(prev => _objectSpread(_objectSpread({}, prev), {}, {
         [target.component]: target.label

package/dist/components/FormPage/FormPage.test.js

@@ -337,5 +337,58 @@ describe('components.FormPage', () => {
       }));
       expect(ON_ACTION_CALLS.length).toEqual(0);
     });
+    it('removed field from the form data when the value is set to null', () => {
+      const AUTOCOMPLETE = {
+        id: 'autocomplete',
+        fieldId: 'autocomplete',
+        label: 'autocomplete',
+        hint: '',
+        type: 'autocomplete',
+        required: true,
+        source: [{
+          id: 'a',
+          name: 'apple'
+        }, {
+          id: 'b',
+          name: 'banana'
+        }, {
+          id: 'c',
+          name: 'cherry'
+        }, {
+          id: 'd',
+          name: 'DURIAN'
+        }],
+        disabled: false
+      };
+      const page = {
+        id: 'page1',
+        title: 'Page title',
+        label: 'Page label',
+        components: [AUTOCOMPLETE],
+        formData: {
+          autocomplete: 'autocomplete value example'
+        },
+        actions: []
+      };
+      const onChangeMock = jest.fn();
+      const {
+        getByLabelText
+      } = (0, _setupTests.renderWithValidation)(/*#__PURE__*/_react2.default.createElement(_FormPage.default, {
+        page: page,
+        fromTarget: true,
+        onAction: onChangeMock,
+        onChange: onChangeMock
+      }));
+      const input = getByLabelText('autocomplete');
+      _react.fireEvent.change(input, {
+        target: {
+          name: 'autocomplete',
+          value: '',
+          component: 'autocomplete'
+        }
+      });
+      const updatedState = onChangeMock.mock.calls.pop()[0];
+      expect(updatedState.autocomplete).toBeUndefined();
+    });
   });
 });

package/dist/components/FormRenderer/FormRenderer.js

@@ -39,6 +39,7 @@ const FormRenderer = _ref => {
   let {
     title,
     type,
+    cleanseHiddenData,
     components,
     pages,
     hub,
@@ -61,6 +62,7 @@ const FormRenderer = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_context.ValidationContextProvider, null, /*#__PURE__*/_react.default.createElement(InternalFormRenderer, {
     title: title,
     type: type,
+    cleanseHiddenData: cleanseHiddenData,
     components: components,
     pages: pages,
     hub: hub,
@@ -84,6 +86,7 @@ const InternalFormRenderer = _ref2 => {
   let {
     title,
     type,
+    cleanseHiddenData,
     components,
     pages: _pages,
     hub: _hub,
@@ -126,6 +129,18 @@ const InternalFormRenderer = _ref2 => {
     validate
   } = (0, _hooks.useValidation)();
 
+  // Set focus to header for accessibility, Screen reader to anounce the page heading
+  const setFocusToHeading = () => {
+    if (document) {
+      const header = Array.from(document.getElementsByTagName('h1')).pop();
+      if (header && document.activeElement !== header) {
+        header.setAttribute('tabIndex', '-1');
+        header.focus();
+        header.removeAttribute('tabIndex');
+      }
+    }
+  };
+
   // Need to set submission data when going back
   window.onpopstate = e => {
     var _formState$page;
@@ -189,6 +204,11 @@ const InternalFormRenderer = _ref2 => {
     setFormState(_helpers.default.getFormState(pageId, pages, hub));
   }, [pages, hub, pageId, setFormState, type, goingBack, data, formState.page]);
 
+  // Set focus to heading for accessibility
+  (0, _react.useEffect)(() => {
+    setFocusToHeading();
+  }, [formState]);
+
   // Call the onFormLoad hook just when this component first renders.
   (0, _react.useEffect)(() => {
     setPagePoint(undefined);
@@ -295,7 +315,7 @@ const InternalFormRenderer = _ref2 => {
     actions: (_formState$page$actio = formState.page.actions) === null || _formState$page$actio === void 0 ? void 0 : _formState$page$actio.filter(action => _utils.default.Component.show(action, data))
   }, formState.cya, {
     onAction: action => {
-      (0, _onCYAAction.default)(setPagePoint, action, pages, validate, components, data, setData, type, pageId, currentTask, hooks, addErrors, hub, onPageChange, formState, submitting, setSubmitting);
+      (0, _onCYAAction.default)(setPagePoint, action, pages, validate, cleanseHiddenData, components, data, setData, type, pageId, currentTask, hooks, addErrors, hub, onPageChange, formState, submitting, setSubmitting);
     },
     onRowAction: onCYARowAction,
     summaryListClassModifiers: summaryListClassModifiers,
@@ -316,7 +336,7 @@ const InternalFormRenderer = _ref2 => {
     page: formState.page,
     pages: [].concat(pages),
     onAction: (action, patch, patchLabel) => {
-      (0, _onPageAction.default)(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors, submitting, setSubmitting, errors);
+      (0, _onPageAction.default)(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, cleanseHiddenData, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors, submitting, setSubmitting, errors);
     },
     onChange: onChange,
     hashLink: hashLink,
@@ -329,7 +349,7 @@ const InternalFormRenderer = _ref2 => {
     pages: pages,
     onCollectionChange: onChange,
     onAction: (action, patch, patchLabel) => {
-      (0, _onPageAction.default)(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors, submitting, setSubmitting, errors);
+      (0, _onPageAction.default)(action, patch, patchLabel, hooks, data, formState, validate, onPageChange, type, cleanseHiddenData, pages, components, pageId, setPagePoint, currentTask, setData, hubDetails, setSubmitted, addErrors, submitting, setSubmitting, errors);
     },
     hashLink: hashLink,
     classModifiers: formState.page.classModifiers,
@@ -363,6 +383,7 @@ const propTypes = {
   pages: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
   summaryListClassModifiers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
   title: _propTypes.default.string,
+  cleanseHiddenData: _propTypes.default.bool,
   /** See <a href="/?path=/docs/f-json--page#formtypes">FormTypes</a>. */
   type: _propTypes.default.oneOf([_models.FormTypes.CYA, _models.FormTypes.FORM, _models.FormTypes.HUB, _models.FormTypes.TASK, _models.FormTypes.WIZARD, _models.FormTypes.TASK_CYA, _models.FormTypes.FORM_WITH_TASK]).isRequired,
   viewOnly: _propTypes.default.bool,
@@ -388,6 +409,7 @@ const defaultProps = {
   noChangeAction: false,
   summaryListClassModifiers: [],
   title: '',
+  cleanseHiddenData: false,
   viewOnly: true,
   hideBlankRows: false
 };

package/dist/components/FormRenderer/clear-uncompleted-routes/test-data/forms/cop-reassign-task-to-rcc.json

@@ -0,0 +1,446 @@
+{
+    "cleanseHiddenData": true,
+    "cya": {
+        "actions": [
+            {
+                "type": "submit",
+                "label": "Submit",
+                "validate": true
+            }
+        ],
+        "confirm": [
+            {
+                "title": "Task kept with NCC",
+                "message": [
+                    "<h2 class='govuk-heading-m'>What happens next</h2>",
+                    "<p class='govuk-body'>Review the task by ${reviewTimeP} on ${reviewDateP}.</p>",
+                    "<p class='govuk-body'>To view the task, go to <a href='/tms/open-tasks'>open NCC tasks</a>. You can track updates in the task's timeline.</p>",
+                    "<p class='govuk-body'><a href='/'>Go to homepage</a></p>",
+                    "<p class='govuk-body'><a href='https://lssiprod.service-now.com/ess?id=take_survey&type_id=e0e2125b1bdd1110f8655946464bcbf7'>What do you think of this service?</a></p>"
+                ],
+                "show_when": [
+                    {
+                        "op": "=",
+                        "field": "assignWhere",
+                        "value": "NCC"
+                    }
+                ]
+            },
+            {
+                "title": "Task assigned to RCC",
+                "message": [
+                    "<h2 class='govuk-heading-m'>What happens next</h2>",
+                    "<p>This task will automatically close at 23:59 on ${autoClose} - the day after the event date.</p>",
+                    "<p>To view the task, go to <a href='/tms/open-tasks'>open NCC tasks</a>. You can track updates in the task's timeline.</p>",
+                    "<p>You can only work on the task when it is assigned to NCC.</p>",
+                    "<p><a href='/'>Go to homepage</a></p>",
+                    "<p><a href='https://lssiprod.service-now.com/ess?id=take_survey&type_id=e0e2125b1bdd1110f8655946464bcbf7'>What do you think of this service?</a></p>"
+                ],
+                "show_when": [
+                    {
+                        "type": "and",
+                        "conditions": [
+                            {
+                                "op": "=",
+                                "field": "assignWhere",
+                                "value": "RCC"
+                            },
+                            {
+                                "op": "=",
+                                "field": "responseNeeded",
+                                "value": "No"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Task assigned to RCC",
+                "message": [
+                    "<h2 class='govuk-heading-m'>What happens next</h2>",
+                    "<p class='govuk-body'>You set a review date of ${reviewTimeP} on ${reviewDateP}.</p>",
+                    "<p class='govuk-body'>To view the task, go to <a href='/tms/open-tasks'>open NCC tasks</a>. You can track updates in the task's timeline.</p>",
+                    "<p class='govuk-body'>You can only work on the task when it is assigned to NCC.</p>",
+                    "<p class='govuk-body'><a href='/'>Go to homepage</a></p>",
+                    "<p class='govuk-body'><a href='https://lssiprod.service-now.com/ess?id=take_survey&type_id=e0e2125b1bdd1110f8655946464bcbf7'>What do you think of this service?</a></p>"
+                ],
+                "show_when": [
+                    {
+                        "type": "and",
+                        "conditions": [
+                            {
+                                "op": "=",
+                                "field": "assignWhere",
+                                "value": "RCC"
+                            },
+                            {
+                                "op": "=",
+                                "field": "responseNeeded",
+                                "value": "Yes"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "title": "Task assigned to RCC",
+                "message": [
+                    "<h2 class='govuk-heading-m'>What happens next</h2>",
+                    "<p class='govuk-body'>RCC will review this task.</p>",
+                    "<p class='govuk-body'><a href='/'>Go to homepage</a></p>",
+                    "<p class='govuk-body'><a href='https://lssiprod.service-now.com/ess?id=take_survey&type_id=e0e2125b1bdd1110f8655946464bcbf7'>What do you think of this service?</a></p>"
+                ],
+                "show_when": [
+                    {
+                        "type": "and",
+                        "conditions": [
+                            {
+                                "op": "!includes",
+                                "field": "keycloakContext.groups",
+                                "value": "/BFNCC"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        "insertDateTime": true
+    },
+    "name": "cop-reassign-task-to-rcc",
+    "type": "cya",
+    "pages": [
+        {
+            "id": "assignTask",
+            "name": "assignTask",
+            "title": "Assign Task",
+            "actions": [
+                {
+                    "page": "assignTaskToRCC",
+                    "type": "next",
+                    "label": "Continue",
+                    "validate": true,
+                    "show_when": {
+                        "type": "or",
+                        "conditions": [
+                            {
+                                "op": "=",
+                                "field": "assignWhere",
+                                "value": "RCC"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "page": "reviewDateAndTime",
+                    "type": "saveAndNavigate",
+                    "label": "Continue",
+                    "validate": true,
+                    "show_when": {
+                        "type": "or",
+                        "conditions": [
+                            {
+                                "op": "!=",
+                                "field": "assignWhere",
+                                "value": "RCC"
+                            }
+                        ]
+                    }
+                }
+            ],
+            "cya_link": {},
+            "show_when": [
+                {
+                    "op": "includes",
+                    "field": "keycloakContext.groups",
+                    "value": "/BFNCC"
+                }
+            ],
+            "components": [
+                {
+                    "use": "assignWhere"
+                }
+            ]
+        },
+        {
+            "id": "assignTaskToRCC",
+            "name": "assignTaskToRCC",
+            "title": "Assign task to RCC",
+            "actions": [
+                {
+                    "type": "next",
+                    "label": "Continue",
+                    "validate": true
+                }
+            ],
+            "cya_link": {},
+            "show_when": {
+                "conditions": [
+                    {
+                        "op": "=",
+                        "field": "assignWhere",
+                        "value": "RCC"
+                    }
+                ]
+            },
+            "components": [
+                {
+                    "use": "regionalCommandCentre",
+                    "show_when": {
+                        "type": "and",
+                        "conditions": [
+                            {
+                                "op": "!=",
+                                "field": "definitionKey",
+                                "value": "cop-variance-breach-v2"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "use": "regionalCommandCentreDisplay",
+                    "show_when": {
+                        "type": "or",
+                        "conditions": [
+                            {
+                                "op": "=",
+                                "field": "definitionKey",
+                                "value": "cop-variance-breach-v2"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "use": "responseNeeded",
+                    "show_when": {
+                        "type": "or",
+                        "conditions": [
+                            {
+                                "op": "includes",
+                                "field": "keycloakContext.groups",
+                                "value": "/BFNCC"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "use": "assignMessage"
+                }
+            ],
+            "operations": [
+                {
+                    "field": "reviewDateTime",
+                    "function": "deleteValueInFormData",
+                    "run_when": {
+                        "field": "responseNeeded",
+                        "condition": "changes"
+                    },
+                    "component": " "
+                }
+            ]
+        },
+        {
+            "id": "reviewDateAndTime",
+            "name": "reviewDateAndTime",
+            "title": "Set a review date and time",
+            "actions": [
+                {
+                    "type": "next",
+                    "label": "Continue",
+                    "validate": true
+                }
+            ],
+            "cya_link": {},
+            "show_when": [
+                {
+                    "type": "or",
+                    "conditions": [
+                        {
+                            "op": "=",
+                            "field": "responseNeeded",
+                            "value": "Yes"
+                        },
+                        {
+                            "op": "=",
+                            "field": "assignWhere",
+                            "value": "NCC"
+                        }
+                    ]
+                }
+            ],
+            "components": [
+                {
+                    "use": "reviewDateTime"
+                },
+                {
+                    "use": "responseNeeded",
+                    "label": "",
+                    "value": "Yes",
+                    "hidden": true,
+                    "required": true,
+                    "show_on_cya": false,
+                    "defaultValue": "Yes"
+                }
+            ]
+        }
+    ],
+    "title": "Assign task to RCC",
+    "components": [
+        {
+            "id": "assignMessage",
+            "type": "textarea",
+            "label": "Message",
+            "fieldId": "assignMessage",
+            "cya_link": {},
+            "required": true,
+            "custom_errors": [
+                {
+                    "type": "required",
+                    "message": "Enter a message"
+                }
+            ]
+        },
+        {
+            "id": "assignWhere",
+            "data": {
+                "options": [
+                    {
+                        "hint": "Set a review date and time.",
+                        "label": "Keep task with NCC",
+                        "value": "NCC"
+                    },
+                    {
+                        "hint": "Either set a review date and time or set the task to automatically close.",
+                        "label": "Assign task to RCC",
+                        "value": "RCC"
+                    }
+                ]
+            },
+            "type": "radios",
+            "label": " ",
+            "fieldId": "assignWhere",
+            "preserveInPayload": true,
+            "required": true,
+            "cya_label": "Assign task",
+            "custom_errors": [
+                {
+                    "type": "required",
+                    "message": "Select where you want to assign this task"
+                }
+            ],
+            "showAllValues": "true"
+        },
+        {
+            "id": "regionalCommandCentre",
+            "data": {
+                "url": "${environmentContext.referenceDataUrl}/v2/entities/branch?mode=dataOnly&filter=directorateid.eq=2&filter=code=in.(BFSEEU,BFHROW,BFSOUTH,BFNORTH,BFCENT)"
+            },
+            "hint": "Type to search",
+            "item": {
+                "label": "name",
+                "value": "id"
+            },
+            "type": "autocomplete",
+            "label": "Regional Command Centre",
+            "fieldId": "regionalCommandCentre",
+            "required": true,
+            "cya_label": "RCC",
+            "custom_errors": [
+                {
+                    "type": "required",
+                    "message": "Select a Regional Command Centre"
+                }
+            ],
+            "showAllValues": true
+        },
+        {
+            "id": "regionalCommandCentreDisplay",
+            "data": {
+                "url": "${environmentContext.referenceDataUrl}/v2/entities/branch?mode=dataOnly&filter=directorateid.eq=2&filter=code=in.(BFSEEU,BFHROW,BFSOUTH,BFNORTH,BFCENT)"
+            },
+            "item": {
+                "label": "name",
+                "value": "id"
+            },
+            "type": "autocomplete",
+            "label": "Regional Command Centre",
+            "fieldId": "regionalCommandCentre",
+            "disabled": true,
+            "required": true,
+            "cya_label": "RCC",
+            "showAllValues": true
+        },
+        {
+            "id": "reviewDateTime",
+            "type": "container",
+            "label": " ",
+            "fieldId": "reviewDateTime",
+            "required": true,
+            "components": [
+                {
+                    "type": "html",
+                    "content": "The review date and time will display on the open NCC tasks screen."
+                },
+                {
+                    "id": "reviewDate",
+                    "hint": "For example, 20 2 2023.",
+                    "type": "date",
+                    "label": "Review date",
+                    "fieldId": "reviewDate",
+                    "cya_link": {},
+                    "required": true,
+                    "custom_errors": [
+                        {
+                            "type": "required",
+                            "message": "Enter a review date"
+                        }
+                    ],
+                    "additionalValidation": [
+                        {
+                            "message": "Review date must be today or in the future",
+                            "function": "mustBeInTheFuture",
+                            "todayAllowed": true
+                        }
+                    ]
+                },
+                {
+                    "id": "reviewTime",
+                    "hint": "Use 24-hour. For example, 19:45.",
+                    "type": "time",
+                    "label": "Review time",
+                    "fieldId": "reviewTime",
+                    "cya_link": {},
+                    "required": true,
+                    "custom_errors": [
+                        {
+                            "type": "required",
+                            "message": "Enter a review time"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "responseNeeded",
+            "data": {
+                "options": [
+                    {
+                        "hint": "Set a review date for the task.",
+                        "label": "Yes",
+                        "value": "Yes"
+                    },
+                    {
+                        "hint": "The task will automatically close at 23:59 on ${autoClose} - the day after the event date.",
+                        "label": "No",
+                        "value": "No"
+                    }
+                ]
+            },
+            "type": "radios",
+            "label": "Do you need a response?",
+            "fieldId": "responseNeeded",
+            "required": true,
+            "showAllValues": "true"
+        }
+    ],
+    "version": "7b941ec0bb281e2b93ba32058b81e1a88f0f0a9a"
+}