[AX] <table> should be taken out of <figure> and the <figcaption> should become the table’s <caption>

src/components/ContentNode.vue

@@ -17,7 +17,7 @@ import CodeVoice from './ContentNode/CodeVoice.vue';
 import DictionaryExample from './ContentNode/DictionaryExample.vue';
 import EndpointExample from './ContentNode/EndpointExample.vue';
 import Figure from './ContentNode/Figure.vue';
-import FigureCaption from './ContentNode/FigureCaption.vue';
+import Caption from './ContentNode/Caption.vue';
 import InlineImage from './ContentNode/InlineImage.vue';
 import Reference from './ContentNode/Reference.vue';
 import Table from './ContentNode/Table.vue';
@@ -213,9 +213,21 @@ function renderNode(createElement, references) {
     }
   };
 
+  const placeCaption = (rawContent, { abstract = [], title, tag }) => {
+    const content = [rawContent];
+    if (!abstract.length) return content;
+
+    // if there is a `title`, it should be above, otherwise below
+    content.splice(title ? 0 : 1, 0,
+      createElement(Caption, {
+        props: { title, centered: !title, tag },
+      }, renderChildren(abstract)));
+    return content;
+  };
+
   const renderFigure = ({
     metadata: {
-      abstract = [],
+      abstract,
       anchor,
       title,
       ...metadata
@@ -226,14 +238,12 @@ function renderNode(createElement, references) {
       ...rest,
       metadata,
     };
-    const figureContent = [renderChildren([node])];
-    if ((title && abstract.length) || abstract.length) {
-      // if there is a `title`, it should be above, otherwise below
-      figureContent.splice(title ? 0 : 1, 0,
-        createElement(FigureCaption, {
-          props: { title, centered: !title },
-        }, renderChildren(abstract)));
-    }
+    const figureContent = placeCaption(renderChildren([node]), {
+      title,
+      abstract,
+      tag: 'figcaption',
+    });
+
     return createElement(Figure, { props: { anchor } }, figureContent);
   };
 
@@ -297,18 +307,28 @@ function renderNode(createElement, references) {
         renderChildren(node.inlineContent)
       ));
     }
-    case BlockType.table:
+    case BlockType.table: {
+      let tableContent = renderTableChildren(
+        node.rows, node.header, node.extendedData, node.alignments,
+      );
+
       if (node.metadata && node.metadata.anchor) {
-        return renderFigure(node);
+        tableContent = placeCaption(tableContent, {
+          title: node.metadata.title,
+          abstract: node.metadata.abstract,
+          tag: 'caption',
+        });
       }
 
-      return createElement(Table, {
-        props: {
-          spanned: !!node.extendedData,
+      return createElement(
+        Table,
+        {
+          attrs: { id: node.metadata && node.metadata.anchor },
+          props: { spanned: !!node.extendedData },
         },
-      }, (
-        renderTableChildren(node.rows, node.header, node.extendedData, node.alignments)
-      ));
+        tableContent,
+      );
+    }
     case BlockType.termList:
       return createElement('dl', {}, node.items.map(({ term, definition }) => [
         createElement('dt', {}, (

src/components/ContentNode/FigureCaption.vue → src/components/ContentNode/Caption.vue

@@ -9,19 +9,19 @@
 -->
 
 <template>
-  <figcaption class="caption" :class="{ centered }">
+  <component :is="tag" class="caption" :class="{ centered }">
     <template v-if="title">
       <strong>{{ title }}</strong>&nbsp;<slot />
     </template>
     <template v-else>
       <slot />
     </template>
-  </figcaption>
+  </component>
 </template>
 
 <script>
 export default {
-  name: 'FigureCaption',
+  name: 'Caption',
   props: {
     title: {
       type: String,
@@ -31,6 +31,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    tag: {
+      type: String,
+      required: true,
+      validator: v => new Set(['caption', 'figcaption']).has(v),
+    },
   },
 };
 </script>
@@ -39,12 +44,16 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .caption {
-  @include font-styles(documentation-figcaption);
+  @include font-styles(documentation-caption);
 
   &:last-child {
     margin-top: var(--spacing-stacked-margin-large);
   }
 
+  &:has(+ *) {
+    margin-bottom: var(--spacing-stacked-margin-large);
+  }
+
   &.centered {
     text-align: center;
   }

src/components/ContentNode/Figure.vue

@@ -23,9 +23,8 @@ export default {
   },
 };
 </script>
-
 <style scoped lang="scss">
-/deep/ figcaption + * {
-  margin-top: 1rem;
+/deep/ figcaption {
+  --spacing-stacked-margin-large: 1rem;
 }
 </style>

src/styles/core/typography/_font-styles.scss

@@ -153,7 +153,7 @@ $font-styles: (
   documentation-code-listing-number: (
     large: 12_18_normal_compact_mono,
   ),
-  documentation-figcaption: (
+  documentation-caption: (
     large: 14_21,
   ),
   documentation-declaration-link: (