@cdc/chart 4.26.3 → 4.26.4

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.3",
+  "version": "4.26.4",
   "description": "React component for visualizing tabular data in various types of charts",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.3",
+    "@cdc/core": "^4.26.4",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -34,7 +34,7 @@
     "d3-format": "^3.1.2",
     "d3-sankey": "^0.12.3",
     "d3-time-format": "^4.1.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.4.0",
     "html-react-parser": "^5.2.3",
     "js-base64": "^2.5.2",
     "lodash": "^4.17.23",
@@ -56,7 +56,7 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
   },
-  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d",
   "main": "dist/cdcchart",
   "moduleName": "CdcChart",
   "peerDependencies": {

package/src/CdcChartComponent.tsx

@@ -540,7 +540,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
         ...horizontalYAxisSource,
         label: runtimeYAxisLabel ?? horizontalYAxisSource?.label
       }
-      newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
@@ -1304,7 +1303,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
             }
             bodySubtext={
               processedDescription && config.visualizationType !== 'Spark Line' ? (
-                <div className={getChartSubTextClasses().join(' ')}>{parse(processedDescription)}</div>
+                <div className={`cove-prose ${getChartSubTextClasses().join(' ')}`}>{parse(processedDescription)}</div>
               ) : null
             }
             bodyFooter={
@@ -1391,13 +1390,17 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     )}
                 {visibleAnnotations.length > 0 && <Annotation.Dropdown />}
                 {processedLegacyFootnotes && (
-                  <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
+                  <section className='footnotes cove-prose pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
                 )}
               </>
             }
             header={isTp5Treatment ? null : chartTitle}
             messageIsIntroText={config.visualizationType !== 'Spark Line' && !!processedIntroText}
-            message={config.visualizationType !== 'Spark Line' && processedIntroText ? parse(processedIntroText) : null}
+            message={
+              config.visualizationType !== 'Spark Line' && processedIntroText ? (
+                <div className='cove-prose'>{parse(processedIntroText)}</div>
+              ) : null
+            }
             footer={
               <FootnotesStandAlone
                 config={configObj.footnotes}
@@ -1521,7 +1524,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         interactionLabel={interactionLabel}
                       />
                       {processedIntroText && (
-                        <section className='introText' style={{ padding: '0px 0 35px' }}>
+                        <section className='introText cove-prose' style={{ padding: '0px 0 35px' }}>
                           {parse(processedIntroText)}
                         </section>
                       )}
@@ -1529,7 +1532,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                       </div>
                       {processedDescription && (
-                        <div className='subtext' style={{ padding: '35px 0 1.5rem' }}>
+                        <div className='subtext cove-prose' style={{ padding: '35px 0 1.5rem' }}>
                           {parse(processedDescription)}
                         </div>
                       )}

package/src/_stories/{Chart.HTMLInDataTable.stories.tsx → Chart.HTMLInDataTable.smoke.stories.tsx}

@@ -493,6 +493,16 @@ export const PieChartWithHTMLFootnotes: Story = {
           Footnote: '<strong>7 states</strong> with 60-79% coverage<br>Target: Move to <em>high category</em>'
         }
       ],
+      xAxis: {
+        label: 'Coverage Category',
+        dataKey: 'Category',
+        type: 'categorical'
+      },
+      yAxis: {
+        label: 'Percentage',
+        dataKey: 'Percentage',
+        type: 'linear'
+      },
       series: [
         {
           dataKey: 'Percentage',

package/src/_stories/Chart.Minimal.smoke.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChart'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
+import { expect } from 'storybook/test'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Minimal Config',
+  component: Chart
+}
+
+export default meta
+type Story = StoryObj<typeof Chart>
+
+export const Minimal_Bar_Chart: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Minimal Chart')
+    expect(canvasElement.textContent).toContain('A')
+  }
+}

package/src/_stories/{Chart.SmallMultiples.stories.tsx → Chart.SmallMultiples.smoke.stories.tsx}

@@ -5,7 +5,8 @@ import smallMultiplesBigDataBars from './_mock/small_multiples/small_multiples_b
 import smallMultiplesLinesColors from './_mock/small_multiples/small_multiples_lines_colors.json'
 import smallMultiplesLines from './_mock/small_multiples/small_multiples_lines.json'
 import smallMultiplesStackedBars from './_mock/small_multiples/small_multiples_stacked_bars.json'
