fixed a11y Caption Issues (#341)

news/341.bugfix

@@ -0,0 +1 @@
+Fixed the Caption for Images, Video Blocks etc. to use semantically correct HTML Structure @Molochem

src/components/Caption/Caption.jsx

@@ -19,15 +19,15 @@ const Caption = ({ as = 'figcaption', title, description, credit }) => {
 
   return (
     <As>
-      {title && <div className="title">{title}</div>}
+      {title && <h2 className="title">{title}</h2>}
       {description && (
-        <div className="description">
+        <p className="description">
           {description.split('\n').map((line, index) => (
-            <div key={index}>{line || '\u00A0'}</div>
+            <p key={index}>{line || '\u00A0'}</p>
           ))}
-        </div>
+        </p>
       )}
-      {credit && <div className="credits">{credit}</div>}
+      {credit && <p className="credits">{credit}</p>}
     </As>
   );
 };

src/theme/blocks/_image.scss

@@ -171,7 +171,7 @@ figcaption {
   }
 
   .description {
-    div,
+    p,
     a {
       @include marginal-description();
     }