moved to objects

Signed-off-by: Lennart Krauch <[email protected]>
inovex · Jan 25, 2024 · 1237b54 · 1237b54
1 parent 8755722
commit 1237b54
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 68 deletions.
diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro
@@ -15,9 +15,9 @@ const content = await getTranslatedContent("Footer", lang!);
 
 <footer>
   <div class="footer__top">
-    <img
-      src="/icons/inovex-outline.svg"
-      alt="inovex"
+    <object
+      type="image/svg+xml"
+      data="/icons/inovex-outline.svg"
       class="footer__logo"
     />
     <div class="footer__left">

diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
@@ -44,7 +44,7 @@ const UserMenu = ({germanLabel, englishLabel, loginLabel, logoutLabel}: UserMenu
   return (
     <div className={classNames("user-menu", {"user-menu--active": isActive})}>
       <button id="user-menu__avatar" className="user-menu__avatar" onClick={() => setIsActive(curr => !curr)}>
-        <img src="/assets/images/Stan_light.svg" alt="Stan Scrumlr" />
+        <object type="image/svg+xml" data="/assets/images/Stan_light.svg" aria-label="Stan Scrumlr" />
       </button>
       <div id="user-menu__dropdown" className="user-menu__dropdown">
         <ul>

diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
@@ -158,14 +158,16 @@ const VideoPlayer = (props: Props) => {
           </li>
         </ul>
       </div>
-      <img
-        src="/assets/backgrounds/bg_cloud_light--left.svg"
-        alt=""
+      <object
+        type="image/svg+xml"
+        data="/assets/backgrounds/bg_cloud_light--left.svg"
+        aria-label=""
         className="choices__cloud choices__cloud--left"
       />
-      <img
-        src="/assets/backgrounds/bg_cloud_light--right.svg"
-        alt=""
+      <object
+        type="image/svg+xml"
+        data="/assets/backgrounds/bg_cloud_light--right.svg"
+        aria-label=""
         className="choices__cloud choices__cloud--right"
       />
     </div>

diff --git a/src/views/AboutUs/AboutUs.astro b/src/views/AboutUs/AboutUs.astro
@@ -24,15 +24,15 @@ const content = await getTranslatedContent("AboutUs_Section", lang!);
     alt={content.imageAlt}
   />
 </div>
-<img
+<object
   class="about-us__background"
-  src="/assets/about/background_light.svg"
-  alt=""
+  data="/assets/about/background_light.svg"
+  type="image/svg+xml"
 />
-<img
+<object
   class="about-us__background-details"
-  src="/assets/about/background_details_light.svg"
-  alt=""
+  data="/assets/about/background_details_light.svg"
+  type="image/svg+xml"
 />
 </div>
 <div class="about-us__cta" id="GetStarted">

diff --git a/src/views/Features/Features.astro b/src/views/Features/Features.astro
@@ -45,10 +45,10 @@ const content = await getTranslatedContent("Features_Section", lang!);
       </div>
     </div>
     <Link href="/new" ariaLabel={content.cta} className="features__cta-button">{content.cta}</Link>
-    <img
+    <object
       class="features__bg-line"
-      src="/assets/features/features_line-bg_light.svg"
-      alt=""
+      data="/assets/features/features_line-bg_light.svg"
+      type="image/svg+xml"
     />
   </div>
 </section>
diff --git a/src/views/Hero/Hero.astro b/src/views/Hero/Hero.astro
@@ -24,41 +24,41 @@ const content = await getTranslatedContent("Hero_Section", lang!);
         </Link>
       </div>
     </div>
-    <img
-      src="/assets/images/reach-new-heights_light.svg"
-      alt={content.imageAlt1}
+    <object
+      type="image/svg+xml"
+      data="/assets/images/reach-new-heights_light.svg"
       class="reach-new-heights__image reach-new-heights__image--light"
     />
-    <img
-      src="/assets/images/reach-new-heights_dark.svg"
-      alt={content.imageAlt1}
+    <object
+      type="image/svg+xml"
+      data="/assets/images/reach-new-heights_dark.svg"
       class="reach-new-heights__image reach-new-heights__image--dark"
     />
     <div class="reach-new-heights__information">
       <div class="reach-new-heights__information-item">
-        <img
-          src="/assets/icons/icon_what-is-it-about_light.svg"
-          alt="What is it about?"
+        <object
+          type="image/svg+xml"
+          data="/assets/icons/icon_what-is-it-about_light.svg"
           class="information-item__icon information-item__icon--light"
         />
-        <img
-          src="/assets/icons/icon_what-is-it-about_dark.svg"
-          alt="What is it about?"
+        <object
+          type="image/svg+xml"
+          data="/assets/icons/icon_what-is-it-about_dark.svg"
           class="information-item__icon information-item__icon--dark"
         />
         <h2>{content.detailsHeader1}</h2>
         <p set:html={content.detailsText1}/>
       </div>
 
       <div class="reach-new-heights__information-item">
-        <img
-          src="/assets/icons/icon_how-can-it-be-used_light.svg"
-          alt="How can it be used?"
+        <object 
+          type="image/svg+xml"
+          data="/assets/icons/icon_how-can-it-be-used_light.svg"
           class="information-item__icon information-item__icon--light"
         />
-        <img
-          src="/assets/icons/icon_how-can-it-be-used_dark.svg"
-          alt="How can it be used?"
+        <object
+          type="image/svg+xml"
+          data="/assets/icons/icon_how-can-it-be-used_dark.svg"
           class="information-item__icon information-item__icon--dark"
         />
         <h2>{content.detailsHeader2}</h2>

diff --git a/src/views/Mobile/Mobile.astro b/src/views/Mobile/Mobile.astro
@@ -8,20 +8,20 @@ const content = await getTranslatedContent("Mobile_Section", lang!);
 
 <section class="mobile__section">
   <div class="mobile__image">
-    <img
+    <object
       class="mobile__stan"
-      src={`/assets/mobile/mobile_light.svg`}
-      alt={content.imageAlt}
+      data="/assets/mobile/mobile_light.svg"
+      type="image/svg+xml"
     />
-    <img
+    <object
       class="mobile__background"
-      src={`/assets/mobile/mobile_background_light.svg`}
-      alt=""
+      data="/assets/mobile/mobile_background_light.svg"
+      type="image/svg+xml"
     />
   </div>
   <div class="mobile__text">
     <h2>{content.header}</h2>
     <p>{content.text}</p>
-    <img class="mobile__dots" src="/assets/mobile/mobile_dots.svg" alt="" />
+    <object class="mobile__dots" data="/assets/mobile/mobile_dots.svg" type="image/svg+xml" />
   </div>
 </section>
diff --git a/src/views/Uniqueness/Uniqueness.astro b/src/views/Uniqueness/Uniqueness.astro
@@ -11,18 +11,18 @@ const content = await getTranslatedContent("Uniqueness_Section", lang!);
   <p>{content.text}</p>
   <div class="uniqueness__section uniqueness__section--left">
     <div class="uniqueness__image">
-      <img
-        src={`/assets/uniqueness/uniqueness_light_0.svg`}
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/uniqueness_light_0.svg"
         class="uniqueness__image-0"
-        alt={content.imageAlt1}
       />
     </div>
     <div class="uniqueness__text">
       <h3>{content.subheader1}</h3>
       <p>{content.details1}</p>
-      <img
-        src={`/assets/uniqueness/dots_light_0.svg`}
-        alt=""
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/dots_light_0.svg"
         class="uniqueness__section-dots--0"
       />
     </div>
@@ -31,34 +31,34 @@ const content = await getTranslatedContent("Uniqueness_Section", lang!);
     <div class="uniqueness__text">
       <h3>{content.subheader2}</h3>
       <p>{content.details2}</p>
-      <img
-        src={`/assets/uniqueness/dots_light_1.svg`}
-        alt=""
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/dots_light_1.svg"
         class="uniqueness__section-dots--1"
       />
     </div>
     <div class="uniqueness__image">
-      <img
-        src={`/assets/uniqueness/uniqueness_light_1.svg`}
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/uniqueness_light_1.svg"
         class="uniqueness__image-1"
-        alt={content.imageAlt2}
       />
     </div>
   </div>
   <div class="uniqueness__section uniqueness__section--left">
     <div class="uniqueness__image">
-      <img
-        src={`/assets/uniqueness/uniqueness_light_2.svg`}
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/uniqueness_light_2.svg"
         class="uniqueness__image-2"
-        alt={content.imageAlt3}
       />
     </div>
     <div class="uniqueness__text">
       <h3>{content.subheader3}</h3>
       <p>{content.details3}</p>
-      <img
-        src={`/assets/uniqueness/dots_light_2.svg`}
-        alt=""
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/dots_light_2.svg"
         class="uniqueness__section-dots--2"
       />
     </div>
@@ -67,17 +67,17 @@ const content = await getTranslatedContent("Uniqueness_Section", lang!);
     <div class="uniqueness__text">
       <h3>{content.subheader4}</h3>
       <p>{content.details4}</p>
-      <img
-        src={`/assets/uniqueness/dots_light_3.svg`}
-        alt=""
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/dots_light_3.svg"
         class="uniqueness__section-dots--3"
       />
     </div>
     <div class="uniqueness__image">
-      <img
-        src={`/assets/uniqueness/uniqueness_light_3.svg`}
+      <object
+        type="image/svg+xml"
+        data="/assets/uniqueness/uniqueness_light_3.svg"
         class="uniqueness__image-3"
-        alt={content.imageAlt4}
       />
     </div>
   </div>