Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: FluentUI DatePicker Accessibility Issue aria-required-children #27589

Closed
2 tasks done
mzavala722 opened this issue Apr 17, 2023 · 1 comment
Closed
2 tasks done
Labels
Fluent UI react (v8) Issues about @fluentui/react (v8)

Comments

@mzavala722
Copy link

Library

React / v8 (@fluentui/react)

System Info

Package version: @fluentui/react: 8.93.1

Are you reporting Accessibility issue?

yes

Reproduction

https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker

Bug Description

Repro Steps

Actual Behavior

The FluentUI DatePicker component is currently failing the Accessibility Insights for Web fast pass. See screenshots and attached logs.
image
image

Expected Behavior

The DatePicker component should pass the Accessibility Insights for Web fast pass without any accessibility issues.

Logs

Accessibility Fast Pass Issue Log:
Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (table)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: Fluent UI - Controls - React - DatePicker - https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker

Element path: table

Snippet: <table class="table-413" aria-multiselectable="false" aria-labelledby="id__526" aria-activedescendant="id__527" role="grid">

How to fix: 
Fix any of the following:
  Element has children which are not allowed (see related nodes)
  Element has no aria-busy="true" attribute

Environment: Microsoft Edge version 112.0.1722.39

====

This accessibility issue was found using Accessibility Insights for Web 2.38.1 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@github-actions github-actions bot added the Fluent UI react (v8) Issues about @fluentui/react (v8) label Apr 17, 2023
@khmakoto khmakoto changed the title [Bug]: FluentUI DatePicker Accessibility Issue aria-requiered-children [Bug]: FluentUI DatePicker Accessibility Issue aria-required-children Apr 24, 2023
@smhigley
Copy link
Contributor

smhigley commented Sep 5, 2023

This is a false positive from axe-core, which is detailed in this issue: dequelabs/axe-core#3850. They already have a fix, which should be available in the next release (4.8, I believe).

There is no true accessibility issue behind this, and no practical impact on users.

@smhigley smhigley closed this as completed Sep 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react (v8) Issues about @fluentui/react (v8)
Projects
None yet
Development

No branches or pull requests

2 participants