fix: improve event times table accessibility

- Remove index column - Update heading of actions column - Change font size to 0 in actions column.
City-of-Helsinki · Mar 28, 2024 · b86b382 · b86b382
1 parent e976320
commit b86b382
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 63 deletions.
diff --git a/src/common/components/table/table.module.scss b/src/common/components/table/table.module.scss
@@ -26,7 +26,7 @@
     }
 
     thead tr th:last-of-type {
-      @include hidden-from-screen;
+      font-size: 0;
     }
   }
 }

diff --git a/src/domain/app/i18n/en.json b/src/domain/app/i18n/en.json
@@ -916,6 +916,10 @@
       "tabEventTime": "Event time",
       "tabRecurringEvent": "Recurring event",
       "textNoLinksToEvents": "No links.",
+      "timesTableColumns": {
+        "actions": "Edit or delete the date",
+        "time": "Time"
+      },
       "titleAttendeeCapacity": "Attendee capacity",
       "titleAudience": "Target groups",
       "titleAudienceAge": "Age restrictions",

diff --git a/src/domain/app/i18n/fi.json b/src/domain/app/i18n/fi.json
@@ -917,6 +917,10 @@
       "tabEventTime": "Tapahtuman ajankohta",
       "tabRecurringEvent": "Toistuva tapahtuma",
       "textNoLinksToEvents": "Ei kytköksiä",
+      "timesTableColumns": {
+        "actions": "Muokkaa tai poista ajankohta",
+        "time": "Ajankohta"
+      },
       "titleAttendeeCapacity": "Osallistujamäärä",
       "titleAudience": "Kohderyhmät",
       "titleAudienceAge": "Ikärajoitukset",

diff --git a/src/domain/app/i18n/sv.json b/src/domain/app/i18n/sv.json
@@ -917,6 +917,10 @@
       "tabEventTime": "Evenemangstid",
       "tabRecurringEvent": "Återkommande evenemang",
       "textNoLinksToEvents": "Inga länkar.",
+      "timesTableColumns": {
+        "actions": "Redigera eller ta bort tid",
+        "time": "Tid"
+      },
       "titleAttendeeCapacity": "Deltagarkapacitet",
       "titleAudience": "Målgrupper",
       "titleAudienceAge": "Åldersbegränsningar",

