carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
901 stars 184 forks source link

[Accessibility]: Missing aria labels on carbon donut chart hover tooltip #1301

Closed joker23 closed 1 year ago

joker23 commented 2 years ago

Contact Details

No response

Environment

Automated testing tool and ruleset

What happened? What did you expect to happen instead?

<div class="bx--cc--tooltip hidden" role="tooltip"></div>
<div class="bx--modal" data-modal="true" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description" tabindex="-1"></div>

The first element - tooltip - is missing the aria-hidden="true" label.

Accessibility tests logs:

 ● Model resources tile › should have no accessibility validations

    expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $('.bx--modal') to have no violations:

    <div class="bx--modal" data-modal="true" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description" tabindex="-1"></div>

    Received:

    "ARIA dialog and alertdialog nodes should have an accessible name (aria-dialog-name)"

    Fix any of the following:
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.2/aria-dialog-name?application=axeAPI

    ────────

    Expected the HTML found at $('.bx--cc--tooltip') to have no violations:

    <div class="bx--cc--tooltip hidden" role="tooltip"></div>

    Received:

    "ARIA tooltip nodes must have an accessible name (aria-tooltip-name)"

    Fix any of the following:
      Element does not have text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.2/aria-tooltip-name?application=axeAPI

What WCAG 2.1 checkpoint does the issue violate?

https://dequeuniversity.com/rules/axe/4.2/aria-dialog-name?application=axeAPI

Version

@carbon/charts-react@0.54.11

Data & options used

const donutOptions = {
      resizeable: true,
      height: '130px',
      getFillColor: (grp) => {...},
      donut: {
        center: {
          label: "...",
          number: ...
        }
      },
      pie: {
        labels: {
          enabled: false
        }
      },
      tooltip: {
        truncation: {
          numCharacter: 100
        }
      },
      legend: {
        position: 'right',
        alignment: 'center',
        clickable: false,
        truncation: {
          numCharacter: 100,
          threshold: 100
        }
      },
      toolbar: {
        enabled: false
      }
    }

### Relevant log output

```js
N/A

Codesandbox example

No response

theiliad commented 1 year ago

Hi, I believe you're using a dated version of the library, as I'm able to see the aria-hidden attr now https://charts.carbondesignsystem.com/?path=/story/simple-charts-bar-simple--vertical-simple-bar-discrete