@ons/design-system 68.0.0 → 70.0.0

package/components/section-navigation/_macro.spec.js

@@ -145,10 +145,10 @@ describe('macro: section-navigation', () => {
     it('renders top level navigation items', () => {
       const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-      const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+      const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
       expect(itemLabels).toEqual(['Results', 'Dashboard']);
 
-      const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.attr('href'));
+      const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.attr('href'));
       expect(itemLinks).toEqual(['/results', '/results/dashboard']);
     });
 
@@ -173,11 +173,7 @@ describe('macro: section-navigation', () => {
     it('marks the current item with a class when `currentPath` is provided', () => {
       const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-      expect(
-        $('.ons-section-nav__item--active')
-          .text()
-          .trim(),
-      ).toBe('Results');
+      expect($('.ons-section-nav__item--active').text().trim()).toBe('Results');
     });
 
     it('marks the current item with a class when `tabQuery` is provided', () => {
@@ -189,11 +185,7 @@ describe('macro: section-navigation', () => {
         }),
       );
 
-      expect(
-        $('.ons-section-nav__item--active')
-          .text()
-          .trim(),
-      ).toBe('Dashboard');
+      expect($('.ons-section-nav__item--active').text().trim()).toBe('Dashboard');
     });
 
     it('marks the current item with `aria-current` when `currentPath` is provided', () => {
@@ -226,12 +218,14 @@ describe('macro: section-navigation', () => {
       it('renders the expected anchor navigation items', () => {
         const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
 
-        const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node =>
+        const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
           node.text().trim(),
         );
         expect(itemLabels).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
 
-        const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node => node.attr('href'));
+        const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+          node.attr('href'),
+        );
         expect(itemLinks).toEqual(['#sub-section-1', '#sub-section-2', '#sub-section-3']);
       });
     });
@@ -247,17 +241,15 @@ describe('macro: section-navigation', () => {
       it('renders itemsLists, anchors and heading for each section', () => {
         const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
 
-        const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+        const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+          node.text().trim(),
+        );
         expect(anchors).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
 
-        const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+        const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
         expect(itemLists).toEqual(['Section 1', 'Section 2', 'Sub section 1', 'Sub section 2', 'Sub section 3', 'Section 3']);
 
-        const headings = mapAll($('h3'), node =>
-          $(node)
-            .text()
-            .trim(),
-        );
+        const headings = mapAll($('h3'), (node) => $(node).text().trim());
         expect(headings).toEqual(['Section Title']);
       });
     });

package/components/select/_macro.spec.js

@@ -155,35 +155,35 @@ describe('macro: select', () => {
       it('has expected text', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.text().trim());
+        const values = mapAll($('select > option'), (node) => node.text().trim());
         expect(values).toEqual(['First option', 'Second option', 'Disabled option']);
       });
 
       it('has a provided `id` attribute', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('id'));
+        const values = mapAll($('select > option'), (node) => node.attr('id'));
         expect(values).toEqual([undefined, 'second-option', undefined]);
       });
 
       it('marks the correct option as selected', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('selected'));
+        const values = mapAll($('select > option'), (node) => node.attr('selected'));
         expect(values).toEqual([undefined, 'selected', undefined]);
       });
 
       it('marks the correct option as disabled', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('disabled'));
+        const values = mapAll($('select > option'), (node) => node.attr('disabled'));
         expect(values).toEqual([undefined, undefined, 'disabled']);
       });
 
       it('has a provided `value` attribute', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('value'));
+        const values = mapAll($('select > option'), (node) => node.attr('value'));
         expect(values).toEqual(['1', '2', '3']);
       });
 
@@ -195,7 +195,7 @@ describe('macro: select', () => {
           }),
         );
 
-        const values = mapAll($('select > option'), node => node.attr('value'));
+        const values = mapAll($('select > option'), (node) => node.attr('value'));
         expect(values).toEqual(['First option', 'Second option']);
       });
     });

package/components/share-page/_macro.spec.js

