PT-510 | Accessibility improvements

public/static/locales/en/event.json

@@ -34,6 +34,7 @@
   },
   "pageTitle": "Event",
   "photographerText": "Photo: {{photographer}}",
+  "eventImageAltText": "Event image",
   "contactPerson": "Contact person",
   "occurrencesTitle": "Occurrences ({{count}} pcs)",
   "shareLinks": {

public/static/locales/fi/event.json

@@ -34,6 +34,7 @@
   },
   "pageTitle": "Tapahtuma",
   "photographerText": "Kuva: {{photographer}}",
+  "eventImageAltText": "Tapahtuman kuva",
   "contactPerson": "Yhteyshenkilö",
   "occurrencesTitle": "Tapahtumat ({{count}} kpl)",
   "shareLinks": {

public/static/locales/sv/event.json

@@ -34,6 +34,7 @@
   },
   "pageTitle": "Evenemang",
   "photographerText": "Foto: {{photographer}}",
+  "eventImageAltText": "Händelsebild",
   "contactPerson": "Kontakt person",
   "occurrencesTitle": "Händelsetider ({{count}} st)",
   "shareLinks": {

src/common/components/form/errorMessage.module.scss

@@ -3,5 +3,5 @@
 
   color: var(--color-error);
   line-height: var(--label-height);
-  font-size: var(--fontsize-body-m);
+  font-size: var(--fontsize-body-l);
 }

src/common/components/multiSelectDropdown/multiSelectDropdown.module.scss

@@ -63,7 +63,7 @@
     line-height: 1.5rem;
     white-space: nowrap;
     overflow: hidden;
-    font-size: var(--fontsize-body-m);
+    font-size: var(--fontsize-body-l);
     text-overflow: ellipsis;
 
     input {

src/common/components/table/table.module.scss

@@ -7,11 +7,11 @@
   --color-cell: var(--color-black-90);
   --color-cell-header: var(--color-black-90);
 
-  --fontsize-cell: var(--fontsize-body-m);
-  --fontsize-cell-header: var(--fontsize-body-m);
+  --fontsize-cell: var(--fontsize-body-l);
+  --fontsize-cell-header: var(--fontsize-body-l);
 
   --margin-bottom-table: var(--spacing-m);
-  --spacing-cell: var(--spacing-s);
+  --spacing-cell: var(--spacing-m);
 
   --expanded-row-border-color: var(--color-black-30);
 }

src/domain/event/EventPage.tsx

@@ -114,7 +114,7 @@ const EventPage = (): ReactElement => {
             )}
             <EventImage
               imageUrl={imageUrl}
-              imageAltText={imageAltText}
+              imageAltText={imageAltText || t('event:eventImageAltText')}
               photographerName={photographerName}
             />
             <EventBasicInfo event={eventData.event} />

src/domain/event/dateFilter/dateFilter.module.scss

@@ -1,6 +1,6 @@
 .dateFilter {
   --date-filter-width: 160px;
-  --inactive-date-filter-color: lightgrey;
+  --inactive-date-filter-color: var(--color-black-60);
 }
 
 .dateFilter {

src/domain/event/eventCard/EventCard.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { IconLocation } from 'hds-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { EventFieldsFragment } from '../../../generated/graphql';
 import useLocale from '../../../hooks/useLocale';
+import { Link } from '../../../i18n';
 import IconClock from '../../../icons/IconClock';
 import getLocalisedString from '../../../utils/getLocalisedString';
 import PlaceText from '../../place/placeText/PlaceText';
@@ -13,10 +15,11 @@ import styles from './eventCard.module.scss';
 
 interface Props {
   event: EventFieldsFragment;
+  link: string;
   onClick?: (id: string) => void;
 }
 
-const EventCard: React.FC<Props> = ({ event, onClick }) => {
+const EventCard: React.FC<Props> = ({ event, link, onClick }) => {
   const { t } = useTranslation();
   const locale = useLocale();
 
@@ -26,55 +29,42 @@ const EventCard: React.FC<Props> = ({ event, onClick }) => {
   const image = event.images[0]?.url;
   const time = getEventStartTimeStr(event, locale, t);
 
-  const handleClick = () => {
-    if (onClick) {
-      onClick(event.id || '');
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleClick();
-    }
-  };
-
   return (
-    <div
-      role="button"
-      className={styles.eventCard}
-      tabIndex={0}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      aria-label={t('event:eventCard.ariaLabelOpenEvent', {
-        eventName: name,
-      })}
-    >
-      <div
-        className={styles.imageWrapper}
-        style={{
-          backgroundImage: `url(${
-            image || getEventPlaceholderImage(id || '')
-          })`,
-        }}
-      ></div>
-      <div className={styles.contentWrapper}>
-        <div className={styles.titleWrapper}>
-          <div className={styles.title}>{name}</div>
-          <div className={styles.description}>{description}</div>
-        </div>
-        <div className={styles.occurrenceInfoWrapper}>
-          <div className={styles.textWithIcon}>
-            <IconClock />
-            {time}
+    <Link href={link}>
+      <a
+        className={styles.eventCard}
+        // TODO: should we use this? maybe not, the screen reader might not read everything
+        // aria-label={t('event:eventCard.ariaLabelOpenEvent', {
+        //   eventName: name,
+        // })}
+      >
+        <div
+          className={styles.imageWrapper}
+          style={{
+            backgroundImage: `url(${
+              image || getEventPlaceholderImage(id || '')
+            })`,
+          }}
+        ></div>
+        <div className={styles.contentWrapper}>
+          <div className={styles.titleWrapper}>
+            <div className={styles.title}>{name}</div>
+            <div className={styles.description}>{description}</div>
           </div>
-          <div className={styles.textWithIcon}>
-            <IconLocation />
-            <PlaceText placeId={event.location?.id || ''} />
+          <div className={styles.occurrenceInfoWrapper}>
+            <div className={styles.textWithIcon}>
+              <IconClock />
+              {time}
+            </div>
+            <div className={styles.textWithIcon}>
+              <IconLocation />
+              <PlaceText placeId={event.location?.id || ''} />
+            </div>
           </div>
+          <EventKeywords event={event} />
         </div>
-        <EventKeywords event={event} />
-      </div>
-    </div>
+      </a>
+    </Link>
   );
 };
 

src/domain/event/eventCard/eventCard.module.scss

@@ -32,6 +32,8 @@
   display: grid;
   cursor: pointer;
   background-color: var(--background-color-event-card);
+  text-decoration: none;
+  color: black;
 
   @include respond_above(sm) {
     grid-template-columns: var(--width-image) 1fr;

src/domain/event/occurrences/Occurrences.tsx

@@ -209,6 +209,8 @@ const Occurrences: React.FC<Props> = ({
         return (
           <button
             aria-label={t('occurrence:showOccurrenceDetails')}
+            // row.isExpanded is undefined when is not expanded for some reason
+            aria-expanded={row.isExpanded ? true : false}
             {...row.getToggleRowExpandedProps()}
           >
             <IconAngleDown

src/domain/events/eventList/EventList.tsx

@@ -44,10 +44,6 @@ const EventList = ({
     setSort(option.value);
   };
 
-  const goToEventDetailsPage = (id: string) => {
-    Router.push(ROUTES.EVENT_DETAILS.replace(':id', id));
-  };
-
   return (
     <div className={styles.eventList}>
       <div className={styles.headingRow}>
@@ -75,7 +71,7 @@ const EventList = ({
             <EventCard
               key={index}
               event={event}
-              onClick={goToEventDetailsPage}
+              link={ROUTES.EVENT_DETAILS.replace(':id', event.id)}
             />
           );
         })}