Fluentui: Accessibility issue with ScrollablePane and Sticky components

[kejatura]

Environment Information

• Package version(s): 7.117.0
• Browser and OS versions: Chrome

Describe the issue:

We currently use ScrollablePane and Sticky components in conjunction with DetailsList in our project, very similar to this example. When running the Accessibility Insights - Fast Pass, we have this issue : "Ensures aria-hidden elements do not contain focusable elements"

This is also seen in DetailsList Locked Header example from : https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

Please provide a reproduction of the issue in a codepen:

codepen: https://codepen.io/kejatura/pen/zYrjVRd?editors=0010

1. Scroll down the detailslist (doesn't need to be scrolled to the bottom)
2. Launch Fast-Pass from Accessibility Insights for Web extension

Actual behavior:

Notice the error : "Ensures aria-hidden elements do not contain focusable elements"

Expected behavior:

Fixes mentioned: "Focusable content should have tabindex='-1' or be removed from the DOM"

Documentation describing expected behavior

Fixes mentioned: "Focusable content should have tabindex='-1' or be removed from the DOM"

[paulgildea]

I wasn't able to a repo within codepen - this one might be able to repro the issue in a different form.

[xugao]

@kejatura - I can't seem to repro either. could you point out explicitly which element is set with aria-hidden: true and which element is focusable within?

[xugao]

@kejatura - thanks! i got the repro. Will look into fixing.

Note to dev, it looks wrong to me that we are setting aria-hidden to true the all the children element set it back to false:

[ayuspark]

Hi @xugao , our product in Dynamics also experiences the same bug. I wonder if you have an ETA for the fix or a timeline?
Thanks!