Styling fixes to table and list components in strangler-fig-migration-complete-guide article

Author: webstackdev

src/components/Troubleshooter/index.astro

@@ -1,4 +1,6 @@
 ---
+import { randomUUID } from 'node:crypto'
+
 import Icon from '@components/Icon/index.astro'
 
 type TroubleshooterItem = {
@@ -28,6 +30,8 @@ const sectionMeta = {
   fixes: { icon: 'wrench', color: 'success', label: 'Fix' },
 } satisfies Record<keyof Props['items'], { icon: string; color: string; label: string }>
 
+const sectionIdBase = `troubleshooter-${randomUUID()}`
+
 function getSectionClassNames(color: string) {
   return {
     headerBg: `bg-${color}-inverse`,
@@ -49,7 +53,7 @@ function getSectionClassNames(color: string) {
     <div class="flex flex-col gap-3">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-content-offset">Troubleshooting</p>
-        <div class="hidden flex-wrap gap-2 text-xs sm:flex">
+        <div class="hidden flex-wrap gap-2 text-xs sm:flex" aria-hidden="true">
           <span class="rounded-full bg-danger-inverse px-3 py-1 font-semibold text-danger">Build Integrity</span>
           <span class="rounded-full bg-warning-inverse px-3 py-1 font-semibold text-warning">Root Cause</span>
           <span class="rounded-full bg-info-inverse px-3 py-1 font-semibold text-info">Verification</span>
@@ -65,6 +69,7 @@ function getSectionClassNames(color: string) {
   <div class="flex flex-col">
     {([['symptoms', 'causes'], ['diagnosis', 'fixes']] as const).map((pair, rowIndex) => {
       const cards = pair.map((key) => ({
+        key,
         meta: sectionMeta[key],
         items: items[key],
       }))
@@ -76,23 +81,29 @@ function getSectionClassNames(color: string) {
         ]}>
           {cards.map((card, colIndex) => {
             const colorClasses = getSectionClassNames(card.meta.color)
+            const sectionHeadingId = `${sectionIdBase}-${card.key}`
 
             return (
-              <article class:list={[
+              <section
+                aria-labelledby={sectionHeadingId}
+                class:list={[
                 'flex flex-1 flex-col',
                 colIndex === 0 ? 'md:border-r border-trim' : '',
                 colIndex === 0 ? 'bg-content-inverse' : 'bg-page-base',
-              ]}>
+                ]}>
                 <div class:list={[
                   'flex items-center gap-3 border-b border-t-4 border-trim-offset px-6 py-3',
                   colorClasses.headerBg,
                   colorClasses.headerTopBorder,
                 ]}>
                   <Icon icon={card.meta.icon} size={5} color={card.meta.color} />
-                  <h5 class:list={[
+                  <h4
+                    class:list={[
                     'm-0 text-sm font-bold uppercase tracking-[0.12em]',
                     colorClasses.headerText,
-                  ]}>{card.meta.label}</h5>
+                    ]}
+                    id={sectionHeadingId}
+                  >{card.meta.label}</h4>
                 </div>
                 <div class="grow px-6 py-5 text-base text-content">
                   {!card.items.lead && card.items.items.length === 0 ? (
@@ -117,14 +128,14 @@ function getSectionClassNames(color: string) {
                           <span class:list={[
                             'mt-1.5 flex h-2 w-2 shrink-0 rounded-full',
                             colorClasses.markerBg,
-                          ]} />
+                          ]} aria-hidden="true" />
                           <span set:html={item.text} />
                         </li>
                       ))}
                     </ul>
                   )}
                 </div>
-              </article>
+              </section>
             )
           })}
         </div>

src/content/articles/strangler-fig-migration-complete-guide/index.mdx

@@ -13,7 +13,7 @@ import shadowTrafficDiagram from "./diagrams/shadow-traffic-architecture-for-par
 
 Big-bang migrations fail at alarming rates. Large IT transformation projects routinely exceed budgets and timelines - McKinsey research found that large projects run 45% over budget and 7% over time while delivering 56% less value than predicted. The fundamental problem isn't the new technology or the team's capabilities - it's the validation gap. Teams build entire replacement systems in isolation, then discover on cutover day that their assumptions about the legacy system's behavior were wrong.
 
-The strangler fig pattern offers a different approach: incremental replacement with continuous validation. But the pattern alone isn't enough. The real power comes from treating migration as an observability problem first and a development problem second. When you can prove that your new service behaves identically to the legacy system __before__ any traffic shifts, migration becomes a series of low-risk deployments rather than a high-stakes gamble.
+The strangler fig pattern offers a different approach: incremental replacement with continuous validation. But the pattern alone isn't enough. <Highlighter>The real power comes from treating migration as an observability problem first and a development problem second.</Highlighter> When you can prove that your new service behaves identically to the legacy system _before_ any traffic shifts, migration becomes a series of low-risk deployments rather than a high-stakes gamble.
 
 ## Why the Strangler Fig Pattern Works
 
@@ -22,8 +22,13 @@ The strangler fig pattern, named after tropical fig trees that gradually envelop
 This approach succeeds where big-bang rewrites fail because it maintains continuous validation against production reality. You're not guessing whether your new authentication service handles edge cases correctly - you're proving it with real requests.
 
 <Table
-  variant="vertical-column-delineation-table"
+  variant="grid-and-accent-header-table"
+  fullWidth={false}
+  classes={{
+    tbody: '!text-content',
+  }}
   content={{
+    figure: 'Migration approach comparison',
     thead: {
       th: ['Aspect', 'Big-Bang Rewrite', 'Strangler Fig Migration'],
     },
@@ -51,7 +56,6 @@ This approach succeeds where big-bang rewrites fail because it maintains continu
         },
       ],
     },
-    figure: 'Migration approach comparison',
   }}
 />
 
@@ -123,7 +127,12 @@ Once shadow testing proves your new service matches legacy behavior, you're read
 A progressive traffic shift schedule balances validation time against migration velocity. Moving too fast risks missing problems that only appear under sustained load. Moving too slowly extends the period where you're maintaining two systems.
 
 <Table
-  variant="vertical-column-delineation-table"
+  variant="criteria-highlight-table"
+  fullWidth={false}
+  classes={{
+    tbody:
+      '[&_td:nth-child(2)]:text-center',
+  }}
   content={{
     thead: {
       th: ['Phase', 'New Service Traffic', 'Duration', 'Success Criteria'],
@@ -161,7 +170,8 @@ The automation layer monitors these criteria continuously and triggers rollback
 Effective rollback triggers balance sensitivity against false positives:
 
 <Table
-  variant="vertical-column-delineation-table"
+  variant="numbered-review-table"
+  fullWidth={false}
   content={{
     thead: {
       th: ['Trigger', 'Threshold', 'Rationale'],