@@ -24,11 +24,7 @@ describe('macro: share-page', () => {
   it('wraps title in <h2> element by default', () => {
     const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
 
-    expect(
-      $('h2')
-        .text()
-        .trim(),
-    ).toBe('Share page');
+    expect($('h2').text().trim()).toBe('Share page');
   });
 
   it('wraps title in custom element when `titleTag` is provided', () => {
@@ -39,11 +35,7 @@ describe('macro: share-page', () => {
       }),
     );
 
-    expect(
-      $('h4')
-        .text()
-        .trim(),
-    ).toBe('Share page');
+    expect($('h4').text().trim()).toBe('Share page');
   });
 
   it('uses the provided icon size', () => {
@@ -65,7 +57,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Twitter');
+      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
       expect(twitterItem.url).toBe(
         'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
       );
@@ -77,7 +69,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Twitter');
+      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
       expect(twitterItem.rel).toContain('noreferrer');
       expect(twitterItem.rel).toContain('external');
       expect(twitterItem.target).toBe('_blank');
@@ -91,7 +83,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Facebook');
+      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
       expect(facebookItem.url).toBe('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fan-example-page');
     });
 
@@ -101,7 +93,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Facebook');
+      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
       expect(facebookItem.rel).toContain('noreferrer');
       expect(facebookItem.rel).toContain('external');
       expect(facebookItem.target).toBe('_blank');

package/components/skip-to-content/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: skip-to-content', () => {
   it('passes jest-axe checks', async () => {
@@ -48,11 +48,7 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect(
-      $('.ons-skip-to-content')
-        .text()
-        .trim(),
-    ).toBe('Skip to the content');
+    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to the content');
   });
 
   it('has skip link with the default text if no text provided`', async () => {
@@ -62,10 +58,6 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect(
-      $('.ons-skip-to-content')
-        .text()
-        .trim(),
-    ).toBe('Skip to content');
+    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to content');
   });
 });

package/components/skip-to-content/skip-to-content.dom.js

