fix: use semantic figure and caption tags (#2826)

* fix: use semantic figure and caption tags

---------

Co-authored-by: Ahtesham Quraish <[email protected]>

Author: ahtesham-quraish

frontends/ol-components/src/components/TiptapEditor/extensions/node/Image/ImageWithCaption.tsx

@@ -11,7 +11,7 @@ const ARTICLE_MAX_WIDTH = 890
 const CONTAINER_PADDING = 24
 const WIDE_LAYOUT_MIN_IMG_WIDTH = 900
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.figure(({ theme }) => ({
   position: "relative",
   margin: "2rem auto",
   textAlign: "center",
@@ -148,7 +148,7 @@ const Image = styled.img<{ layout: Layout }>(({ layout }) => ({
   },
 }))
 
-const Caption = styled.p(({ theme }) => ({
+const Caption = styled.figcaption(({ theme }) => ({
   "&&&&&": {
     ...theme.typography.body2,
     color: theme.custom.colors.silverGrayDark,

frontends/ol-components/src/components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx

@@ -33,10 +33,11 @@ const StyledNodeViewWrapper = styled(NodeViewWrapper)<{
     input {
       width: 100%;
       border: none;
-      text-align: center;
+      text-align: left;
       outline: none;
-      padding: 4px;
+      padding: 16px 0;
       font-size: 14px;
+      border-bottom: 1px solid #dde1e6;
     }
 
     p {