@ukhomeoffice/cop-react-form-renderer 6.0.6-peter → 6.7.0-alpha

package/dist/components/CollectionSummary/Confirmation.test.js

@@ -1,64 +1,65 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _react = require("@testing-library/react");
 var _Confirmation = _interopRequireWildcard(require("./Confirmation"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Global imports.
 
 // Local imports.
 
 /* eslint-disable no-plusplus */
 
-describe('components.CollectionSummary.Confirmation', function () {
-  var onConfirmCalls = 0;
-  var ON_CONFIRM = function ON_CONFIRM() {
+describe('components.CollectionSummary.Confirmation', () => {
+  let onConfirmCalls = 0;
+  const ON_CONFIRM = () => {
     onConfirmCalls += 1;
   };
-  var onCancelCalls = 0;
-  var ON_CANCEL = function ON_CANCEL() {
+  let onCancelCalls = 0;
+  const ON_CANCEL = () => {
     onCancelCalls += 1;
   };
-  beforeEach(function () {
+  beforeEach(() => {
     onConfirmCalls = 0;
     onCancelCalls = 0;
   });
-  var ID = 'testId';
-  var MESSAGE = 'Confirmation message';
-  var LABEL = 'Confirmation label';
-  var checkSetup = function checkSetup(container) {
-    var withChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var childIndex = 0;
-    var confirmation = container.children[0];
+  const ID = 'testId';
+  const MESSAGE = 'Confirmation message';
+  const LABEL = 'Confirmation label';
+  const checkSetup = function (container) {
+    let withChildren = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let childIndex = 0;
+    const confirmation = container.children[0];
     expect(confirmation.classList).toContain(_Confirmation.DEFAULT_CLASS);
-    var heading = confirmation.children[childIndex++];
+    const heading = confirmation.children[childIndex++];
     expect(heading.tagName).toEqual('H2');
-    var children = withChildren ? confirmation.children[childIndex++] : null;
-    var confirmButton = confirmation.children[childIndex++];
+    const children = withChildren ? confirmation.children[childIndex++] : null;
+    const confirmButton = confirmation.children[childIndex++];
     expect(confirmButton.tagName).toEqual('BUTTON');
-    var cancelButton = confirmation.children[childIndex++];
+    const cancelButton = confirmation.children[childIndex++];
     expect(cancelButton.tagName).toEqual('BUTTON');
     return {
-      heading: heading,
-      confirmButton: confirmButton,
-      cancelButton: cancelButton,
-      children: children
+      heading,
+      confirmButton,
+      cancelButton,
+      children
     };
   };
-  it('should render correctly', function () {
-    var _render = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-        id: ID,
-        message: MESSAGE,
-        confirmLabel: LABEL,
-        onConfirm: ON_CONFIRM,
-        onCancel: ON_CANCEL
-      })),
-      container = _render.container;
-    var _checkSetup = checkSetup(container),
-      heading = _checkSetup.heading,
-      confirmButton = _checkSetup.confirmButton,
-      cancelButton = _checkSetup.cancelButton;
+  it('should render correctly', () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+      id: ID,
+      message: MESSAGE,
+      confirmLabel: LABEL,
+      onConfirm: ON_CONFIRM,
+      onCancel: ON_CANCEL
+    }));
+    const {
+      heading,
+      confirmButton,
+      cancelButton
+    } = checkSetup(container);
     expect(heading.textContent).toEqual(MESSAGE);
     expect(confirmButton.textContent).toEqual(LABEL);
     _react.fireEvent.click(confirmButton, {});
@@ -66,36 +67,40 @@ describe('components.CollectionSummary.Confirmation', function () {
     _react.fireEvent.click(cancelButton, {});
     expect(onCancelCalls).toEqual(1);
   });
-  it('should use the default message if one is not provided', function () {
-    var _render2 = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-        id: ID,
-        confirmLabel: LABEL,
-        onConfirm: ON_CONFIRM,
-        onCancel: ON_CANCEL
-      })),
-      container = _render2.container;
-    var _checkSetup2 = checkSetup(container),
-      heading = _checkSetup2.heading;
+  it('should use the default message if one is not provided', () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+      id: ID,
+      confirmLabel: LABEL,
+      onConfirm: ON_CONFIRM,
+      onCancel: ON_CANCEL
+    }));
+    const {
+      heading
+    } = checkSetup(container);
     expect(heading.textContent).toEqual(_Confirmation.DEFAULT_MESSAGE);
   });
-  it('should use the default label if one is not provided', function () {
-    var _render3 = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-        id: ID,
-        onConfirm: ON_CONFIRM,
-        onCancel: ON_CANCEL
-      })),
-      container = _render3.container;
-    var confirmButton = checkSetup(container).confirmButton;
+  it('should use the default label if one is not provided', () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+      id: ID,
+      onConfirm: ON_CONFIRM,
+      onCancel: ON_CANCEL
+    }));
+    const confirmButton = checkSetup(container).confirmButton;
     expect(confirmButton.textContent).toEqual(_Confirmation.DEFAULT_CONFIRM_LABEL);
   });