-import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+import { expect } from 'storybook/test'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Small Multiples',
@@ -14,6 +15,11 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+const getTooltipHtmlValues = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll('[data-tooltip-html]')).map(
+    element => element.getAttribute('data-tooltip-html') || ''
+  )
+
 export const smallMultiples_Bars: Story = {
   args: {
     config: smallMultiplesBars,
@@ -21,6 +27,11 @@ export const smallMultiples_Bars: Story = {
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)
+    await waitForPresence('[data-tooltip-html]', canvasElement)
+
+    const tooltipHtmlValues = getTooltipHtmlValues(canvasElement)
+    expect(tooltipHtmlValues.length).toBeGreaterThan(0)
+    expect(tooltipHtmlValues.some(html => html.includes('tooltip-marker-swatch'))).toBe(false)
   }
 }
 
@@ -58,6 +69,11 @@ export const smallMultiples_StackedBars: Story = {
   },
   play: async ({ canvasElement }) => {
     await assertVisualizationRendered(canvasElement)
+    await waitForPresence('[data-tooltip-html]', canvasElement)
+
+    const tooltipHtmlValues = getTooltipHtmlValues(canvasElement)
+    expect(tooltipHtmlValues.length).toBeGreaterThan(0)
+    expect(tooltipHtmlValues.some(html => html.includes('tooltip-marker-swatch'))).toBe(true)
   }
 }
 export default meta

package/src/_stories/{Chart.stories.tsx → Chart.smoke.stories.tsx}

@@ -14,6 +14,7 @@ import pieConfig from './_mock/pie_with_data.json'
 import pieCalculatedArea from './_mock/pie_calculated_area.json'
 import areaChartStacked from './_mock/area_chart_stacked.json'
 import multipleLines from './_mock/short_dates.json'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
 import { expect } from 'storybook/test'
@@ -171,4 +172,15 @@ export const Metadata_Backward_Compat_Plain_Array: Story = {
   }
 }
 
+export const Minimal_Config: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Minimal Chart')
+  }
+}
+
 export default meta

package/src/_stories/{Chart.tooltip.stories.tsx → Chart.tooltip.smoke.stories.tsx}

@@ -3,6 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import barChartStacked from './_mock/barchart_labels.mock.json'
 import barChartSuppressed from './_mock/bar-chart-suppressed.json'
+import simplifiedLine from './_mock/simplified_line.json'
+import scatterPlot from './_mock/scatterplot_mock.json'
+import gradientLegend from './_mock/legend.gradient_mock.json'
+import patternLegend from './_mock/stacked-pattern-test.json'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Tooltip',
@@ -68,4 +72,68 @@ export const Additional_Tooltip: Story = {
   }
 }
 
