PT-510 | Accessibility improvements

next.config.js

@@ -1,9 +1,14 @@
-const withSass = require('@zeit/next-sass');
+const { nextI18NextRewrites } = require('next-i18next/rewrites');
 
-module.exports = withSass({
-  cssModules: true,
-  cssLoaderOptions: {
-    importLoaders: 1,
-    localIdentName: '[local]___[hash:base64:5]',
+const localeSubpaths = {
+  fi: 'fi',
+  en: 'en',
+  sv: 'sv',
+};
+
+module.exports = {
+  rewrites: async () => nextI18NextRewrites(localeSubpaths),
+  publicRuntimeConfig: {
+    localeSubpaths,
   },
-});
+};

package.json

@@ -49,14 +49,13 @@
     "i18next-intervalplural-postprocessor": "^2.0.1",
     "ics": "^2.22.1",
     "jsdom": "^16.2.2",
-    "next": "9.4.4",
-    "next-i18next": "^4.4.2",
+    "next": "9.5.4",
+    "next-i18next": "^6.0.3",
     "next-with-apollo": "^5.0.1",
     "node-sass": "^4.14.1",
     "query-string": "^6.13.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-i18next": "^11.5.0",
     "react-redux": "^7.2.0",
     "react-table": "^7.2.2",
     "react-toastify": "^6.0.8",

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/datepicker/Datepicker.tsx

@@ -10,9 +10,9 @@ import parseDate from 'date-fns/parse';
 import { IconAngleLeft, IconAngleRight, IconCalendar } from 'hds-react';
 import uniqueId from 'lodash/uniqueId';
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import useLocale from '../../../hooks/useLocale';
+import { useTranslation } from '../../../i18n';
 import SrOnly from '../SrOnly/SrOnly';
 import InputWrapper from '../textInput/InputWrapper';
 import inputStyles from '../textInput/inputWrapper.module.scss';

src/common/components/datepicker/Day.tsx

@@ -4,9 +4,9 @@ import formatDate from 'date-fns/format';
 import isSameDay from 'date-fns/isSameDay';
 import isToday from 'date-fns/isToday';
 import React, { useContext, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import useLocale from '../../../hooks/useLocale';
+import { useTranslation } from '../../../i18n';
 import { dateLocales } from './constants';
 import styles from './datepicker.module.scss';
 import DatepickerContext from './datepickerContext';

src/common/components/datepicker/TimesList.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import useDropdownKeyboardNavigation from '../../../hooks/useDropdownKeyboardNavigation';
+import { useTranslation } from '../../../i18n';
 import ScrollIntoViewWithFocus from '../scrollIntoViewWithFocus/ScrollIntoViewWithFocus';
 import { formatTime, TimeObject } from '../timepicker/utils';
 import styles from './datepicker.module.scss';

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/form/fields/CheckboxField.tsx

@@ -1,8 +1,8 @@
 import { FieldProps } from 'formik';
 import { Checkbox, CheckboxProps } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../../i18n';
 import { invalidFieldClass } from '../constants';
 import { getErrorText } from '../utils';
 

src/common/components/form/fields/DateInputField.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { FieldProps } from 'formik';
 import { TextInputProps } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../../i18n';
 import Datepicker from '../../datepicker/Datepicker';
 import { invalidFieldClass } from '../constants';
 import { getErrorText } from '../utils';

src/common/components/form/fields/DropdownField.tsx

@@ -1,8 +1,8 @@
 import { FieldProps, FormikHelpers } from 'formik';
 import { Dropdown, DropdownProps } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../../i18n';
 import { invalidFieldClass } from '../constants';
 import { getErrorText } from '../utils';
 

src/common/components/form/fields/TextAreaField.tsx

@@ -1,8 +1,8 @@
 import { FieldProps } from 'formik';
 import { TextArea, TextAreaProps } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../../i18n';
 import { invalidFieldClass } from '../constants';
 import { getErrorText } from '../utils';
 

src/common/components/form/fields/TextInputField.tsx

@@ -1,8 +1,8 @@
 import { FieldProps } from 'formik';
 import { TextInput, TextInputProps } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../../i18n';
 import { invalidFieldClass } from '../constants';
 import { getErrorText } from '../utils';
 

src/common/components/menuDropdown/MenuDropdown.tsx

@@ -6,6 +6,9 @@ import useKeyboardNavigation from '../../../hooks/useDropdownKeyboardNavigation'
 import { Language } from '../../../types';
 import styles from './menuDropdown.module.scss';
 
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 export type MenuItem = {
   icon?: React.ReactElement;
   language?: Language;
@@ -170,7 +173,7 @@ const MenuDropdown: React.FC<MenuDropdownProps> = ({
     }
   };
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setupKeyboardNav();
     document.addEventListener('click', onDocumentClick);
     document.addEventListener('focusin', onDocumentFocusin);

src/common/components/menuDropdown/menuDropdown.module.scss

@@ -23,7 +23,7 @@
   --size-button-angle-icon: var(--spacing-layout-xs);
 
   --spacing-button: var(--spacing-2-xs);
-  --spacing-menu-item: var(--spacing-s);
+  --spacing-menu-item: var(--spacing-xs);
 }
 
 .menuDropdown {

src/common/components/multiSelectDropdown/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../i18n';
 import styles from './dropdownMenu.module.scss';
 
 interface Props {

src/common/components/multiSelectDropdown/MultiSelectDropdown.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { IconAngleDown, IconAngleUp, IconSearch, Checkbox } from 'hds-react';
 import React, { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import useKeyboardNavigation from '../../../hooks/useDropdownKeyboardNavigation';
+import { useTranslation } from '../../../i18n';
 import ScrollIntoViewWithFocus from '../scrollIntoViewWithFocus/ScrollIntoViewWithFocus';
 import SearchLabel from '../search/searchLabel/SearchLabel';
 import DropdownMenu from './DropdownMenu';

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 {
@@ -102,6 +102,7 @@
       padding: 0 var(--spacing-s) 0 var(--spacing-2-xl);
       border: none;
       outline: none;
+      box-sizing: content-box;
     }
 
     svg {

src/common/components/shareLinks/FacebookShareLink.tsx

@@ -1,7 +1,7 @@
 import { IconFacebook } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../i18n';
 import ShareLinkBase from './ShareLinkBase';
 import { ShareLinkProps } from './types';
 

src/common/components/shareLinks/LinkedInShareLink.tsx

@@ -1,7 +1,7 @@
 import { IconLinkedin } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../i18n';
 import ShareLinkBase from './ShareLinkBase';
 import { ShareLinkProps } from './types';
 

src/common/components/shareLinks/ShareLinks.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../i18n';
 import IconLink from '../../../icons/IconLink';
 import isClient from '../../../utils/isClient';
 import CopyButton from '../copyButton/CopyButton';

src/common/components/shareLinks/TwitterShareLink.tsx

@@ -1,7 +1,7 @@
 import { IconTwitter } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from '../../../i18n';
 import ShareLinkBase from './ShareLinkBase';
 import { ShareLinkProps } from './types';
 

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/app/footer/Footer.tsx

@@ -1,11 +1,10 @@
 import classNames from 'classnames';
 import { Koros } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { PRIVACY_POLICY_LINKS } from '../../../constants';
 import useLocale from '../../../hooks/useLocale';
-import { Link } from '../../../i18n';
+import { useTranslation, Link } from '../../../i18n';
 import Container from '../layout/Container';
 import styles from './footer.module.scss';
 

src/domain/app/header/languageDropdown/LanguageDropdown.tsx

@@ -1,13 +1,12 @@
 import { IconGlobe } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import MenuDropdown, {
   MenuItem,
 } from '../../../../common/components/menuDropdown/MenuDropdown';
 import { SUPPORTED_LANGUAGES } from '../../../../constants';
 import useLocale from '../../../../hooks/useLocale';
-import { i18n } from '../../../../i18n';
+import { i18n, useTranslation } from '../../../../i18n';
 import { Language } from '../../../../types';
 
 const LanguageDropdown: React.FC = () => {

src/domain/app/header/mobileMenu/MobileMenu.tsx

@@ -1,10 +1,9 @@
 import classNames from 'classnames';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { SUPPORTED_LANGUAGES } from '../../../../constants';
 import useLocale from '../../../../hooks/useLocale';
-import { i18n } from '../../../../i18n';
+import { i18n, useTranslation } from '../../../../i18n';
 import { Language } from '../../../../types';
 import styles from './mobileMenu.module.scss';
 

src/domain/app/header/mobileNavbar/MobileNavbar.tsx

@@ -1,9 +1,8 @@
 import { IconCross, IconMenuHamburger } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Link } from '../../../../i18n';
+import { Link, useTranslation } from '../../../../i18n';
 import Container from '../../layout/Container';
 import { ROUTES } from '../../routes/constants';
 import { closeMobileMenu, openMobileMenu } from '../mobileMenu/actions';

src/domain/app/header/navbar/Navbar.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { Link } from '../../../../i18n';
+import { Link, useTranslation } from '../../../../i18n';
 import Container from '../../layout/Container';
 import { ROUTES } from '../../routes/constants';
 import LanguageDropdown from '../languageDropdown/LanguageDropdown';

src/domain/app/layout/PageWrapper.tsx

@@ -1,9 +1,9 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import useLocale from '../../../hooks/useLocale';
+import { useTranslation } from '../../../i18n';
 
 interface Props {
   title?: string;

src/domain/enrolment/CreateEnrolmentPage.tsx

@@ -2,7 +2,6 @@ import { Button, IconArrowLeft, Notification } from 'hds-react';
 import omit from 'lodash/omit';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
@@ -11,7 +10,7 @@ import {
   useEnrolOccurrenceMutation,
 } from '../../generated/graphql';
 import useLocale from '../../hooks/useLocale';
-import { Router } from '../../i18n';
+import { Router, useTranslation } from '../../i18n';
 import { translateValue } from '../../utils/translateUtils';
 import Container from '../app/layout/Container';
 import PageWrapper from '../app/layout/PageWrapper';

src/domain/enrolment/enrolmentForm/EnrolmentForm.tsx

@@ -1,7 +1,6 @@
 import { Formik, Field } from 'formik';
 import { Button } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import ErrorMessage from '../../../common/components/form/ErrorMessage';
 import CheckboxField from '../../../common/components/form/fields/CheckboxField';
@@ -13,10 +12,9 @@ import FormGroup from '../../../common/components/form/FormGroup';
 import { PRIVACY_POLICY_LINKS } from '../../../constants';
 import { Language, StudyLevel } from '../../../generated/graphql';
 import useLocale from '../../../hooks/useLocale';
-import { Link } from '../../../i18n';
+import { useTranslation } from '../../../i18n';
 import { translateValue } from '../../../utils/translateUtils';
 import Container from '../../app/layout/Container';
-import { ROUTES } from '../../app/routes/constants';
 import styles from './enrolmentForm.module.scss';
 import ValidationSchema from './ValidationSchema';
 

src/domain/enrolment/occurrenceTable/OccurrenceTable.tsx

@@ -1,10 +1,10 @@
 import { Notification } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Table from '../../../common/components/table/Table';
 import { OccurrenceFieldsFragment } from '../../../generated/graphql';
 import useLocale from '../../../hooks/useLocale';
+import { useTranslation } from '../../../i18n';
 import formatDate from '../../../utils/formatDate';
 import formatTimeRange from '../../../utils/formatTimeRange';
 import PlaceText from '../../place/placeText/PlaceText';

src/domain/errorPage/ErrorPage.tsx

@@ -1,8 +1,7 @@
 import { Button, IconInfoCircle } from 'hds-react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { Router } from '../../i18n';
+import { Router, useTranslation } from '../../i18n';
 import Container from '../app/layout/Container';
 import { ROUTES } from '../app/routes/constants';
 import styles from './errorPage.module.scss';