feat: changed the way screenreaders read the content of tooltips in c…

…horopleths (#4179)

packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx

@@ -1,6 +1,7 @@
 import { assert } from '@corona-dashboard/common';
 import { isDefined } from 'ts-is-present';
-import { Markdown } from '~/components/markdown';
+import { Markdown, VisuallyHidden } from '~/components';
+import { Box } from '~/components/base';
 import { useIntl } from '~/intl';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { ChoroplethDataItem } from '../logic';
@@ -71,6 +72,9 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(
     formatDateSpan,
   });
 
+  // This line is to make sure the content is readible by screenreaders and does not skip numbers after a new line
+  const ariaContent = content.replace(/(\n|\*)/g, '');
+
   return (
     <TooltipContent
       title={data.featureName}
@@ -87,7 +91,10 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(
           data.dataItem[data.dataConfig.metricProperty] as unknown as number
         }
       >
-        <Markdown content={content} />
+        <VisuallyHidden>{ariaContent}</VisuallyHidden>
+        <Box aria-hidden>
+          <Markdown content={content} />
+        </Box>
       </TooltipSubject>
     </TooltipContent>
   );

packages/app/src/components/choropleth/tooltips/tooltip-content.tsx

@@ -23,15 +23,7 @@ export function TooltipContent(props: IProps) {
       aria-live="polite"
     >
       <TooltipHeader href={link}>
-        <Text
-          variant="choroplethTooltipHeader"
-          /**
-           * If there's no link do not read the tooltip title because a
-           * screenreader will also read the choropleth link which contains the
-           * name of a region.
-           */
-          aria-hidden={link ? 'true' : 'false'}
-        >
+        <Text variant="choroplethTooltipHeader">
           <StyledLocationIcon>
             <Locatie />
           </StyledLocationIcon>

packages/app/src/components/index.ts

@@ -25,3 +25,4 @@ export { ChoroplethLegenda } from './choropleth-legenda';
 export { SEOHead } from './seo-head';
 export { PageKpi } from './page-kpi';
 export { PageBarScale } from './page-barscale';
+export { VisuallyHidden } from './visually-hidden';