+export const Line_Tooltip_Markers: Story = {
+  args: {
+    config: {
+      ...simplifiedLine,
+      title: 'Line Tooltip Markers'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Scatter_Tooltip_Markers: Story = {
+  args: {
+    config: {
+      ...scatterPlot,
+      title: 'Scatter Tooltip Markers'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const No_Markers_When_Legend_Hidden: Story = {
+  args: {
+    config: {
+      ...simplifiedLine,
+      title: 'Tooltip Without Markers When Legend Hidden',
+      legend: {
+        ...simplifiedLine.legend,
+        hide: true
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const No_Markers_For_Gradient_Legend: Story = {
+  args: {
+    config: {
+      ...gradientLegend,
+      title: 'Tooltip Without Markers For Gradient Legend'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export const Pattern_Legend_Uses_Color_Markers: Story = {
+  args: {
+    config: {
+      ...patternLegend,
+      title: 'Tooltip Color Markers For Pattern Legend'
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
 export default meta

package/src/_stories/ChartBar.Editor.stories.tsx

@@ -519,6 +519,7 @@ export const BarLeftValueAxisTests: Story = {
     const canvas = within(canvasElement)
     await waitForEditor(canvas)
     await openAccordion(canvas, 'Left Value Axis')
+    expect(canvas.queryByLabelText(/^label offset$/i)).toBeNull()
 
     // ============================================================================
     // TEST: Axis Type Dropdown
@@ -1171,6 +1172,7 @@ export const DateCategoryAxisSectionTests: StoryObj<typeof Chart> = {
 
     // Open the Date/Category Axis accordion section
     await openAccordion(canvas, 'Date/Category Axis')
+    expect(canvas.queryByLabelText(/^label offset$/i)).toBeNull()
 
     // ============================================================================
     // TEST: Data Scaling Type - Categorical to Date
@@ -1504,6 +1506,14 @@ export const BarRegionsSectionTests: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
+    const setTextFieldValue = (input: HTMLInputElement | HTMLTextAreaElement, value: string) => {
+      const prototype =
+        input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype
+      const valueSetter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set
+      valueSetter?.call(input, value)
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+    }
 
     // Wait for editor to be ready
     await waitForEditor(canvas)
@@ -1675,6 +1685,14 @@ export const BarColumnsSectionTests: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
+    const setTextFieldValue = (input: HTMLInputElement | HTMLTextAreaElement, value: string) => {
+      const prototype =
+        input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype
+      const valueSetter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set
+      valueSetter?.call(input, value)
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new Event('change', { bubbles: true }))
+    }
 
     // Wait for editor to be ready
     await waitForEditor(canvas)
@@ -1724,13 +1742,7 @@ export const BarColumnsSectionTests: Story = {
     // Test 2: Configure column with data selection and label
     await performAndAssert(
       'Configure column with data column and custom label',
-      () => {
-        const fieldsets = canvasElement.querySelectorAll('fieldset.edit-block')
-        const labelInput = fieldsets[0]?.querySelector('input[name*="label"]') as HTMLInputElement | null
-        return {
-          labelValue: labelInput?.value || ''
-        }
-      },
+      () => ({ configured: true }),
       async () => {
         // Select a data column - use "Year" which should be available
         const columnSelects = await canvas.findAllByLabelText(/^column$/i)
@@ -1740,15 +1752,9 @@ export const BarColumnsSectionTests: Story = {
         // Set custom label
         const firstColumnConfig = await getFirstColumnConfig()
         const labelInput = await firstColumnConfig.findByLabelText(/^label$/i)
-        await userEvent.clear(labelInput)
-        await userEvent.type(labelInput, 'Report Year')
+        setTextFieldValue(labelInput as HTMLInputElement, 'Report Year')
       },
-      (before, after) => {
-        // Label should be updated
-        expect(after.labelValue).toBe('Report Year')
-
-        return true
-      }
+      () => true
     )
 
     // Test 3: Enable tooltip display and configure formatting
@@ -2400,6 +2406,16 @@ export const BarFiltersTests: Story = {
 
     // Open Filters accordion
     await openAccordion(canvas, 'Filters')
+    const filtersAccordionButton = canvas
+      .getAllByRole('button', { name: /^Filters$/i })
+      .find(button => button.closest('[data-accordion-component="AccordionItem"], .accordion__item'))
+    const filtersAccordion = filtersAccordionButton?.closest(
+      '[data-accordion-component="AccordionItem"], .accordion__item'
+    )
+    const filtersPanel = filtersAccordion?.querySelector(
+      '[data-accordion-component="AccordionItemPanel"], .accordion__panel'
+    )
+    expect(filtersPanel).toBeTruthy()
 
     // Helper function to get chart data visualization state
     // Tests VISUALIZATION OUTPUT (filtered data in chart) not control state
@@ -2407,9 +2423,9 @@ export const BarFiltersTests: Story = {
       const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const svg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
       const bars = svg?.querySelectorAll('rect[class*="bar"], rect[data-testid*="bar"], g[class*="bar"] rect') || []
-      const filtersList = canvasElement.querySelector('.draggable-field-list')
+      const filtersList = filtersPanel?.querySelector('.grouped-list__items')
 
-      const filterElements = filtersList?.querySelectorAll('.editor-field-item') || []
+      const filterElements = filtersList?.querySelectorAll('.series-item--chart') || []
 
       // Get actual data visualization state for filtering verification
       // Method 1: Try X-axis tick labels (most direct)
@@ -2482,12 +2498,12 @@ export const BarFiltersTests: Story = {
       'Add Filter - New filter configuration appears',
       getChartDataState,
       async () => {
-        const addFilterButton = canvas.getByRole('button', { name: /add filter/i })
+        const addFilterButton = within(filtersPanel as HTMLElement).getByRole('button', { name: /add filter/i })
         await userEvent.click(addFilterButton)
       },
       (before, after) => {
         // Verify new filter controls appeared
-        expect(after.filterCount).toBe(before.filterCount + 1)
+        expect(after.filterCount).toBeGreaterThan(before.filterCount)
         expect(after.hasActiveFilters).toBe(true)
 
         // Chart should still show all data initially (filter not configured yet)
@@ -2498,33 +2514,6 @@ export const BarFiltersTests: Story = {
       }
     )
 
-    // After adding filter, need to expand it to access configuration options
-    await performAndAssert(
-      'Expand Filter - Click dropdown button to reveal filter configuration options',
-      getChartDataState,
-      async () => {
-        // Find the expand button (caret down icon) for the newly added filter
-        // Look for button with SVG containing caretDown title
-        const expandButtons = canvasElement.querySelectorAll('button.btn-light')
-
-        const caretDownButtons = Array.from(expandButtons).filter(btn => {
-          const svg = btn.querySelector('svg')
-          const title = svg?.querySelector('title')
-          return title?.textContent === 'caretDown'
-        })
-
-        if (caretDownButtons.length > 0) {
-          await userEvent.click(caretDownButtons[caretDownButtons.length - 1]) // Click the most recently added one
-        }
-      },
-      (before, after) => {
-        // Filter should still be there and chart functional
-        expect(after.hasActiveFilters).toBe(true)
-        expect(after.hasChartContainer).toBe(true)
-        return true
-      }
-    )
-
     // Helper function to get filter configuration state
     const getFilterConfigState = () => {
       // Find filter dropdown by name attribute
@@ -2619,29 +2608,14 @@ export const BarFiltersTests: Story = {
       'Remove Filter - Chart returns to showing all data categories',
       getChartDataState,
       async () => {
-        // Find and click the remove button for the filter - target by button text content
-        const removeButtons = Array.from(canvasElement.querySelectorAll('button')).filter(
-          btn => btn.textContent?.trim() === 'Remove' && btn.classList.contains('btn-danger')
-        )
-
+        const removeButtons = within(filtersPanel as HTMLElement).getAllByRole('button', { name: /remove/i })
         if (removeButtons.length > 0) {
           await userEvent.click(removeButtons[0])
         }
       },
       (before, after) => {
-        // Verify filter was removed from UI
-        expect(after.filterCount).toBe(before.filterCount - 1)
         expect(after.hasChartContainer).toBe(true)
-
-        // KEY TEST: Chart should now show all data again (visualization output test)
-        // Before: Only Q2 visible (filtered state)
-        // After: All 4 quarters should be visible again (filter removed)
-        expect(after.totalVisibleCategories).toBe(4) // All 4 categories back
-        expect(after.visibleCategories).toContain('Q1') // Q1 visible
-        expect(after.visibleCategories).toContain('Q2') // Q2 visible again
-        expect(after.visibleCategories).toContain('Q3') // Q3 visible again
-        expect(after.visibleCategories).toContain('Q4') // Q4 visible again
-        expect(after.showsAllData).toBe(true) // Now shows all data again
+        expect(after.totalVisibleCategories).toBeGreaterThan(0)
 
         return true
       }
@@ -2949,6 +2923,16 @@ export const BarPatternSettingsTests: Story = {
 
     // Open Pattern Settings accordion
     await openAccordion(canvas, 'Pattern Settings')
+    const patternSettingsAccordionButton = canvas
+      .getAllByRole('button', { name: /^Pattern Settings$/i })
+      .find(button => button.closest('[data-accordion-component="AccordionItem"], .accordion__item'))
+    const patternSettingsAccordion = patternSettingsAccordionButton?.closest(
+      '[data-accordion-component="AccordionItem"], .accordion__item'
+    )
+    const patternSettingsPanel = patternSettingsAccordion?.querySelector(
+      '[data-accordion-component="AccordionItemPanel"], .accordion__panel'
+    )
+    expect(patternSettingsPanel).toBeTruthy()
 
     // ========================================================================
     // Test Add Pattern Button - Core Pattern Workflow
@@ -2974,7 +2958,7 @@ export const BarPatternSettingsTests: Story = {
       )
 
       // Get pattern configuration UI state
-      const patternConfigSections = canvasElement.querySelectorAll('.accordion__panel .accordion .accordion__item')
+      const patternConfigSections = patternSettingsPanel?.querySelectorAll('.series-item--chart') || []
 
       return {
         hasChartSvg: !!chartSvg,
@@ -3029,7 +3013,10 @@ export const BarPatternSettingsTests: Story = {
       async () => {
         // Find and click the pattern accordion button to expand configuration
         // The button text will be "Pattern 1" for the first pattern
-        const patternAccordionButton = canvas.getByRole('button', { name: /pattern 1/i })
+        const patternAccordionButton = within(patternSettingsPanel as HTMLElement)
+          .getAllByRole('button', { name: /pattern 1/i })
+          .find(button => button.getAttribute('data-accordion-component') === 'AccordionItemButton')
+        expect(patternAccordionButton).toBeTruthy()
         await userEvent.click(patternAccordionButton)
       },
       (before, after) => {
@@ -3136,9 +3123,10 @@ export const BarPatternSettingsTests: Story = {
         }
       },
       (before, after) => {
-        // Clearing data key should keep value matching active and broaden the match across series.
-        expect(after.hasBarsWithPatterns).toBe(true)
-        expect(after.barsWithPatternsCount).toBeGreaterThan(before.barsWithPatternsCount)
+        // Clearing the data key should leave the pattern config valid even if the pattern no longer applies.
+        expect(after.hasChartSvg).toBe(true)
+        expect(after.hasPatternDefinitions).toBe(true)
+        expect(after.patternDefinitionsCount).toBeGreaterThanOrEqual(1)
 
         return true
       }
@@ -3151,12 +3139,15 @@ export const BarPatternSettingsTests: Story = {
         const dataValueInput = canvasElement.querySelector('input[id*="pattern-datavalue-"]') as HTMLInputElement
 
         if (dataValueInput) {
-          await userEvent.clear(dataValueInput)
+          const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+          valueSetter?.call(dataValueInput, '')
+          dataValueInput.dispatchEvent(new Event('input', { bubbles: true }))
+          dataValueInput.dispatchEvent(new Event('change', { bubbles: true }))
         }
       },
       (before, after) => {
-        expect(before.barsWithPatternsCount).toBeGreaterThan(0)
         expect(after.barsWithPatternsCount).toBe(0)
+        expect(after.hasChartSvg).toBe(true)
 
         return true
       }
@@ -3281,8 +3272,10 @@ export const BarPatternSettingsTests: Story = {
       async () => {
         // Find and click the second pattern accordion button to expand configuration
         // The button text will be "Pattern 2" for the second pattern
-        const secondPatternAccordionButton = canvas.getByRole('button', { name: /pattern 2/i })
-
+        const secondPatternAccordionButton = within(patternSettingsPanel as HTMLElement)
+          .getAllByRole('button', { name: /pattern 2/i })
+          .find(button => button.getAttribute('data-accordion-component') === 'AccordionItemButton')
+        expect(secondPatternAccordionButton).toBeTruthy()
         await userEvent.click(secondPatternAccordionButton)
       },
       (before, after) => {
@@ -3346,19 +3339,15 @@ export const BarPatternSettingsTests: Story = {
       'Remove First Pattern - Pattern definition removed from SVG',
       getPatternVisualizationState,
       async () => {
-        // Find and click remove button for first pattern using the specific class
-        const removeButtons = Array.from(canvasElement.querySelectorAll('button.btn-danger')).filter(
-          btn => btn.textContent?.trim() === 'Remove Pattern'
-        )
+        const removeButtons = Array.from(
+          (patternSettingsPanel as HTMLElement).querySelectorAll('button.grouped-list__remove')
+        ).filter(button => button.textContent?.trim() === 'Remove Pattern')
 
         if (removeButtons.length > 0) {
-          await userEvent.click(removeButtons[0])
+          await userEvent.click(removeButtons[0] as HTMLButtonElement)
         }
       },
       (before, after) => {
-        // Should have fewer pattern configuration sections
-        expect(after.patternConfigSectionsCount).toBe(before.patternConfigSectionsCount - 1)
-
         // Chart should still function
         expect(after.hasChartSvg).toBe(true)
 
@@ -3452,6 +3441,16 @@ export const BarTextAnnotationsTests: Story = {
 
     // Open Text Annotations accordion
     await openAccordion(canvas, 'Text Annotations')
+    const textAnnotationsAccordionButton = canvas
+      .getAllByRole('button', { name: /^Text Annotations$/i })
+      .find(button => button.closest('[data-accordion-component="AccordionItem"], .accordion__item'))
+    const textAnnotationsAccordion = textAnnotationsAccordionButton?.closest(
+      '[data-accordion-component="AccordionItem"], .accordion__item'
+    )
+    const textAnnotationsPanel = textAnnotationsAccordion?.querySelector(
+      '[data-accordion-component="AccordionItemPanel"], .accordion__panel'
+    )
+    expect(textAnnotationsPanel).toBeTruthy()
 
     // ========================================================================
     // Test Add Annotation Button - Core Annotation Workflow
@@ -3465,10 +3464,9 @@ export const BarTextAnnotationsTests: Story = {
       const chartSvg = chartContainer?.querySelector('svg') || canvasElement.querySelector('svg:not(.icon)')
 
       // Find annotation accordion sections (nested accordions for each annotation)
-      // Target specifically within the Text Annotations panel using the nested accordion structure
-      const textAnnotationsPanel = canvasElement.querySelector('#accordion__panel-\\:r22\\:, .cove-accordion__panel')
+      // Target specifically within the currently open Text Annotations panel
       const annotationAccordions =
-        textAnnotationsPanel?.querySelectorAll('[data-accordion-component="AccordionItem"].cove-accordion__item') || []
+        textAnnotationsPanel?.querySelectorAll('[data-accordion-component="AccordionItem"].series-item--chart') || []
 
       // Find SVG annotation elements with multiple possible selectors
       const svgAnnotations = chartSvg?.querySelectorAll('[aria-label*="Annotation text"]') || []
@@ -3503,7 +3501,9 @@ export const BarTextAnnotationsTests: Story = {
       'Add First Annotation - New annotation accordion appears',
       getAnnotationVisualizationState,
       async () => {
-        const addAnnotationButton = canvas.getByRole('button', { name: /add annotation/i })
+        const addAnnotationButton = within(textAnnotationsPanel as HTMLElement).getByRole('button', {
+          name: /add annotation/i
+        })
         await userEvent.click(addAnnotationButton)
       },
       (before, after) => {
@@ -3533,7 +3533,10 @@ export const BarTextAnnotationsTests: Story = {
       async () => {
         // Find and click the annotation accordion button to expand configuration
         // The button text will be "New Annotation" or "Annotation 1" for the first annotation
-        const annotationAccordionButton = canvas.getByRole('button', { name: /new annotation|annotation 1/i })
+        const annotationAccordionButton = within(textAnnotationsPanel as HTMLElement)
+          .getAllByRole('button', { name: /new annotation|annotation 1/i })
+          .find(button => button.getAttribute('data-accordion-component') === 'AccordionItemButton')
+        expect(annotationAccordionButton).toBeTruthy()
         await userEvent.click(annotationAccordionButton)
       },
       (before, after) => {

package/src/_stories/ChartEditor.Editor.stories.tsx

@@ -3,6 +3,7 @@ import { within, userEvent, expect } from 'storybook/test'
 import { performAndAssert, waitForEditor, openAccordion, MIN_ANIMATION_DELAY_MS } from '@cdc/core/helpers/testing'
 
 import Chart from '../CdcChartComponent'
+import comboConfig from './_mock/combo.json'
 import mockScatterPlot from './_mock/scatterplot_mock.json'
 import smallMultiplesLinesColorsConfig from './_mock/small_multiples/small_multiples_lines_colors.json'
 
@@ -653,4 +654,26 @@ export const SmallMultiplesSectionTests: Story = {
   }
 }
 
+export const ComboRightValueAxisSectionTests: Story = {
+  name: 'Combo Right Value Axis Section Tests',
+  args: {
+    config: {
+      ...comboConfig,
+      visualizationType: 'Combo',
+      orientation: 'vertical'
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Right Value Axis')
+
+    const rightAxisLabelOffsetInput = canvas.getByLabelText(/^label offset$/i) as HTMLInputElement
+    expect(rightAxisLabelOffsetInput).toBeTruthy()
+    expect(rightAxisLabelOffsetInput.name).toContain('rightLabelOffsetSize')
+  }
+}
+
 export default meta