-  it('should render children correctly', function () {
-    var _render4 = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
-        id: ID,
-        onConfirm: ON_CONFIRM,
-        onCancel: ON_CANCEL
-      }, /*#__PURE__*/React.createElement("p", null, "A child"))),
-      container = _render4.container;
-    var child = checkSetup(container, true).children;
+  it('should render children correctly', () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/React.createElement(_Confirmation.default, {
+      id: ID,
+      onConfirm: ON_CONFIRM,
+      onCancel: ON_CANCEL
+    }, /*#__PURE__*/React.createElement("p", null, "A child")));
+    const child = checkSetup(container, true).children;
     expect(child.tagName).toEqual('P');
     expect(child.textContent).toEqual('A child');
   });

package/dist/components/CollectionSummary/RenderListView.js

@@ -9,34 +9,35 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = _interopRequireDefault(require("../../utils"));
 var _getComponentRowForCYA = _interopRequireDefault(require("../../utils/CheckYourAnswers/getComponentRowForCYA"));
+var _Condition = _interopRequireDefault(require("../../utils/Condition"));
 require("./RenderListView.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // Global imports.
+// Global imports.
+
 // Local imports.
+
 // Styles.
-var DEFAULT_CLASS = exports.DEFAULT_CLASS = 'govuk-summary-card';
-var DEFAULT_LIST_CLASS = exports.DEFAULT_LIST_CLASS = 'govuk-summary-list';
-var DEFAULT_TITLE = exports.DEFAULT_TITLE = 'Item';
-var DEFAULT_CHANGE_BUTTON_LABEL = exports.DEFAULT_CHANGE_BUTTON_LABEL = 'Change';
-var DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_LABEL = 'Delete';
-var DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
-var DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_DELETE_BUTTON_CLASS = 'warning';
-var RenderListView = function RenderListView(_ref) {
-  var _masterPage$childPage;
-  var id = _ref.id,
-    entryData = _ref.entryData,
-    config = _ref.config,
-    onChange = _ref.onChange,
-    onDelete = _ref.onDelete,
-    masterPage = _ref.masterPage,
-    classModifiers = _ref.classModifiers;
-  var classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
-  var listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
+
+const DEFAULT_CLASS = exports.DEFAULT_CLASS = 'govuk-summary-card';
+const DEFAULT_LIST_CLASS = exports.DEFAULT_LIST_CLASS = 'govuk-summary-list';
+const DEFAULT_TITLE = exports.DEFAULT_TITLE = 'Item';
+const DEFAULT_CHANGE_BUTTON_LABEL = exports.DEFAULT_CHANGE_BUTTON_LABEL = 'Change';
+const DEFAULT_DELETE_BUTTON_LABEL = exports.DEFAULT_DELETE_BUTTON_LABEL = 'Delete';
+const DEFAULT_CHANGE_BUTTON_CLASS = exports.DEFAULT_CHANGE_BUTTON_CLASS = 'secondary';
+const DEFAULT_DELETE_BUTTON_CLASS = exports.DEFAULT_DELETE_BUTTON_CLASS = 'warning';
+const RenderListView = _ref => {
+  var _config$changeAction, _config$deleteAction, _masterPage$childPage;
+  let {
+    id,
+    entryData,
+    config,
+    onFullEdit,
+    onDelete,
+    masterPage,
+    classModifiers
+  } = _ref;
+  const classes = _copReactComponents.Utils.classBuilder(DEFAULT_CLASS, classModifiers);
+  const listClass = _copReactComponents.Utils.classBuilder(DEFAULT_LIST_CLASS);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes(),
     id: id
@@ -44,50 +45,47 @@ var RenderListView = function RenderListView(_ref) {
     className: classes('title-wrapper', [], 'dark')
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: classes('title')
-  }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, _objectSpread(_objectSpread({}, entryData), {}, {
+  }, _copReactComponents.Utils.interpolateString(config.title || DEFAULT_TITLE, {
+    ...entryData,
     index: entryData.index + 1
-  }))), /*#__PURE__*/_react.default.createElement("ul", {
+  })), /*#__PURE__*/_react.default.createElement("ul", {
     className: classes('actions')
   }, /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
-  }, config.changeAction && typeof onChange === 'function' && /*#__PURE__*/_react.default.createElement("div", {
-    className: "govuk-link",
-    onClick: function onClick() {
-      return onChange(config.changeAction.page, entryData.id);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter' || e.key === ' ') {
-        onChange(config.changeAction.page, entryData.id);
-      }
-    },
-    role: "button",
-    tabIndex: 0,
-    style: {
-      cursor: 'pointer'
-    }
+  }, config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "govuk-link govuk-link-button",
+    onClick: () => onFullEdit(config.changeAction.page, entryData.id),
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.label) || DEFAULT_CHANGE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), {
+      ...entryData,
+      index: entryData.index + 1
+    })
   }, config.changeAction.label || DEFAULT_CHANGE_BUTTON_LABEL)), /*#__PURE__*/_react.default.createElement("li", {
     className: classes('action')
   }, config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".deleteButton"),
