Fix different spec image caption in website

website/screens/components/accordion/specs/AccordionSpecsPage.tsx

@@ -19,8 +19,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Component design specifications">
-        <Image src={accordionSpecs} alt="Component design specifications" />
+      <Figure caption="Accordion design specifications">
+        <Image src={accordionSpecs} alt="Accordion design specifications" />
       </Figure>
     ),
   },
@@ -33,8 +33,8 @@ const sections = [
           interaction. States: <strong>enabled</strong>, <strong>hover</strong>,{" "}
           <strong>focus</strong> and <strong>disabled</strong>.
         </DxcParagraph>
-        <Figure caption="Accordion component states">
-          <Image src={accordionStates} alt="Accordion component states" />
+        <Figure caption="Accordion states">
+          <Image src={accordionStates} alt="Accordion states" />
         </Figure>
       </>
     ),

website/screens/components/accordion/usage/AccordionUsagePage.tsx

@@ -78,11 +78,8 @@ const sections = [
               Accordions can be placed with main page content or placed inside
               of a container such as a side panel or tile.
             </DxcParagraph>
-            <Figure caption="Component placement examples">
-              <Image
-                src={accordionPlacement}
-                alt="Component placement examples"
-              />
+            <Figure caption="Accordion placement">
+              <Image src={accordionPlacement} alt="Accordion placement" />
             </Figure>
           </>
         ),
@@ -96,21 +93,21 @@ const sections = [
               header. This allows for the title on the start side to align with
               other type elements in the layout.
             </DxcParagraph>
-            <Image
-              src={accordionAlignment}
-              alt="Component elements alignment"
-            />
-            <DxcParagraph>
-              <em>
-                <strong>Left</strong>. Place chevron icon at the end of the
-                accordion header.
-              </em>
-            </DxcParagraph>
-            <DxcParagraph>
-              <em>
-                <strong>Right</strong>. Don’t place caret icon on the left.
-              </em>
-            </DxcParagraph>
+            <Figure
+              caption={
+                <>
+                  <DxcParagraph>
+                    <strong>Left</strong>. Place chevron icon at the end of the
+                    accordion header.
+                  </DxcParagraph>
+                  <DxcParagraph>
+                    <strong>Right</strong>. Don’t place caret icon on the left.
+                  </DxcParagraph>
+                </>
+              }
+            >
+              <Image src={accordionAlignment} alt="Accordion alignment" />
+            </Figure>
           </>
         ),
       },
@@ -153,19 +150,22 @@ const sections = [
             </DxcBulletedList>
           </DxcFlex>
         </DxcBulletedList>
-        <Image src={accordionTriggers} alt="Accordion trigger usage" />
-        <DxcParagraph>
-          <em>
-            <strong>Left</strong>. Trigger collapsed and expanded states when
-            clicking on either the header or icon.
-          </em>
-        </DxcParagraph>
-        <DxcParagraph>
-          <em>
-            <strong>Right</strong>. Leave the header without caret or use a
-            button to trigger the expand/collapse action.
-          </em>
-        </DxcParagraph>
+        <Figure
+          caption={
+            <>
+              <DxcParagraph>
+                <strong>Left</strong>. Trigger collapsed and expanded states
+                when clicking on either the header or icon.
+              </DxcParagraph>
+              <DxcParagraph>
+                <strong>Right</strong>. Leave the header without caret or use a
+                button to trigger the expand/collapse action.
+              </DxcParagraph>
+            </>
+          }
+        >
+          <Image src={accordionTriggers} alt="Accordion trigger usage" />
+        </Figure>
       </>
     ),
     subSections: [
@@ -205,8 +205,8 @@ const sections = [
           </em>
         </DxcParagraph>
         <DxcParagraph>
-          <Figure caption="Component placement examples">
-            <Image src={accordionMultiExpand} alt="image" />
+          <Figure caption="Accordion group placement">
+            <Image src={accordionMultiExpand} alt="Accordion group placement" />
           </Figure>
         </DxcParagraph>
         <DxcParagraph>
@@ -227,19 +227,22 @@ const sections = [
           and every custom feature that can be supported inside the element
           container.
         </DxcParagraph>
-        <Image src={accordionContent} alt="Nesting and icon usage examples" />
-        <DxcParagraph>
-          <em>
-            <strong>Left</strong>. Nesting is allowed. Use in parent accordion
-            Open Sans Semibold.
-          </em>
-        </DxcParagraph>
-        <DxcParagraph>
-          <em>
-            <strong>Right</strong>. Icons can be used as a complement to the
-            header label.
-          </em>
-        </DxcParagraph>
+        <Figure
+          caption={
+            <>
+              <DxcParagraph>
+                <strong>Left</strong>. Nesting is allowed. Use in parent
+                accordion Open Sans Semibold.
+              </DxcParagraph>
+              <DxcParagraph>
+                <strong>Right</strong>. Icons can be used as a complement to the
+                header label.
+              </DxcParagraph>
+            </>
+          }
+        >
+          <Image src={accordionContent} alt="Nesting and icon usage examples" />
+        </Figure>
       </>
     ),
   },

website/screens/components/alert/specs/AlertSpecsPage.tsx

@@ -19,8 +19,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Component design specifications">
-        <Image src={AlertSpecsImage} alt="Component design specifications" />
+      <Figure caption="Alert design specifications">
+        <Image src={AlertSpecsImage} alt="Alert design specifications" />
       </Figure>
     ),
   },
