Feature/VictoryBar & Bar components ariaLabel and tabIndex [ready]

[ljones87]

This PR adds the following props to the VictoryBar component:
ariaLabel: string or callback
tabindex: number or callback

Bars can now be tabbed individually with a unique aria-label applied to each (using the props available in the CallbackArgs:

export interface CallbackArgs {
  active: boolean;
  datum: any;
  horizontal: boolean;
  index: number;
  x: number;
  y: number;
  scale?: {
    x?: D3Scale;
    y?: D3Scale;
  };
}

This new feature is demo-able by running this branch, visiting localhost:3000 and clicking the new AccessibilityDemo link (both ts and standard js)

From there you can click anywhere on the bar graph space, hit tab, and you should see the focus move from one bar to the next. Inspecting the elements via devtools should show the aria-labels on each path component.

Todo:

• tests
• see if documentation needs updating - will do this at the end
• fix tab formatting/indentation

I would like to PR a change like this for each of the component packages, adding the newly accessible chart (if it isn't already) to the accessibility demo.

[boygirl]

@ljones87 this is looking great! I see that you also pulled the tabIndex and ariaLabel props up to VictoryBar. This makes it a bit more convenient for users, which I like, but it's also valid in Victory to do something like this:

<VictoryBar
  data={myData}
  dataComponent={<Bar ariaLabel={({ datum }) => `x: ${datum.x}`} />}
/>

I'm happy for you to carry the pattern you're putting in place, though, since it is a bit more convenient and potentially less confusing

[boygirl]

I'm happy for these to all come in as granular PRs, but let's save the docs updates until the end, since they deploy on merges to main. I'd rather have the feature finalized first.

[ljones87]

Hopefully I'll be able to start chunking a few together at a time, in whatever amount makes sense to still keep the PR's easily reviewable

[boygirl]

@ljones87 This is looking good, but please change from ariaLabel to aria-label for consistency

[boygirl]

@ljones87 Sorry for the back and forth, actually, since ariaLabel has different behavior from the standard aria-label prop (accepting a function), let's leave it camelCased to differentiate it.

[kylecesmat]

Nice work! @boygirl had good feedback, and it was nicely addressed. Lets merge