-    onClick: function onClick() {
-      return onDelete(entryData);
-    },
-    classModifiers: config.deleteAction.classModifiers || DEFAULT_DELETE_BUTTON_CLASS
+    onClick: () => onDelete(entryData),
+    classModifiers: config.deleteAction.classModifiers || DEFAULT_DELETE_BUTTON_CLASS,
+    "aria-label": _copReactComponents.Utils.interpolateString("".concat(((_config$deleteAction = config.deleteAction) === null || _config$deleteAction === void 0 ? void 0 : _config$deleteAction.label) || DEFAULT_DELETE_BUTTON_LABEL, " ").concat(config.title || DEFAULT_TITLE), {
+      ...entryData,
+      index: entryData.index + 1
+    })
   }, config.deleteAction.label || DEFAULT_DELETE_BUTTON_LABEL)))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes('content')
   }, /*#__PURE__*/_react.default.createElement("dl", {
     className: listClass()
-  }, masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.flatMap(function (childPage) {
+  }, masterPage === null || masterPage === void 0 || (_masterPage$childPage = masterPage.childPages) === null || _masterPage$childPage === void 0 ? void 0 : _masterPage$childPage.flatMap(childPage => {
     var _childPage$summaryLay;
-    var elevatedComponents = childPage.components.map(function (component) {
-      return _utils.default.Component.elevateNested([component], entryData);
-    }).flat().filter(Boolean);
-    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 || (_childPage$summaryLay = _childPage$summaryLay.sections) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.flatMap(function (section) {
-      if (section.fields) {
-        return section.fields.flatMap(function (fieldId) {
-          var component = elevatedComponents.find(function (comp) {
-            return comp.fieldId === fieldId;
-          });
+    const elevatedComponents = childPage.components.map(component => _utils.default.Component.elevateNested([component], entryData)).flat().filter(Boolean);
+    return (_childPage$summaryLay = childPage.summaryLayout) === null || _childPage$summaryLay === void 0 || (_childPage$summaryLay = _childPage$summaryLay.sections) === null || _childPage$summaryLay === void 0 ? void 0 : _childPage$summaryLay.flatMap(section => {
+      const filteredColumns = section.columns.filter(column => _Condition.default.meetsAll(column, {
+        ...childPage.formData,
+        ...entryData
+      }));
+      const summaryFields = filteredColumns.flatMap(column => column.fields || []);
+      if (summaryFields.length) {
+        return summaryFields.flatMap(fieldId => {
+          const component = elevatedComponents.find(comp => comp.fieldId === fieldId);
           if (!component) {
             return null;
           }
@@ -117,7 +115,7 @@ RenderListView.propTypes = {
     }),
     listView: _propTypes.default.bool
   }).isRequired,
-  onChange: _propTypes.default.func.isRequired,
+  onFullEdit: _propTypes.default.func.isRequired,
   onDelete: _propTypes.default.func.isRequired,
   masterPage: _propTypes.default.shape({
     childPages: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/components/CollectionSummary/RenderListView.scss

@@ -1,6 +1,6 @@
 $govuk-font-family: 'Roboto', arial, sans-serif;
 
-@import "node_modules/govuk-frontend/govuk/_base";
+@import "govuk-frontend/dist/govuk/_base";
 
 .govuk-summary-list {
   @include govuk-font($size: 19);
@@ -179,6 +179,10 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
 .govuk-summary-card {
   @include govuk-responsive-margin(6, "bottom");
   border: 1px solid $govuk-border-colour;
+
+  &--deleting-summary-card {
+    background-color: #FCF0EE;
+  }
 }
 
 .govuk-summary-card__title-wrapper {
@@ -271,3 +275,8 @@ $govuk-font-family: 'Roboto', arial, sans-serif;
     border-bottom: none;
   }
 }
+
+.govuk-link-button {
+  background: none;
+  border: none;
+}

package/dist/components/CollectionSummary/RenderListView.test.js

@@ -10,8 +10,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // Local imports.
 
-describe('components.CollectionSummary.RenderListView', function () {
-  var ENTRY = {
+describe('components.CollectionSummary.RenderListView', () => {
+  const ENTRY = {
     id: '001',
     item1: 'Value 1',
     item2: 'Value 2',
@@ -19,13 +19,21 @@ describe('components.CollectionSummary.RenderListView', function () {
       label: 'Value 3',
       value: 'Value 3'
     },
+    condition: 'test',
     index: 0
   };
-  var MASTER_PAGE = {
+  const MASTER_PAGE = {
     childPages: [{
       summaryLayout: {
         sections: [{
-          fields: ['item1', 'item2', 'item3']
+          columns: [{
+            fields: ['item1', 'item2', 'item3'],
+            show_when: {
+              field: "condition",
+              op: "in",
+              values: ["test"]
+            }
+          }]
         }]
       },
       components: [{
@@ -59,7 +67,7 @@ describe('components.CollectionSummary.RenderListView', function () {
       }]
     }]
   };
-  var CONFIG = {
+  const CONFIG = {
     title: 'Title text 1',
     listView: true,
     changeAction: {
@@ -70,132 +78,134 @@ describe('components.CollectionSummary.RenderListView', function () {
       label: 'Delete label'
     }
   };
-  var ID = 'testListView';
-  var onChangeArgs = [];
-  var onChangeCalls = 0;
-  var ON_CHANGE = function ON_CHANGE(page, id) {
+  const ID = 'testListView';
+  let onChangeArgs = [];
+  let onChangeCalls = 0;
+  const ON_CHANGE = (page, id) => {
     onChangeArgs.push({
-      page: page,
-      id: id
+      page,
+      id
     });
     onChangeCalls += 1;
   };
-  beforeEach(function () {
+  beforeEach(() => {
     onChangeArgs = [];
   });
-  var onDeleteArgs = [];
-  var onDeleteCalls = 0;
-  var ON_DELETE = function ON_DELETE(entry) {
+  let onDeleteArgs = [];
+  let onDeleteCalls = 0;
+  const ON_DELETE = entry => {
     onDeleteArgs.push(entry);
     onDeleteCalls += 1;
   };
-  beforeEach(function () {
+  beforeEach(() => {
     onDeleteArgs = [];
   });
-  var getComponentRow = function getComponentRow() {
-    return /*#__PURE__*/_react2.default.createElement("div", {
-      className: "govuk-summary-list__row"
-    }, /*#__PURE__*/_react2.default.createElement("dt", {
-      className: "govuk-summary-list__key"
-    }, "Test Key"), /*#__PURE__*/_react2.default.createElement("dd", {
-      className: "govuk-summary-list__value"
-    }, /*#__PURE__*/_react2.default.createElement("div", null, "Test Value")));
-  };
+  const getComponentRow = () => /*#__PURE__*/_react2.default.createElement("div", {
+    className: "govuk-summary-list__row"
+  }, /*#__PURE__*/_react2.default.createElement("dt", {
+    className: "govuk-summary-list__key"
+  }, "Test Key"), /*#__PURE__*/_react2.default.createElement("dd", {
+    className: "govuk-summary-list__value"
+  }, /*#__PURE__*/_react2.default.createElement("div", null, "Test Value")));
 
   // Setup function to check rendered elements
-  var checkSetup = function checkSetup(container) {
-    var listViewDiv = container.children[0];
+  const checkSetup = container => {
+    const listViewDiv = container.children[0];
     expect(listViewDiv.tagName).toEqual('DIV');
     expect(listViewDiv.classList).toContain('govuk-summary-card');
     return listViewDiv;
   };
-  it('should correctly render RenderListView component', function () {
-    var _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
-        id: ID,
-        entryData: ENTRY,
-        config: CONFIG,
-        onChange: ON_CHANGE,
-        onDelete: ON_DELETE,
-        masterPage: MASTER_PAGE,
-        getComponentRow: getComponentRow
-      })),
-      container = _renderWithValidation.container;
-    var listViewDiv = checkSetup(container);
+  it('should correctly render RenderListView component', () => {
+    const {
+      container
+    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+      id: ID,
+      entryData: ENTRY,
+      config: CONFIG,
+      onFullEdit: ON_CHANGE,
+      onDelete: ON_DELETE,
+      masterPage: MASTER_PAGE,
+      getComponentRow: getComponentRow
+    }));
+    const listViewDiv = checkSetup(container);
 
     // Check title wrapper and title text
-    var titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
+    const titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
     expect(titleWrapper).not.toBeNull();
-    var title = titleWrapper.querySelector('.govuk-summary-card__title');
+    const title = titleWrapper.querySelector('.govuk-summary-card__title');
     expect(title.textContent).toEqual(CONFIG.title);
 
     // Logic to check the rendered rows
-    var rows = container.querySelectorAll('.govuk-summary-list__row');
+    const rows = container.querySelectorAll('.govuk-summary-list__row');
     expect(rows.length).toEqual(3);
 
     // Check the first row
-    var firstRowKey = rows[0].querySelector('.govuk-summary-list__key');
-    var firstRowValue = rows[0].querySelector('.govuk-summary-list__value');
+    const firstRowKey = rows[0].querySelector('.govuk-summary-list__key');
+    const firstRowValue = rows[0].querySelector('.govuk-summary-list__value');
     expect(firstRowKey.textContent).toEqual('Item 1');
     expect(firstRowValue.textContent).toEqual('Value 1');
 
     // Check the second row
-    var secondRowKey = rows[1].querySelector('.govuk-summary-list__key');
-    var secondRowValue = rows[1].querySelector('.govuk-summary-list__value');
+    const secondRowKey = rows[1].querySelector('.govuk-summary-list__key');
+    const secondRowValue = rows[1].querySelector('.govuk-summary-list__value');
     expect(secondRowKey.textContent).toEqual('Item 2 (optional)');
     expect(secondRowValue.textContent).toEqual('Value 2');
 
     // Check the third row
-    var thirdRowKey = rows[2].querySelector('.govuk-summary-list__key');
-    var thirdRowValue = rows[2].querySelector('.govuk-summary-list__value');
+    const thirdRowKey = rows[2].querySelector('.govuk-summary-list__key');
+    const thirdRowValue = rows[2].querySelector('.govuk-summary-list__value');
     expect(thirdRowKey.textContent).toEqual('Item 3');
     expect(thirdRowValue.textContent).toEqual('Value 3');
   });
-  it('should render the index correctly in the title', function () {
-    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
-        id: ID,
-        entryData: ENTRY,
-        config: CONFIG,
-        onChange: ON_CHANGE,
-        onDelete: ON_DELETE,
-        masterPage: MASTER_PAGE,
-        getComponentRow: getComponentRow
-      })),
-      container = _renderWithValidation2.container;
-    var listViewDiv = checkSetup(container);
+  it('should render the index correctly in the title', () => {
+    const {
+      container
+    } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+      id: ID,
+      entryData: ENTRY,
+      config: CONFIG,
+      onFullEdit: ON_CHANGE,
+      onDelete: ON_DELETE,
+      masterPage: MASTER_PAGE,
+      getComponentRow: getComponentRow
+    }));
+    const listViewDiv = checkSetup(container);
 
     // Check title wrapper and title text
-    var titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
+    const titleWrapper = listViewDiv.querySelector('.govuk-summary-card__title-wrapper');
     expect(titleWrapper).not.toBeNull();
-    var title = titleWrapper.querySelector('.govuk-summary-card__title');
+    const title = titleWrapper.querySelector('.govuk-summary-card__title');
     expect(title.textContent).toEqual(CONFIG.title);
 
     // Check if the index is rendered as expected in the title
     expect(title.textContent).toContain("Title text ".concat(ENTRY.index + 1));
   });
-  describe('Action buttons in RenderListView', function () {
-    beforeEach(function () {
+  describe('Action buttons in RenderListView', () => {
+    beforeEach(() => {
       onChangeArgs = [];
       onChangeCalls = 0;
       onDeleteArgs = [];
       onDeleteCalls = 0;
     });
-    it('should render and handle action buttons correctly', function () {
-      var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
-          id: ID,
-          entryData: ENTRY,
-          config: CONFIG,
-          onChange: ON_CHANGE,
-          onDelete: ON_DELETE,
-          masterPage: MASTER_PAGE,
-          getComponentRow: getComponentRow
-        })),
-        container = _renderWithValidation3.container;
-      var listViewDiv = container.querySelector('.govuk-summary-card');
+    it('should render and handle action buttons correctly', () => {
+      const {
+        container
+      } = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_RenderListView.default, {
+        id: ID,
+        entryData: ENTRY,
+        config: CONFIG,
+        onFullEdit: ON_CHANGE,
+        onDelete: ON_DELETE,
+        masterPage: MASTER_PAGE,
+        getComponentRow: getComponentRow
+      }));
+      const listViewDiv = container.querySelector('.govuk-summary-card');
       expect(listViewDiv).not.toBeNull();
 
       // Check for change button
-      var changeLink = listViewDiv.querySelector('.govuk-link');
+      const changeLink = listViewDiv.querySelector('.govuk-link');
       expect(changeLink.textContent).toEqual(CONFIG.changeAction.label);
+      expect(changeLink.getAttribute('aria-label')).toEqual("".concat(CONFIG.changeAction.label, " ").concat(CONFIG.title));
       _react.fireEvent.click(changeLink, {});
       expect(onChangeCalls).toEqual(1);
       expect(onChangeArgs[0]).toMatchObject({
@@ -204,8 +214,9 @@ describe('components.CollectionSummary.RenderListView', function () {
       });
 
       // Check for delete button
-      var deleteButton = listViewDiv.querySelector('[id$=".deleteButton"]');
+      const deleteButton = listViewDiv.querySelector('[id$=".deleteButton"]');
       expect(deleteButton.textContent).toEqual(CONFIG.deleteAction.label);
+      expect(deleteButton.getAttribute('aria-label')).toEqual("".concat(CONFIG.deleteAction.label, " ").concat(CONFIG.title));
       _react.fireEvent.click(deleteButton, {});
       expect(onDeleteCalls).toEqual(1);
       expect(onDeleteArgs[0]).toEqual(ENTRY);