@@ -33,8 +33,8 @@ const sections = [
           <strong>enabled</strong>, <strong>hover</strong>,{" "}
           <strong>focus</strong>, and <strong>active</strong>.
         </DxcParagraph>
-        <Figure caption="Alert action specs">
-          <Image src={AlertStatesImage} alt="Alert action specs" />
+        <Figure caption="Alert states">
+          <Image src={AlertStatesImage} alt="Alert states" />
         </Figure>
       </>
     ),

website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx

@@ -1,5 +1,4 @@
 import {
-  DxcLink,
   DxcBulletedList,
   DxcParagraph,
   DxcFlex,

website/screens/components/box/specs/BoxSpecsPage.tsx

@@ -15,8 +15,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Component design specifications">
-        <Image src={boxSpecs} alt="Component design specifications" />
+      <Figure caption="Box design specifications">
+        <Image src={boxSpecs} alt="Box design specifications" />
       </Figure>
     ),
   },

website/screens/components/button/specs/ButtonSpecsPage.tsx

@@ -19,11 +19,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Design specifications for button component">
-        <Image
-          src={buttonSpecsImage}
-          alt="Design specifications for button component"
-        />
+      <Figure caption="Button design specifications">
+        <Image src={buttonSpecsImage} alt="Button design specifications" />
       </Figure>
     ),
   },
@@ -41,8 +38,8 @@ const sections = [
           <strong>focus</strong>, <strong>active</strong> and{" "}
           <strong>disabled</strong>.
         </DxcParagraph>
-        <Figure caption="Button component states">
-          <Image src={buttonStatesImage} alt="Button component states" />
+        <Figure caption="Button states">
+          <Image src={buttonStatesImage} alt="Button states" />
         </Figure>
       </>
     ),

website/screens/components/card/specs/CardSpecsPage.tsx

@@ -31,8 +31,8 @@ const sections = [
           Component states: <strong>enabled</strong>, <strong>hover</strong> and{" "}
           <strong>focus</strong>.
         </DxcParagraph>
-        <Figure caption="Card component states">
-          <Image src={statesImage} alt="Card component states" />
+        <Figure caption="Card states">
+          <Image src={statesImage} alt="Card states" />
         </Figure>
       </>
     ),

website/screens/components/checkbox/specs/CheckboxSpecsPage.tsx

@@ -19,8 +19,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Component design specifications">
-        <Image src={checkboxSpecs} alt="Component design specifications" />
+      <Figure caption="Checkbox design specifications">
+        <Image src={checkboxSpecs} alt="Checkbox design specifications" />
       </Figure>
     ),
   },
@@ -37,8 +37,8 @@ const sections = [
           <strong>selected focus</strong> and{" "}
           <strong>selected disabled.</strong>
         </DxcParagraph>
-        <Figure caption="Checkbox component states.">
-          <Image src={checkboxStates} alt="Checkbox component states." />
+        <Figure caption="Checkbox states">
+          <Image src={checkboxStates} alt="Checkbox states" />
         </Figure>
       </>
     ),

website/screens/components/chip/specs/ChipSpecsPage.tsx

@@ -19,8 +19,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Component chip design specifications">
-        <Image src={specsImage} alt="Component chip design specifications" />
+      <Figure caption="Chip design specifications">
+        <Image src={specsImage} alt="Chip design specifications" />
       </Figure>
     ),
   },