diff --git a/src/domain/event/__tests__/EditEventPage.test.tsx b/src/domain/event/__tests__/EditEventPage.test.tsx
@@ -336,7 +336,7 @@ test('should update recurring event', async () => {
   // Delete first sub-event
   const withinRow = within(
     screen.getByRole('row', {
-      name: `1 ${formatDate(
+      name: `${formatDate(
         subEventTimes[0].startTime,
         DATETIME_FORMAT
       )} – ${formatDate(subEventTimes[0].endTime, DATETIME_FORMAT)}`,

diff --git a/src/domain/event/formSections/timeSection/__tests__/TimeSection.test.tsx b/src/domain/event/formSections/timeSection/__tests__/TimeSection.test.tsx
@@ -132,15 +132,15 @@ test('should render all event times', async () => {
 
   // Event
   await screen.findByRole('row', {
-    name: '1 18.4.2021 12.00 – 18.4.2021 15.00',
+    name: '18.4.2021 12.00 – 18.4.2021 15.00',
   });
   // Recurring event
   screen.getByRole('heading', {
     name: 'Ma, Viikon välein, 1.5.2021 – 15.5.2021',
   });
   // Single event time
   screen.getByRole('row', {
-    name: '4 11.6.2021 12.00 – 11.6.2021 15.00',
+    name: '11.6.2021 12.00 – 11.6.2021 15.00',
   });
 });
 

diff --git a/src/domain/event/formSections/timeSection/eventTimeTab/__tests__/EventTimeTab.test.tsx b/src/domain/event/formSections/timeSection/eventTimeTab/__tests__/EventTimeTab.test.tsx
@@ -155,10 +155,10 @@ test('should add/delete event time', async () => {
   await user.click(addButton);
 
   await screen.findByRole('row', {
-    name: '1 14.4.2021 12.00 – 14.4.2021 14.00',
+    name: '14.4.2021 12.00 – 14.4.2021 14.00',
   });
   screen.getByRole('row', {
-    name: '2 11.6.2021 12.00 – 11.6.2021 15.00',
+    name: '11.6.2021 12.00 – 11.6.2021 15.00',
   });
 
   const toggleButton = getSingleEventElement('toggle');
@@ -170,12 +170,12 @@ test('should add/delete event time', async () => {
   await waitFor(() =>
     expect(
       screen.queryByRole('row', {
-        name: '1 14.4.2021 12.00 – 14.4.2021 14.00',
+        name: '14.4.2021 12.00 – 14.4.2021 14.00',
       })
     ).not.toBeInTheDocument()
   );
   screen.getByRole('row', {
-    name: '1 11.6.2021 12.00 – 11.6.2021 15.00',
+    name: '11.6.2021 12.00 – 11.6.2021 15.00',
   });
 });
 
@@ -188,7 +188,7 @@ test('should edit event time', async () => {
   renderComponent(initialValues);
 
   screen.getByRole('row', {
-    name: '1 11.6.2021 12.00 – 11.6.2021 15.00',
+    name: '11.6.2021 12.00 – 11.6.2021 15.00',
   });
 
   const toggleMenuButton = screen.getByRole('button', { name: /valinnat/i });
@@ -211,7 +211,7 @@ test('should edit event time', async () => {
   await user.click(updateButton);
 
   await screen.findByRole('row', {
-    name: '1 2.5.2021 12.00 – 11.6.2021 15.00',
+    name: '2.5.2021 12.00 – 11.6.2021 15.00',
   });
 });
 

diff --git a/src/domain/event/formSections/timeSection/eventTimesSummary/EventTimesSummary.tsx b/src/domain/event/formSections/timeSection/eventTimesSummary/EventTimesSummary.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import FieldColumn from '../../../../app/layout/fieldColumn/FieldColumn';
 import EventTimesTable from '../eventTimesTable/EventTimesTable';
@@ -11,16 +11,6 @@ const EventTimesSummary: React.FC = () => {
   const { events, eventTimes, recurringEvents, setEventTimes } =
     useTimeSectionContext();
 
-  const eventTimesStartIndex = useMemo(() => {
-    let startIndex = 1 + events.length;
-
-    recurringEvents.forEach((recurringEvent) => {
-      startIndex = startIndex + recurringEvent.eventTimes.length;
-    });
-
-    return startIndex;
-  }, [events.length, recurringEvents]);
-
   const isVisible =
     events?.length || eventTimes?.length || recurringEvents?.length;
 
@@ -40,7 +30,6 @@ const EventTimesSummary: React.FC = () => {
         <EventTimesTable
           eventTimes={eventTimes}
           setEventTimes={setEventTimes}
-          startIndex={eventTimesStartIndex}
         />
       </FieldColumn>
     </>

diff --git a/...ain/event/formSections/timeSection/eventTimesSummary/__tests__/EventTimesSummary.test.tsx b/...ain/event/formSections/timeSection/eventTimesSummary/__tests__/EventTimesSummary.test.tsx
@@ -79,9 +79,9 @@ test('should render event times summary', async () => {
   });
   await user.click(toggleButton);
 
-  screen.getByRole('row', { name: '1 7.5.2021 12.00 – 7.5.2021 15.00' });
-  screen.getByRole('row', { name: '2 9.5.2021 12.00 – 9.5.2021 15.00' });
+  screen.getByRole('row', { name: '7.5.2021 12.00 – 7.5.2021 15.00' });
+  screen.getByRole('row', { name: '9.5.2021 12.00 – 9.5.2021 15.00' });
 
-  screen.getByRole('row', { name: '3 2.5.2021 12.00 – 2.5.2021 15.00' });
-  screen.getByRole('row', { name: '4 3.5.2021 12.00 – 3.5.2021 15.00' });
+  screen.getByRole('row', { name: '2.5.2021 12.00 – 2.5.2021 15.00' });
+  screen.getByRole('row', { name: '3.5.2021 12.00 – 3.5.2021 15.00' });
 });
diff --git a/src/domain/event/formSections/timeSection/eventTimesTable/EventTimesTable.tsx b/src/domain/event/formSections/timeSection/eventTimesTable/EventTimesTable.tsx
@@ -37,7 +37,6 @@ interface EventTimeRowProps {
   index: number;
   onDelete: (index: number) => void;
   onUpdate: (index: number, values: EventTime) => void;
-  startIndex: number;
 }
 
 const formatDateStr = (date: Date | null) => formatDate(date, DATETIME_FORMAT);
@@ -47,7 +46,6 @@ const EventTimeRow: React.FC<EventTimeRowProps> = ({
   index,
   onDelete,
   onUpdate,
-  startIndex,
 }) => {
   const { t } = useTranslation();
   const { isEditingAllowed, savedEvent } = useTimeSectionContext();
@@ -170,7 +168,6 @@ const EventTimeRow: React.FC<EventTimeRowProps> = ({
       )}
 
       <tr>
-        <td className={styles.indexColumn}>{startIndex + index}</td>
         <td>{dateText}</td>
         <td>
           <MenuDropdown
@@ -198,13 +195,11 @@ const EventTimeRow: React.FC<EventTimeRowProps> = ({
 export interface EventTimesTableProps {
   eventTimes: EventTime[];
   setEventTimes: (eventTimes: EventTime[]) => void;
-  startIndex?: number;
 }
 
 const EventTimesTable: React.FC<EventTimesTableProps> = ({
   eventTimes,
   setEventTimes,
-  startIndex = 1,
 }) => {
   const { t } = useTranslation();
 
@@ -234,9 +229,8 @@ const EventTimesTable: React.FC<EventTimesTableProps> = ({
     >
       <thead>
         <HeaderRow>
-          <th className={styles.indexColumn}>#</th>
-          <th>{t('event.form.labelTime')}</th>
-          <th>{t('common.actions')}</th>
+          <th>{t('event.form.timesTableColumns.time')}</th>
+          <th>{t('event.form.timesTableColumns.actions')}</th>
         </HeaderRow>
       </thead>
       <TableBody>
@@ -248,7 +242,6 @@ const EventTimesTable: React.FC<EventTimesTableProps> = ({
               index={index}
               onDelete={handleDelete}
               onUpdate={handleUpdate}
-              startIndex={startIndex}
             />
           );
         })}

diff --git a/src/domain/event/formSections/timeSection/eventTimesTable/__tests__/EventTimesTable.test.tsx b/src/domain/event/formSections/timeSection/eventTimesTable/__tests__/EventTimesTable.test.tsx
@@ -71,8 +71,8 @@ test('should render event times table', async () => {
   renderComponent({ eventTimes });
 
   screen.getByRole('table');
-  screen.getByRole('row', { name: '1 2.5.2021 12.00 – 2.5.2021 15.00' });
-  screen.getByRole('row', { name: '2 3.5.2021 12.00 – 3.5.2021 15.00' });
+  screen.getByRole('row', { name: '2.5.2021 12.00 – 2.5.2021 15.00' });
+  screen.getByRole('row', { name: '3.5.2021 12.00 – 3.5.2021 15.00' });
 });
 
 test('should call setEventTimes when deleting an event time', async () => {
@@ -85,7 +85,7 @@ test('should call setEventTimes when deleting an event time', async () => {
   renderComponent({ eventTimes, setEventTimes });
 
   const withinRow = within(
-    screen.getByRole('row', { name: '1 2.5.2021 12.00 – 2.5.2021 15.00' })
+    screen.getByRole('row', { name: '2.5.2021 12.00 – 2.5.2021 15.00' })
   );
   const toggleMenuButton = withinRow.getByRole('button', { name: /valinnat/i });
   await user.click(toggleMenuButton);
@@ -105,7 +105,7 @@ test('should call setEventTimes when updating an event time', async () => {
   renderComponent({ eventTimes, setEventTimes });
 
   const withinRow = within(
-    screen.getByRole('row', { name: '1 2.5.2021 12.00 – 2.5.2021 15.00' })
+    screen.getByRole('row', { name: '2.5.2021 12.00 – 2.5.2021 15.00' })
   );
   const toggleMenuButton = withinRow.getByRole('button', { name: /valinnat/i });
   await user.click(toggleMenuButton);

diff --git a/src/domain/event/formSections/timeSection/recurringEvents/RecurringEvents.tsx b/src/domain/event/formSections/timeSection/recurringEvents/RecurringEvents.tsx
@@ -6,8 +6,7 @@ import useTimeSectionContext from '../hooks/useTimeSectionContext';
 import RecurringEvent from './recurringEvent/RecurringEvent';
 
 const RecurringEvents: React.FC = () => {
-  const { events, recurringEvents, setRecurringEvents } =
-    useTimeSectionContext();
+  const { recurringEvents, setRecurringEvents } = useTimeSectionContext();
 
   const handleDelete = (index: number) => {
     setRecurringEvents(
@@ -27,15 +26,6 @@ const RecurringEvents: React.FC = () => {
     );
   };
 
-  const getStartIndex = (index: number) => {
-    let startIndex = 1 + events.length;
-
-    recurringEvents.slice(0, index).forEach((recurringEvent) => {
-      startIndex = startIndex + recurringEvent.eventTimes.length;
-    });
-    return startIndex;
-  };
-
   return (
     <>
       {recurringEvents.map((recurringEvent, index) => {
@@ -47,7 +37,6 @@ const RecurringEvents: React.FC = () => {
               onDelete={handleDelete}
               onUpdateEventTimes={handleUpdateEventTimes}
               recurringEvent={recurringEvent}
-              startIndex={getStartIndex(index)}
             />
           </FormGroup>
         );

diff --git a/src/domain/event/formSections/timeSection/recurringEvents/__tests__/RecurringEvents.test.tsx b/src/domain/event/formSections/timeSection/recurringEvents/__tests__/RecurringEvents.test.tsx
@@ -87,11 +87,11 @@ test('should render component', async () => {
   await user.click(toggleButton1);
 
   screen.getByRole('row', {
-    name: '1 2.5.2021 12.00 – 2.5.2021 15.00',
+    name: '2.5.2021 12.00 – 2.5.2021 15.00',
     hidden: false,
   });
   screen.getByRole('row', {
-    name: '2 9.5.2021 12.00 – 9.5.2021 15.00',
+    name: '9.5.2021 12.00 – 9.5.2021 15.00',
     hidden: false,
   });
 
@@ -101,11 +101,11 @@ test('should render component', async () => {
   await user.click(toggleButton2);
 
   screen.getByRole('row', {
-    name: '3 2.6.2021 12.00 – 2.6.2021 15.00',
+    name: '2.6.2021 12.00 – 2.6.2021 15.00',
     hidden: false,
   });
   screen.getByRole('row', {
-    name: '4 9.6.2021 12.00 – 9.6.2021 15.00',
+    name: '9.6.2021 12.00 – 9.6.2021 15.00',
     hidden: false,
   });
 });
@@ -124,7 +124,7 @@ test('should call setRecurringEvents when deleting a single event time', async (
 
   const withinEventRow = within(
     screen.getByRole('row', {
-      name: '1 2.5.2021 12.00 – 2.5.2021 15.00',
+      name: '2.5.2021 12.00 – 2.5.2021 15.00',
     })
   );
   const toggleMenuButton = withinEventRow.getByRole('button', {

diff --git a/src/domain/event/formSections/timeSection/recurringEvents/recurringEvent/RecurringEvent.tsx b/src/domain/event/formSections/timeSection/recurringEvents/recurringEvent/RecurringEvent.tsx
@@ -17,15 +17,13 @@ type Props = {
   onDelete: (index: number) => void;
   onUpdateEventTimes: (index: number, eventTimes: EventTime[]) => void;
   recurringEvent: RecurringEventSettings;
-  startIndex: number;
 };
 
 const RecurringEvent: React.FC<Props> = ({
   index,
   onDelete,
   onUpdateEventTimes,
   recurringEvent,
-  startIndex,
 }) => {
   const { endDate, startDate } = useMemo(() => {
     return {
@@ -80,7 +78,6 @@ const RecurringEvent: React.FC<Props> = ({
           setEventTimes={(eventTimes: EventTime[]) => {
             onUpdateEventTimes(index, eventTimes);
           }}
-          startIndex={startIndex}
         />
       </Collapsible>
     </FieldWithButton>

diff --git a/src/domain/event/formSections/timeSection/timeSection.module.scss b/src/domain/event/formSections/timeSection/timeSection.module.scss
@@ -8,10 +8,6 @@
 .eventTimesTable {
   width: 100%;
 
-  .indexColumn {
-    width: var(--spacing-l);
-  }
-
   .toggleButton {
     padding: 0;
     display: flex;