@@ -4,7 +4,7 @@ import skipToMain from './skip-to-content';
 async function initaliseSkipToLink() {
   const links = [...document.querySelectorAll('.ons-skip-to-content')];
   if (links.length) {
-    links.forEach(link => {
+    links.forEach((link) => {
       skipToMain(link);
     });
   }

package/components/skip-to-content/skip-to-content.js

@@ -1,6 +1,6 @@
 export default function skipToMain(link) {
   const id = link.getAttribute('href').replace('#', '');
-  link.addEventListener('click', event => {
+  link.addEventListener('click', (event) => {
     event.preventDefault();
     document.getElementById(id).tabIndex = -1;
     document.getElementById(id).style.outline = 'none';

package/components/skip-to-content/skip-to-content.spec.js

@@ -18,7 +18,7 @@ describe('script: skip-to-content', () => {
     await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
-    const targetTabIndex = await page.$eval('#target-element', el => el.tabIndex);
+    const targetTabIndex = await page.$eval('#target-element', (el) => el.tabIndex);
     expect(targetTabIndex).toBe(-1);
   });
 
@@ -28,7 +28,7 @@ describe('script: skip-to-content', () => {
     await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
-    const targetOutline = await page.$eval('#target-element', el => el.style.outline);
+    const targetOutline = await page.$eval('#target-element', (el) => el.style.outline);
     expect(targetOutline).toBe('none');
   });
 

package/components/status/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsStatus(params) %}
-    {% if params.type %}
-        {% set typeClass = ' ons-status--' + params.type %}
+    {% if params.variant %}
+        {% set typeClass = ' ons-status--' + params.variant %}
     {% else %}
         {% set typeClass = ' ons-status--info' %}
     {% endif %}

package/components/status/_macro.spec.js

@@ -9,7 +9,7 @@ describe('macro: status', () => {
   it('passes jest-axe checks', async () => {
     const $ = cheerio.load(
       renderComponent('status', {
-        type: 'success',
+        variant: 'success',
         label: 'Example status message',
         size: 'small',
       }),
@@ -19,7 +19,7 @@ describe('macro: status', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('has the default type "info" when `type` is not provided', () => {
+  it('has the default variant "info" when `variant` is not provided', () => {
     const $ = cheerio.load(
       renderComponent('status', {
         label: 'Example status message',
@@ -29,10 +29,10 @@ describe('macro: status', () => {
     expect($('.ons-status').hasClass('ons-status--info')).toBe(true);
   });
 
-  it('has the provided `type`', () => {
+  it('has the provided `variant`', () => {
     const $ = cheerio.load(
       renderComponent('status', {
-        type: 'success',
+        variant: 'success',
         label: 'Example status message',
       }),
     );
@@ -68,10 +68,6 @@ describe('macro: status', () => {
       }),
     );
 
-    expect(
-      $('.ons-status')
-        .text()
-        .trim(),
-    ).toBe('Example status message');
+    expect($('.ons-status').text().trim()).toBe('Example status message');
   });
 });

package/components/status/example-status-dead.njk

@@ -2,6 +2,6 @@
 {{
     onsStatus({
         "label": 'Not started',
-        "type": 'dead'
+        "variant": 'dead'
     })
 }}

package/components/status/example-status-error.njk

@@ -2,6 +2,6 @@
 {{
     onsStatus({
         "label": 'Refused',
-        "type": 'error'
+        "variant": 'error'
     })
 }}

package/components/status/example-status-pending.njk

@@ -2,6 +2,6 @@
 {{
     onsStatus({
         "label": 'Pending',
-        "type": 'pending'
+        "variant": 'pending'
     })
 }}

package/components/status/example-status-small.njk

@@ -2,7 +2,7 @@
 {{
     onsStatus({
         "label": 'Live',
-        "type": 'success',
+        "variant": 'success',
         "size": 'small'
     })
 }}

package/components/status/example-status-success.njk

@@ -2,6 +2,6 @@
 {{
     onsStatus({
         "label": 'In progress',
-        "type": 'success'
+        "variant": 'success'
     })
 }}

package/components/summary/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSummary(params) %}
     {% set className = "ons-summary" %}
-    {% set titleSize = "2" %}
+    {% set headingLevel = 2 %}
 
     {% if params.variant == "hub" %}
         {% set variantHub = true %}
@@ -17,16 +17,15 @@
         {% for summary in params.summaries %}
             {% if summary.summaryTitle %}
                 <h2 class="ons-summary__title ons-u-mb-m{{ " ons-u-mt-m" if loop.index > 1 else "" }}">{{ summary.summaryTitle }}</h2>
-                {% set titleSize = "3" %}
+                {% set headingLevel = 3 %}
             {% endif %}
             {% for group in summary.groups %}
                 <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group{{ variantClasses }}">
                     {% if group.groupTitle %}
-                        <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
+                        <h{{ headingLevel }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ headingLevel }}>
                     {% endif %}
                     {% if group.rows %}
-                        <div class="ons-summary__items">
-
+                        <dl class="ons-summary__items">
                             {% for row in group.rows %}
                                 {% set itemClass = "" %}
                                 {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
@@ -40,7 +39,7 @@
                                     {% endif %}
 
                                     {% for rowItem in row.rowItems %}
-                                        <dl class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}"{% if rowItem.id %} id="{{ rowItem.id }}"{% endif %}>
+                                        <div class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}"{% if rowItem.id %} id="{{ rowItem.id }}"{% endif %}>
                                             <dt class="ons-summary__item-title"
                                                 {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                             >
@@ -104,11 +103,11 @@
                                                     {% endfor %}
                                                 </dd>
                                             {% endif %}
-                                        </dl>
+                                        </div>
                                     {% endfor %}
                                 </div>
                             {% endfor %}
-                        </div>
+                        </dl>
                     {% elif group.placeholderText %}
                         <span class="ons-summary__placeholder">{{ group.placeholderText }}</span>
                     {% endif %}

package/components/summary/_macro.spec.js

@@ -303,12 +303,26 @@ const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = {
   ],
 };
 
+// To address a DAC issue, we've disabled specific axe definition list rules causing test failures.
+// While resolving it would require a significant refactor, the failures are deemed non-critical for accessibility,
+// leading to their removal in this context. [https://github.com/ONSdigital/design-system/issues/3027]
+const axeRules = {
+  rules: {
+    dlitem: {
+      enabled: false,
+    },
+    'definition-list': {
+      enabled: false,
+    },
+  },
+};
+
 describe('macro: summary', () => {
   describe('mode: general', () => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
+      const results = await axe($.html(), axeRules);
 
-      const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
@@ -436,15 +450,19 @@ describe('macro: summary', () => {
       it('displays the `valueList` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text').text().trim()).toBe(
-          'row value 1',
-        );
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values .ons-summary__text')
+            .text()
+            .trim(),
+        ).toBe('row value 1');
       });
 
       it('displays the `other` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li').text().trim()).toBe('other value');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values ul li').text().trim()).toBe(
+          'other value',
+        );
       });
 
       it('wraps the `valueList` in a ul if multiple values provided', () => {
@@ -516,8 +534,8 @@ describe('macro: summary', () => {
   describe('mode: with title', () => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
+      const results = await axe($.html(), axeRules);
 
-      const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
@@ -536,8 +554,8 @@ describe('macro: summary', () => {
           variant: 'hub',
         }),
       );
+      const results = await axe($.html(), axeRules);
 
-      const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
@@ -570,7 +588,7 @@ describe('macro: summary', () => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_NO_ROWS));
 
-      const results = await axe($.html());
+      const results = await axe($.html(), axeRules);
       expect(results).toHaveNoViolations();
     });
 
@@ -609,8 +627,8 @@ describe('macro: summary', () => {
 describe('mode: card', () => {
   it('passes jest-axe checks', async () => {
     const $ = cheerio.load(renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, variant: 'card' }));
+    const results = await axe($.html(), axeRules);
 
-    const results = await axe($.html());
     expect(results).toHaveNoViolations();
   });
 

package/components/table/_macro.spec.js

@@ -59,7 +59,7 @@ describe('macro: table', () => {
     it('renders header cells with expected text', () => {
       const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
 
-      const headerCellValues = mapAll($('.ons-table__header'), node => node.text().trim());
+      const headerCellValues = mapAll($('.ons-table__header'), (node) => node.text().trim());
       expect(headerCellValues).toEqual(['Column 1', 'Column 2', 'Column 3']);
     });
 
@@ -121,7 +121,7 @@ describe('macro: table', () => {
     it('does not add visually hidden class to column headers', () => {
       const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
 
-      const hasClass = mapAll($('.ons-table__header > span'), node => node.hasClass('ons-u-vh'));
+      const hasClass = mapAll($('.ons-table__header > span'), (node) => node.hasClass('ons-u-vh'));
       expect(hasClass).toEqual([false, false, false]);
     });
 
@@ -139,9 +139,9 @@ describe('macro: table', () => {
     it('renders expected row cells', () => {
       const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
 
-      const row1Values = mapAll($('.ons-table__row:nth-child(1) .ons-table__cell'), node => node.text().trim());
+      const row1Values = mapAll($('.ons-table__row:nth-child(1) .ons-table__cell'), (node) => node.text().trim());
       expect(row1Values).toEqual(['Row 1 Cell 1', 'Row 1 Cell 2', 'Row 1 Cell 3']);
-      const row2Values = mapAll($('.ons-table__row:nth-child(2) .ons-table__cell'), node => node.text().trim());
+      const row2Values = mapAll($('.ons-table__row:nth-child(2) .ons-table__cell'), (node) => node.text().trim());
       expect(row2Values).toEqual(['Row 2 Cell 1', 'Row 2 Cell 2', 'Row 2 Cell 3']);
     });
 
@@ -401,7 +401,7 @@ describe('macro: table', () => {
         }),
       );
 
-      const footerCellValues = mapAll($('.ons-table__foot .ons-table__cell'), node => node.text().trim());
+      const footerCellValues = mapAll($('.ons-table__foot .ons-table__cell'), (node) => node.text().trim());
       expect(footerCellValues).toEqual(['Footer Cell 1', 'Footer Cell 2', 'Footer Cell 3']);
     });
   });
@@ -515,11 +515,7 @@ describe('macro: table', () => {
         }),
       );
 
-      expect(
-        $('.ons-table__caption')
-          .text()
-          .trim(),
-      ).toBe('Example table caption');
+      expect($('.ons-table__caption').text().trim()).toBe('Example table caption');
     });
 
     it('does not visually hide caption when `hideCaption` is not provided', () => {

package/components/table/scrollable-table.dom.js

@@ -8,7 +8,7 @@ async function tableScroller() {
   if (tables.length) {
     const TableScroll = (await import('./scrollable-table')).default;
 
-    tables.forEach(table => new TableScroll(table));
+    tables.forEach((table) => new TableScroll(table));
   }
 }
 

package/components/table/scrollable-table.js

@@ -65,7 +65,7 @@ export default class TableScroll {
       ? rightShadow.classList.remove('ons-visible')
       : rightShadow.classList.add('ons-visible');
 
-    setTimeout(function() {
+    setTimeout(function () {
       return leftShadow.classList.add('ons-with-transition'), rightShadow.classList.add('ons-with-transition');
     }, 200);
   }

package/components/table/sortable-table.js

@@ -59,7 +59,7 @@ export default class TableSort {
     this.tableBody = this.table.getElementsByClassName(classTableBody);
     const tableBody = [...this.tableBody];
 
-    tableBody.forEach(tbody => {
+    tableBody.forEach((tbody) => {
       const rows = this.getTableRowsArray(tbody);
       const sortedRows = this.sort(rows, columnNumber, newSortDirection);
       this.addRows(tbody, sortedRows);
@@ -74,7 +74,7 @@ export default class TableSort {
     this.trs = tbody.querySelectorAll('tr');
     const trs = [...this.trs];
 
-    trs.forEach(tr => {
+    trs.forEach((tr) => {
       rows.push(tr);
     });
 
@@ -123,7 +123,7 @@ export default class TableSort {
   }
 
   addRows(body, rows) {
-    rows.forEach(row => {
+    rows.forEach((row) => {
       body.append(row);
     });
   }
@@ -131,7 +131,7 @@ export default class TableSort {
   removeButtonStates() {
     this.sortableHeadings = this.table.querySelectorAll(jsSortableHeadings);
     const sortableHeadings = [...this.sortableHeadings];
-    sortableHeadings.forEach(heading => {
+    sortableHeadings.forEach((heading) => {
       heading.setAttribute('aria-sort', 'none');
     });
   }