From 1b345085fdac03cb706301ce3692f70ec7886fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mattias=20Str=C3=B6mberg?= <mattias.stromberg@sweco.se>
Date: Tue, 26 Nov 2024 07:20:42 +0100
Subject: [PATCH] Add description for image icons related to links in Document
 Handler (#1562)

---
 .../utils/ContentComponentFactory.js               | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js b/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
index bcd8655c1..dfd70b48c 100644
--- a/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
+++ b/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
@@ -498,6 +498,7 @@ export const Video = ({ imgTag, componentId, baseUrl }) => {
     position: imgTag.dataset.imagePosition,
     source: imgTag.dataset.source,
     url: imgTag.src,
+    altValue: imgTag.alt,
     id: `video_${componentId}`,
   };
 
@@ -540,6 +541,7 @@ export const Video = ({ imgTag, componentId, baseUrl }) => {
     <React.Fragment key={videoAttributes.id}>
       <Box sx={getMediaPositionStyle(videoAttributes.position)}>
         <video
+          aria-label={videoAttributes.altValue || ""}
           height={videoAttributes.height}
           width={videoAttributes.width}
           controls={"controls"}
@@ -565,6 +567,7 @@ export const Audio = ({ imgTag, componentId, baseUrl }) => {
     url: imgTag.attributes.getNamedItem("src")?.value,
     width: imgTag.attributes.getNamedItem("data-image-width")?.value,
     id: `audio_${componentId}`,
+    altValue: imgTag.attributes.getNamedItem("alt")?.value,
   };
 
   const getAudioDescription = (audioAttributes) => {
@@ -605,9 +608,9 @@ export const Audio = ({ imgTag, componentId, baseUrl }) => {
   return (
     <Box
       key={audioAttributes.id}
-      sx={this.getMediaPositionStyle(audioAttributes.position)}
+      sx={getMediaPositionStyle(audioAttributes.position)}
     >
-      <audio controls={"controls"}>
+      <audio controls={"controls"} aria-label={audioAttributes.altValue || ""}>
         <source src={imgTag.src} type="audio/mpeg"></source>
       </audio>
       {getAudioDescription(audioAttributes)}
@@ -759,6 +762,7 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
       <Button
         startIcon={
           <OpenInNewIcon
+            titleAccess="Länk som öppnas i ett annat fönster"
             sx={{
               verticalAlign: "middle",
             }}
@@ -799,6 +803,7 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
       <Button
         startIcon={
           <MapIcon
+            titleAccess="Länk som applicerar ändringar på kartan"
             sx={{
               verticalAlign: "middle",
             }}
@@ -826,10 +831,15 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
   };
 
   const getDocumentLink = (headerIdentifier, documentLink, isPrintMode) => {
+    const titleAccess = headerIdentifier
+      ? "Länk till ett visst kapitel i ett dokument"
+      : "Länk till ett dokument";
+
     return (
       <Button
         startIcon={
           <DescriptionIcon
+            titleAccess={titleAccess}
             sx={{
               verticalAlign: "middle",
             }}