[Accessibility]: Invalid ARIA ID in TreemapChart modal dialog

[gssspillai]

Application/Team

IBM Software Hub(Formerly IBM Cloud pak for data )

Environment

Browser

What happened? What did you expect to happen instead?

When using the TreemapChart component, the modal dialog that appears when interacting with chart elements has invalid ARIA attributes. Specifically, the modal has aria-labelledby="<randonID>__modal-title" and aria-describedby="<randonID>__modal-description", but these IDs don't are not valid, causing accessibility violations.

Expected behavior: The modal should have valid ARIA attributes that reference existing elements in the DOM to properly support screen readers and other assistive technologies.

What WCAG 2.1 checkpoint does the issue violate?

his issue violates WCAG 2.1 Success Criterion 4.1.2: Name, Role, Value (Level A) From the WCAG guidelines: "For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies." The specific violation is that the ARIA attributes reference non-existent elements, making the modal inaccessible to screen readers.

Version

"@carbon/charts": "1.13.7",
"@carbon/charts-react": "^1.22.0",

Data & options used

// options.js
const options = {
  title: 'Treemap Chart - Population by Region',
  height: '300px',
  width: '600px',
  resizable: true,
  color: {
    scale: {
      Oceania: '#3ddbd9',
      Europe: '#08bdba',
      America: '#009d9a',
      Australia: '#007d79',
      Africa: '#005d5d',
      Asia: '#004144'
    }
  },
  tooltip: {
    enabled: true,
    customHTML: (data) => {
      if (!data || !data[0]) return '';
      
      return `
        <div style="padding: 10px; background-color: #f4f4f4; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
          <div style="font-weight: bold; margin-bottom: 5px;">${data[0].name}</div>
          <div>Value: ${data[0].value ? data[0].value.toLocaleString() : 'N/A'}</div>
          ${data[0].parent ? `<div>Region: ${data[0].parent}</div>` : ''}
        </div>
      `;
    }
  },
  treemap: {
    groupBy: ['name'],
    showLabels: true
  },
  animations: true
};

Relevant log output

When running accessibility checks, the following violation is reported:


Violation: The 'id' "12cb9391fd0ef__modal-title" specified for the ARIA property 'aria-labelledby' value is not valid

The ARIA property must reference a non-empty unique id of an existing element that is visible

Element location:
<div
    style="opacity: 1; visibility: visible;"
    tabindex="-1"
    aria-describedby="12cb9391fd0ef__modal-description"
    aria-labelledby="12cb9391fd0ef__modal-title"
    aria-modal="true"
    role="dialog"
    data-modal="true"
    class="cds--modal">


## Reproduction steps
1. Create a React application with Carbon Charts
2. Add a TreemapChart component
3. Interact with the chart to trigger the modal dialog
4. Run accessibility checks (using axe, Lighthouse, or similar tools)
5. Observe the ARIA violations related to invalid IDs

StackBlitz repro

No response

What priority level would this issue be in your opinion?

P1