[Accessibility] Allow scrolling with arrow key for keyboard users, support keyboard focus

[CluelessCoffee]

Users can't scroll the content inside the visual with keyboard navigation only.

Part of the problem is that the visual can't be focused. I tried to add "supportsKeyboardFocus": true in capabilities.json, and focusing this.container or this.contentContainer in the update function, but I could not make it work.

However, scrolling with [UP] and [DOWN] keys works if the user clicks inside the visual with his mouse first.

This image sums up the desired behavior:

Do you think you could implement this accessibility feature or have any hint on how to approach it?

Thank you!

[dm-p]

Hi there, and thanks for raising.

It's a tricky problem to solve, but I can take a look at it. Could you confirm whether the following build works for you?

STANDALONEhtmlContent443BE3AD55E043BF878BED274D3A6855.1.4.1.0.pbiviz.zip

You will need to remove the .zip extension and manually load it into your report. Convert an existing visual to this version and check to see if this works for you—it should set the focus on the main content element and allow scrolling with the arrow keys.

This now works for me by tabbing to the visual, pressing [Enter], and I am able to scroll with the up/down keys, e.g.:

https://github.com/dm-p/powerbi-visuals-html-content/assets/10572054/d260f12f-3f79-4a89-b8ac-2d5cb3bc2b73

If this works for you, I will need to do a bit more work to make it suitable for production, but your confirmation will be a great help in moving this forward.

[CluelessCoffee]

Hi there, and thanks for raising.

It's a tricky problem to solve, but I can take a look at it. Could you confirm whether the following build works for you?

STANDALONEhtmlContent443BE3AD55E043BF878BED274D3A6855.1.4.1.0.pbiviz.zip

You will need to remove the .zip extension and manually load it into your report. Convert an existing visual to this version and check to see if this works for you—it should set the focus on the main content element and allow scrolling with the arrow keys.

This now works for me by tabbing to the visual, pressing [Enter], and I am able to scroll with the up/down keys, e.g.:

2024-04-01-html-content-keyboard-focus-scroll.mp4 If this works for you, I will need to do a bit more work to make it suitable for production, but your confirmation will be a great help in moving this forward.

Hi Daniel,

Firstly, thank you for addressing the issue in a timely manner.

I have taken the opportunity to test the updated version of the visual and it works very well, with one minor exception.

Upon scrolling to the extremities of the visual (be it the top or bottom), I have noticed that the entire report page begins to scroll. I think that these scenarios need to be detected and the event bubbling should be cancelled to prevent the entire page from scrolling.

For your convenience, I have attached a demo report here: test-html-content-1.4.1.0.pbix.zip

Thank you for your support, it is very much appreciated.

[dm-p]

Thanks for passing along the sample workbook - it's a great help :)

Unfortunately, the report scrolling issue after the bottom of a visual's main container has been reached appears to be something with custom visuals in general. I can reproduce this problem with any other custom visual in AppSource. Because custom visuals are run in sandboxed iframes, we don't have any control over events against the main window/report canvas, as the visual can't propagate them.

It's likely that the core visuals don't experience this as they are contained within inline div elements on the report page and probably do have some kind of event bubbling prevention for this scenario.

I will need to progress this issue with MS to see if they intend to fix the developer visual container in a similar manner. If they aren't, there is little I will be able to do about it from within the visual other than add the current functionality (albeit a little more resilient than how it's been poked in for this PoC).

Would I have permission to share your workbook with them? This is a great repro of the problem that they can use to investigate.

[CluelessCoffee]

Ah this is unfortunate, I did not know it was an issue with all custom visuals. Of course, you may share the workbook with MS as it does contain "dummy" data.

If MS cannot address this issue, I believe your current scrolling implementation is still better than previous behavior. If you agree, could you publish this version in the AppSource?

Thank you for your continued support! :)

[dm-p]

I've polished up the implementation and submitted it to AppSource as 1.5.0.

Assuming there are no issues, we should see the regular version live in reports within 3 weeks, and HTML Content (lite) should be about 5 weeks due to it needing certification.

If you want to explore the 1.5.0 build in the meantime, you can download and explore the changes using the standalone build, available on the 1.5.0 release page.

I'll write a blog post and update the doc site as soon as I can. I have also raised the scrolling issue with MS, but I haven't received a reply yet (and probably don't expect anything to change for a while if they do acknowledge it).

[CluelessCoffee]

@dm-p Thank you! :)

[dm-p]

MS has approved HTML Content (lite), so both editions will be available in production reports within the next two weeks. As this is essentially as far as I can get things, I'll close this off, and we can address any further improvements as a new issue.

I hope that you find the new changes useful, and thanks for raising!

[CluelessCoffee]

MS has approved HTML Content (lite), so both editions will be available in production reports within the next two weeks. As this is essentially as far as I can get things, I'll close this off, and we can address any further improvements as a new issue.

I hope that you find the new changes useful, and thanks for raising!

Awesome! Thank you for your work it's very appreciated.