diff --git a/packages/design-system/src/components/DatePicker/DatePicker.test.tsx b/packages/design-system/src/components/DatePicker/DatePicker.test.tsx
index a7f016212..c04c53652 100644
--- a/packages/design-system/src/components/DatePicker/DatePicker.test.tsx
+++ b/packages/design-system/src/components/DatePicker/DatePicker.test.tsx
@@ -35,7 +35,7 @@ describe('DatePicker', () => {
 
       expect(getByRole('dialog')).toBeInTheDocument();
 
-      await user.click(getByRole('gridcell', { name: 'Wednesday 1 September 2021' }));
+      await user.click(getByRole('gridcell', { name: 'Wednesday, 1 September 2021' }));
 
       expect(onChange).toHaveBeenCalledWith(new Date('Sep 01 2021'));
 
@@ -64,7 +64,7 @@ describe('DatePicker', () => {
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
-      await user.click(getByRole('gridcell', { name: 'Wednesday 8 September 2021' }));
+      await user.click(getByRole('gridcell', { name: 'Wednesday, 8 September 2021' }));
 
       expect(onChange).toHaveBeenCalledWith(new Date('Sep 08 2021'));
     });
@@ -156,7 +156,7 @@ describe('DatePicker', () => {
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
-      await user.click(getByRole('gridcell', { name: 'Wednesday 8 September 2021' }));
+      await user.click(getByRole('gridcell', { name: 'Wednesday, 8 September 2021' }));
 
       expect(getByRole('combobox', { name: 'date picker' })).toHaveValue('08/09/2021');
 
@@ -170,7 +170,7 @@ describe('DatePicker', () => {
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
-      await user.click(getByRole('gridcell', { name: 'Wednesday 8 September 2021' }));
+      await user.click(getByRole('gridcell', { name: 'Wednesday, 8 September 2021' }));
 
       expect((getByRole('combobox') as HTMLInputElement).validity.patternMismatch).toBe(false);
     });
@@ -239,7 +239,7 @@ describe('DatePicker', () => {
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
-      await user.click(getByRole('gridcell', { name: 'Wednesday 1 September 2021' }));
+      await user.click(getByRole('gridcell', { name: 'Wednesday, 1 September 2021' }));
 
       expect(onChange).toHaveBeenCalledWith(new Date('Sep 01 2021'));
     });
@@ -269,7 +269,7 @@ describe('DatePicker', () => {
 
         await user.click(getByRole('combobox', { name: 'date picker' }));
 
-        const name = key === 'ArrowDown' ? 'Thursday 23 September 2021' : 'Thursday 9 September 2021';
+        const name = key === 'ArrowDown' ? 'Thursday, 23 September 2021' : 'Thursday, 9 September 2021';
 
         expect(getByRole('gridcell', { name })).toHaveAttribute('aria-selected', 'false');
 
@@ -287,7 +287,7 @@ describe('DatePicker', () => {
 
         await user.click(getByRole('combobox', { name: 'date picker' }));
 
-        const name = key === 'ArrowLeft' ? 'Wednesday 15 September 2021' : 'Friday 17 September 2021';
+        const name = key === 'ArrowLeft' ? 'Wednesday, 15 September 2021' : 'Friday, 17 September 2021';
 
         expect(getByRole('gridcell', { name })).toHaveAttribute('aria-selected', 'false');
 
@@ -307,12 +307,12 @@ describe('DatePicker', () => {
       await user.keyboard('[ArrowRight]');
 
       expect(getByRole('combobox', { name: 'Month' })).toHaveTextContent('October');
-      expect(getByRole('gridcell', { name: 'Friday 1 October 2021' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Friday, 1 October 2021' })).toHaveAttribute('aria-selected', 'true');
 
       await user.keyboard('[ArrowUp]');
 
       expect(getByRole('combobox', { name: 'Month' })).toHaveTextContent('September');
-      expect(getByRole('gridcell', { name: 'Friday 24 September 2021' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Friday, 24 September 2021' })).toHaveAttribute('aria-selected', 'true');
     });
   });
 
@@ -350,7 +350,7 @@ describe('DatePicker', () => {
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
       expect(getByRole('gridcell', { hidden: true, name: 'Su' })).toBeInTheDocument();
-      expect(getByRole('gridcell', { name: 'Wednesday 7 September 2022' })).toBeInTheDocument();
+      expect(getByRole('gridcell', { name: 'Wednesday, 7 September 2022' })).toBeInTheDocument();
     });
 
     it('should format by en locale', async () => {
@@ -472,8 +472,8 @@ describe('DatePicker', () => {
       });
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
-      expect(getByRole('gridcell', { name: 'Thursday 3 September 2020' })).toHaveAttribute('aria-disabled', 'true');
-      expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-disabled', 'false');
+      expect(getByRole('gridcell', { name: 'Thursday, 3 September 2020' })).toHaveAttribute('aria-disabled', 'true');
+      expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-disabled', 'false');
     });
 
     it('should limit the date selection to given max date', async () => {
@@ -483,8 +483,8 @@ describe('DatePicker', () => {
       });
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
-      expect(getByRole('gridcell', { name: 'Thursday 3 September 2020' })).toHaveAttribute('aria-disabled', 'false');
-      expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-disabled', 'true');
+      expect(getByRole('gridcell', { name: 'Thursday, 3 September 2020' })).toHaveAttribute('aria-disabled', 'false');
+      expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('should set the initial calendar date to the minimum date if today is before that date', async () => {
@@ -494,7 +494,7 @@ describe('DatePicker', () => {
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
-      expect(getByRole('gridcell', { name: 'Monday 4 September 4000' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Monday, 4 September 4000' })).toHaveAttribute('aria-selected', 'true');
     });
 
     it('should set the intial calendar date to the maximum date if today is after that date', async () => {
@@ -504,7 +504,7 @@ describe('DatePicker', () => {
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
 
-      expect(getByRole('gridcell', { name: 'Monday 4 September 2000' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Monday, 4 September 2000' })).toHaveAttribute('aria-selected', 'true');
     });
   });
 
@@ -513,43 +513,44 @@ describe('DatePicker', () => {
       const { getByRole, user } = render({ initialDate: new Date('Sept 04 2020'), locale: 'en-GB' });
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
-      expect(getByRole('gridcell', { name: 'Friday 4 September 2020' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Friday, 4 September 2020' })).toHaveAttribute('aria-selected', 'true');
 
       await user.clear(getByRole('combobox', { name: 'date picker' }));
 
       getByRole('combobox', { name: 'date picker' }).focus();
 
       await user.keyboard('05');
-      expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-selected', 'true');
 
       await user.keyboard('/10');
-      expect(getByRole('gridcell', { name: 'Monday 5 October 2020' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Monday, 5 October 2020' })).toHaveAttribute('aria-selected', 'true');
 
       await user.keyboard('/2022');
-      expect(getByRole('gridcell', { name: 'Wednesday 5 October 2022' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Wednesday, 5 October 2022' })).toHaveAttribute('aria-selected', 'true');
     });
 
     it('should correctly update the calendar when typing D/M/Y & D/M/YY', async () => {
       const { getByRole, user } = render({ initialDate: new Date('Sept 04 2020'), locale: 'en-GB' });
 
       await user.click(getByRole('combobox', { name: 'date picker' }));
-      expect(getByRole('gridcell', { name: 'Friday 4 September 2020' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Friday, 4 September 2020' })).toHaveAttribute('aria-selected', 'true');
 
       await user.clear(getByRole('combobox', { name: 'date picker' }));
 
       getByRole('combobox', { name: 'date picker' }).focus();
 
       await user.keyboard('5');
-      expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-selected', 'true');
 
       await user.keyboard('/1');
-      expect(getByRole('gridcell', { name: 'Sunday 5 January 2020' })).toHaveAttribute('aria-selected', 'true');
+      expect(document.body).toMatchSnapshot();
+      expect(getByRole('gridcell', { name: 'Sunday, 5 January 2020' })).toHaveAttribute('aria-selected', 'true');
 
       await user.keyboard('/2');
-      expect(getByRole('gridcell', { name: 'Saturday 5 January 2002' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Saturday, 5 January 2002' })).toHaveAttribute('aria-selected', 'true');
 
       await user.keyboard('2');
-      expect(getByRole('gridcell', { name: 'Wednesday 5 January 2022' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Wednesday, 5 January 2022' })).toHaveAttribute('aria-selected', 'true');
     });
 
     it('should not go past the minimum date when typing in the input', async () => {
@@ -558,7 +559,7 @@ describe('DatePicker', () => {
       await user.click(getByRole('combobox', { name: 'date picker' }));
       await user.type(getByRole('combobox', { name: 'date picker' }), '09/03/1994');
 
-      expect(getByRole('gridcell', { name: 'Tuesday 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Tuesday, 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
     });
 
     it('should not go past the maximum date when typing in the input', async () => {
@@ -567,7 +568,7 @@ describe('DatePicker', () => {
       await user.click(getByRole('combobox', { name: 'date picker' }));
       await user.type(getByRole('combobox', { name: 'date picker' }), '09/03/2004');
 
-      expect(getByRole('gridcell', { name: 'Tuesday 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
+      expect(getByRole('gridcell', { name: 'Tuesday, 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
     });
   });
 });