a11y issues reported by storybook for SimpleBarChart

[pbojinov]

Bug summary

We created a story for a basic metric card container with a SimpleBarChart and noticed we are getting a11y errors from storybook a11y addon.

      <SimpleBarChart data={series} theme="Light" showLegend={false} />

Error in build: https://buildkite.com/shopify/web-storybook-builder/builds/212649#018771a2-746d-4fb7-bf01-3cde8ab3b8a6/31-127

- Story ID: sections-analytics-overviewdashboardnext-components-stories-metriccard--bar-chart
--
  | Error: Certain ARIA roles must contain particular children (aria-required-children)
  | Affected node(s):
  | <svg viewBox="0 0 328 200" xmlns="http://www.w3.org/2000/svg" width="328" height="200" class="_SVG_1l95c_160" role="list">
  | <g data-color-vision-event-watch="true" data-color-vision-event-type="group" data-color-vision-event-index="0" data-type="BarGroup" data-index="0" aria-hidden="false" aria-label="Point of Sale: Top Sales By Channel 2987.29" role="list" class="_Group_16wtx_150" style="opacity: 1; transition: opacity 100ms ease 0s;">
  | <g data-color-vision-event-watch="true" data-color-vision-event-type="group" data-color-vision-event-index="1" data-type="BarGroup" data-index="1" aria-hidden="false" aria-label="Online Store: Top Sales By Channel 547.5" role="list" class="_Group_16wtx_150" style="opacity: 1; transition: opacity 100ms ease 0s;">
  | <g data-color-vision-event-watch="true" data-color-vision-event-type="group" data-color-vision-event-index="2" data-type="BarGroup" data-index="2" aria-hidden="false" aria-label="Facebook Marketplace: Top Sales By Channel 322.5" role="list" class="_Group_16wtx_150" style="opacity: 1; transition: opacity 100ms ease 0s;">
  | <g data-color-vision-event-watch="true" data-color-vision-event-type="group" data-color-vision-event-index="3" data-type="BarGroup" data-index="3" aria-hidden="false" aria-label="Instagram: Top Sales By Channel 299.89" role="list" class="_Group_16wtx_150" style="opacity: 1; transition: opacity 100ms ease 0s;">
  | <g data-color-vision-event-watch="true" data-color-vision-event-type="group" data-color-vision-event-index="4" data-type="BarGroup" data-index="4" aria-hidden="false" aria-label="Draft Orders: Top Sales By Channel 127.41" role="list" class="_Group_16wtx_150" style="opacity: 1; transition: opacity 100ms ease 0s;">
  | For help resolving this see: https://dequeuniversity.com/rules/axe/4.4/aria-required-children?application=axe-puppeteer
  | To re-run these tests run `yarn run storybook:a11y`
  | error Command failed with exit code 1.

It looks like it affects the horizontal bars.

Expected behavior

Accessibility errors shouldn't show up.

Actual behavior

Error: Certain ARIA roles must contain particular children (aria-required-children)

Steps to reproduce the problem

1. Open up the MetricCard > Bar Chart story. (*Link coming shortly. My storybook broke)

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Polaris-Viz version number: 9.0.1
• Browser: Chrome latest
• Device: Desktop
• Operating System: MacOS

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris-viz to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

  System:
    OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (32) x64 Intel(R) Xeon(R) CPU @ 2.80GHz
    Memory: 176.86 GB / 251.90 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  npmPackages:
    @shopify/polaris-viz: 9.0.1 => 9.0.1 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0