Fluentui: A11y_CustomerServiceInsights_Share Workspace - Share_AI4W: MAS1.3.1: Certain ARIA roles must contain particular children (input)

[Vividha-Khandelwal]

Environment Information

• Package version(s): (fill this out)
• Browser and OS versions: (fill this out)

Note that our screen reader support is limited to Edge + Narrator. Issues that do not reproduce in Edge + Narrator, and aren't caused by obvious invalid aria values, should be filed with the respective screen reading software, not the Fabric repo.

Describe the issue:

Issue
Certain ARIA roles must contain particular children (aria-required-children)

Target application
100x10K KPI summary - Customer Service Insights

Element path
input

Snippet

How to fix
Fix any of the following:

• Required ARIA child role not present: listbox

Environment
Chrome version 76.0.3809.100 This accessibility issue was found using Accessibility Insights for Web 2.8.2 (axe-core 3.2.2), a tool that helps find and fix accessibility issues.

Please provide a reproduction of the issue in a codepen:

Actual behavior:

Expected behavior:

Documentation describing expected behavior

[khmakoto]

Hi @Vividha-Khandelwal, this seems to be an application bug that should be investigated by app developers who wrote the workflow since it's not clear if its an issue with Fabric controls or with Customer Service Insights. Can you provide me a codepen or something where I can repro this bug to see if it's on Fabric's side and give me a little more information about it?

Thanks!

[msft-github-bot]

Thanks for taking the time to enter an issue. However, it seems that there aren't enough details here for this issue to be actionable.

When issues are created, we need details such as:

1. Which Fabric component and which version of the Fabric component is causing the issue
2. What behaviors and attributes are missing or incorrect
3. What you expected and what is actually happening
4. Confirmation that the problem reproduces in isolation

Without a clear understanding of these details, it's not possible to take clear action on issues. We are unable to meet your expectations, properly address the root cause, and make changes without affecting the expectations of other consumers.

Please provide these additional details as you are able. The default issue template provides an outline of these details and is viewable when creating a new issue. Additionally, if this is an accessibility issue, please see Accessibility Troubleshooting in our wiki for more guidance. If these details cannot be provided, please kindly close the bug.

Thank you for your patience.

[easy0924]

You can reproduce the issue in example in UI Fabrics official documentation:
https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker

If you run accessibility insights against the exmaple, it will tell you the required child is missing from the input, when no result dropdown shows up and in open state

Here's an article regarding the combobox role:
https://www.w3.org/TR/wai-aria-practices/#combobox

Note, it's also related to another bug here, and I also left a comment there:
https://github.com/OfficeDev/office-ui-fabric-react/issues/10615#issuecomment-538082998

Possible solution could be, associate the relationship with no result dropdown with correct aria-attributes in this situation (through aria-controls and aria-owns) and define correct role for the no result dropdown.

Remove combobox role in the case might also help, but I don't think that would be as good, since the relationship with no result dropdown would be missing, and screen reader will have problem to announce the no result message for this component. (Also another related bug and comment: https://github.com/OfficeDev/office-ui-fabric-react/issues/10702#issuecomment-538496564)

Please let me know if you need more details.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring actionable feedback but has not had any activity for 2 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[easy0924]

Bump. Not sure why it's marked as stale, as I've provided details.

[khmakoto]

@easy0924 I'll give this feedback to the team, seems like a bug with the bot.

[cliffkoh]

@easy0924 the bot was expecting a reply from the issue author. Thanks for providing more context.

[joschect]

@easy0924 I'm currently working on a fix. Should be done soon.

[khmakoto]

Hi @easy0924, this should be fixed in #10872, however accessibility insights will still flag that as an error as we commented here. Given that, I'll be resolving this as External. If there is anything else you want us to do on this please let us know!

[easy0924]

@khmakoto Thanks for the fix and the note.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!