fix: improve accessibility of highlight component

The grouping of the different plots was not clear to the screen reader. This was fixed by wrapping highlight component with section tag and by adding role="heading" for the title
City-of-Helsinki · Apr 15, 2024 · e4ef280 · e4ef280
1 parent 74d0d9f
commit e4ef280
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 19 deletions.
diff --git a/src/common/components/highlight/Highlight.tsx b/src/common/components/highlight/Highlight.tsx
@@ -5,25 +5,38 @@ import styles from './highlight.module.scss';
 
 interface HighlightProps {
   className?: string;
+  headingLevel?: number;
   icon: React.ReactNode;
   text: string | React.ReactNode;
   title: string;
 }
 
 const Highlight: React.FC<HighlightProps> = ({
   className,
+  headingLevel = 2,
   icon,
   text,
   title,
 }) => {
+  const titleParts = title.split('\n');
+
   return (
-    <div className={classNames(styles.highlight, className)}>
+    <section className={classNames(styles.highlight, className)}>
       <div className={styles.iconWrapper} aria-hidden={true}>
         {icon}
       </div>
-      <div className={styles.title}>{title}</div>
+      <div
+        className={styles.title}
+        role="heading"
+        aria-level={headingLevel}
+        aria-label={titleParts.join(' ')}
+      >
+        {titleParts.map((part, index) => (
+          <span key={index}>{part}</span>
+        ))}
+      </div>
       <div className={styles.text}>{text}</div>
-    </div>
+    </section>
   );
 };
 

diff --git a/src/common/components/highlight/highlight.module.scss b/src/common/components/highlight/highlight.module.scss
@@ -29,6 +29,7 @@
     text-align: center;
     white-space: pre-line;
     line-height: var(--lineheight-m);
+    display: grid;
   }
 
   .text {

diff --git a/src/domain/help/pages/platformPage/PlatformPage.tsx b/src/domain/help/pages/platformPage/PlatformPage.tsx
@@ -48,21 +48,25 @@ const PlatformPage: React.FC = () => {
       <h2>{t('helpPage.platformPage.titleServiceHighlights')}</h2>
       <div className={styles.highlights}>
         <Highlight
+          headingLevel={3}
           icon={<IconCogwheel />}
           text={t('helpPage.platformPage.textEventManagement')}
           title={t('helpPage.platformPage.titleEventManagement')}
         />
         <Highlight
+          headingLevel={3}
           icon={<IconCloud />}
           text={t('helpPage.platformPage.textApi')}
           title={t('helpPage.platformPage.titleApi')}
         />
         <Highlight
+          headingLevel={3}
           icon={<IconPhone />}
           text={t('helpPage.platformPage.textSupport')}
           title={t('helpPage.platformPage.titleSupport')}
         />
         <Highlight
+          headingLevel={3}
           icon={<IconCalendar />}
           text={t('helpPage.platformPage.textRegistration')}
           title={t('helpPage.platformPage.titleRegistration')}

diff --git a/src/domain/landingPage/LandingPage.tsx b/src/domain/landingPage/LandingPage.tsx
@@ -6,7 +6,6 @@ import myHelsinkiImage from '../../assets/images/jpg/myhelsinki-card.jpg';
 import tapahtumatImage from '../../assets/images/jpg/tapahtumat-hel-card.jpg';
 import Highlight from '../../common/components/highlight/Highlight';
 import useLocale from '../../hooks/useLocale';
-import getValue from '../../utils/getValue';
 import Container from '../app/layout/container/Container';
 import MainContent from '../app/layout/mainContent/MainContent';
 import PageWrapper from '../app/layout/pageWrapper/PageWrapper';
@@ -64,25 +63,16 @@ const LandingPage: React.FC = () => {
               <ServiceCard
                 backgroundColor="metro"
                 backgroundImageUrl={myHelsinkiImage}
-                description={getValue(
-                  t('landingPage.myHelsinkiDescription'),
-                  undefined
-                )}
+                description={t('landingPage.myHelsinkiDescription')}
                 href={myHelsinkiRoute}
                 title={t('landingPage.myHelsinkiTitle')}
               />
               <ServiceCard
                 backgroundColor="suomenlinna"
                 backgroundImageUrl={tapahtumatImage}
-                description={getValue(
-                  t('landingPage.tapahtumatHelDescription'),
-                  undefined
-                )}
+                description={t('landingPage.tapahtumatHelDescription')}
                 href={tapahtumatHelRoute}
-                imageAuthor={getValue(
-                  t('landingPage.tapahtumatHelImageAuthor'),
-                  undefined
-                )}
+                imageAuthor={t('landingPage.tapahtumatHelImageAuthor')}
                 title={t('landingPage.tapahtumatHelTitle')}
               />
             </div>

diff --git a/src/domain/landingPage/__tests__/LangingPage.test.tsx b/src/domain/landingPage/__tests__/LangingPage.test.tsx
@@ -19,9 +19,9 @@ test('should show correct title', async () => {
 test('should render landing page', async () => {
   render(<LandingPage />);
 
-  screen.getByText('35 000 tapahtumaa vuodessa');
-  screen.getByText('25 tapahtumasivustoa');
-  screen.getByText('60 000 riviä koodia');
+  screen.getByRole('heading', { name: '35 000 tapahtumaa vuodessa' });
+  screen.getByRole('heading', { name: '25 tapahtumasivustoa' });
+  screen.getByRole('heading', { name: '60 000 riviä koodia' });
 
   screen.getByRole('link', {
     name: new RegExp(translations.landingPage.myHelsinkiTitle),