Make Resources Accessed chart keyboard accessible (#1190)

[ssciolla]

This PR aims to resolve #1190.

To Do

• Show tooltip on focus
• Move brush/scroll when tabbing through chart
• Move labels before bars in tab order
• Evaluate click focus behavior (see my comment here)

[ssciolla]

This moves the link labels before the bars in the DOM, which makes the Tab order go from left to right (expected for our users?).

[ssciolla]

This changes see the tabindex strategy to use 0, per general guidance from MDN on using tabindex (see Warning on https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). The downside is that it doesn't go from link label to bar. I have asked for accessibility feedback on this, but I haven't heard back yet. See also change to old line 463.

[ssciolla]

Because the handlers added use focus, they also trigger on mouse click as well as keyboard tabbing. There's not a simple way (I've found) to determine whether it was triggered by mouse or tabbing. The result is that if users click on bars, the brush and chart may jump a little, but I've tried to make the new location good for visibility of the rest of the chart. This will need some testing.

[ssciolla]

The Codacy issues are related to using variables (gBrush, moveBrushOnFocus) before they are defined (which is allowed by JavaScript, but leads to some code that's difficult to read). I looked into to fixing this, but the entire D3 component file has this issue, and references are kinda circular. The situation seems to be partially encouraged by D3, but maybe there is a way to partially build things like the brush and then add the handlers after the fact, or use more parameters in functions. I'm not sure, I'd have to think about it more, but it will involve a lot more code changes, which may not be acceptable at this point in the release cycle. Opening this as a new issue would make sense to me.

[jonespm]

I tested this and it seems like it works better for keyboard only. It allows the list to be navigated with keyboard which it wasn't already.

I feel like adding the extra data visible in the graph about whether it was visited or not visited as well as the percentage of student to an aria-label could make this more useful, but perhaps that's a different issue. I was just testing this with voiceover and it just reads the file name when tabbing. It also gives a full overview when first visiting the page but nothing when you start tabbing.

Another thing I noticed is that if you use the mouse and click on anything in the svg, then start tabbing (on the current version) it actually does tab between the name and the "Graphics Symbol". However in this code if you click on it it first goes through all of the names first then goes through the bar graphs. However I don't know how to get that svg into the tab order so it works?

I feel considering keyboard only that this is working well for me. Though if we could just get it to "click into" the svg after the checkboxes it seems like it would also be functional?

[ssciolla]

Another thing I noticed is that if you use the mouse and click on anything in the svg, then start tabbing (on the current version) it actually does tab between the name and the "Graphics Symbol". However in this code if you click on it it first goes through all of the names first then goes through the bar graphs. However I don't know how to get that svg into the tab order so it works?

@jonespm, I didn't understand what you were saying at first, but yes, this is what I was talking about in the meeting earlier. The current version does allow you to tab through label to bar, but it's using positive tabindex values. What that means is they go first in the tab order, so they appear out of order with the other Tabl-able controls in the UI. Using this pattern also isn't recommended; see my comment above here: #1472 (comment) I'm checking with the a11y team that my change is preferred.

[ssciolla]

@zqian, here's a demo of the behavior. Data shown is fabricated data from a testing site.

Screen.Recording.2023-02-16.at.11.41.07.AM.mov