@@ -32,8 +32,8 @@ const sections = [
           The chip component container states are <strong>enabled</strong> and{" "}
           <strong>disabled</strong>:
         </DxcParagraph>
-        <Figure caption="Chip container states">
-          <Image src={statesImage} alt="Chip container states" />
+        <Figure caption="Chip states">
+          <Image src={statesImage} alt="Chip states" />
         </Figure>
         <DxcParagraph>
           The chip action item has the following states:{" "}
@@ -54,7 +54,7 @@ const sections = [
     title: "Anatomy",
     content: (
       <>
-        <Image src={anatomyImage} alt="Component anatomy" />
+        <Image src={anatomyImage} alt="Chip anatomy" />
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>Container</DxcBulletedList.Item>
           <DxcBulletedList.Item>

website/screens/components/date-input/specs/DateInputSpecsPage.tsx

@@ -52,8 +52,8 @@ const sections = [
   {
     title: "Date picker dialog",
     content: (
-      <Figure caption="Structure and spacing for the date picker pop-up">
-        <Image src={datePopupSpecs} alt="Date specifications for picker" />
+      <Figure caption="Date picker design specifications">
+        <Image src={datePopupSpecs} alt="Date picker design specifications" />
       </Figure>
     ),
   },
@@ -69,11 +69,8 @@ const sections = [
               <strong>focus</strong>, <strong>error</strong>, and{" "}
               <strong>disabled</strong>.
             </DxcParagraph>
-            <Figure caption="Examples of the date input states">
-              <Image
-                src={dateSpecsStates}
-                alt="Examples of the date input states"
-              />
+            <Figure caption="Date input states">
+              <Image src={dateSpecsStates} alt="Date input states" />
             </Figure>
           </>
         ),
@@ -88,11 +85,8 @@ const sections = [
               <strong>selected</strong>, <strong>today</strong> and{" "}
               <strong>disabled</strong>.
             </DxcParagraph>
-            <Figure caption="Examples of a calendar day states">
-              <Image
-                src={dateSpecsPopup}
-                alt="Examples of a calendar day states"
-              />
+            <Figure caption="Calendar day states">
+              <Image src={dateSpecsPopup} alt="Calendar day states" />
             </Figure>
           </>
         ),
@@ -103,7 +97,7 @@ const sections = [
     title: "Anatomy",
     content: (
       <>
-        <Image src={dateSpecsAnatomy} alt="Component anatomy example" />
+        <Image src={dateSpecsAnatomy} alt="Date input anatomy" />
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>Label</DxcBulletedList.Item>
           <DxcBulletedList.Item>

website/screens/components/dialog/specs/DialogSpecsPage.tsx

@@ -18,22 +18,16 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Design specifications for dialog component">
-        <Image
-          src={dialogSpecsImage}
-          alt="Design specifications for dialog component"
-        />
+      <Figure caption="Dialog design specifications">
+        <Image src={dialogSpecsImage} alt="Dialog design specifications" />
       </Figure>
     ),
   },
   {
     title: "Anatomy",
     content: (
       <>
-        <Image
-          src={dialogAnatomyImage}
-          alt="Design specifications for dialog component"
-        />
+        <Image src={dialogAnatomyImage} alt="Dialog anatomy" />
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>Dialog container</DxcBulletedList.Item>
           <DxcBulletedList.Item>Title</DxcBulletedList.Item>

website/screens/components/dropdown/specs/DropdownSpecsPage.tsx

@@ -19,8 +19,8 @@ const sections = [
   {
     title: "Specifications",
     content: (
-      <Figure caption="Dropdown component specifications">
-        <Image src={specsImage} alt="Dropdown component specifications" />
+      <Figure caption="Dropdown design specifications">
+        <Image src={specsImage} alt="Dropdown design specifications" />
       </Figure>
     ),
   },
@@ -36,11 +36,8 @@ const sections = [
               <strong>focus</strong>, <strong>active</strong> and{" "}
               <strong>disabled</strong>.
             </DxcParagraph>
-            <Figure caption="Example of the dropdown component states">
-              <Image
-                src={statesImage}
-                alt="Example of the dropdown component states"
-              />
+            <Figure caption="Dropdown button states">
+              <Image src={statesImage} alt="Dropdown button states" />
             </Figure>
           </>
         ),
@@ -53,11 +50,8 @@ const sections = [
               States: <strong>Enabled</strong>, <strong>hover</strong>,{" "}
               <strong>focus</strong> and <strong>selected</strong>.
             </DxcParagraph>
-            <Figure caption="Example of the option list states">
-              <Image
-                src={optionListStatesImage}
-                alt="Example of the option list states"
-              />
+            <Figure caption="Option list states">
+              <Image src={optionListStatesImage} alt="Option list states" />
             </Figure>
           </>
         ),