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]: few list examples break axe core rule "nested-interactive" #33257

Open
2 tasks done
kolaps33 opened this issue Nov 12, 2024 · 2 comments
Open
2 tasks done

[Bug]: few list examples break axe core rule "nested-interactive" #33257

kolaps33 opened this issue Nov 12, 2024 · 2 comments

Comments

@kolaps33
Copy link
Contributor

Component

List (Preview)

Package version

v9.56.1

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 41.66 GB / 63.64 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Current Behavior

Image

Expected Behavior

There are no axe core scan bugs.

Reproduction

https://stackblitz.com/run?file=src%2Fexample.tsx

Steps to reproduce

  1. Go to list preview page: https://react.fluentui.dev/?path=/docs/preview-components-list--docs
  2. run "accessibility insight for web" extension or Axe core extension in order to scan the page
  3. observe results

Actual: axe core scan throw nested-interactive error
Expected: there should be no axe core scan errors

Note:
These 3 examples are affected:
https://react.fluentui.dev/?path=/docs/preview-components-list--docs#single-action-selection
https://react.fluentui.dev/?path=/docs/preview-components-list--docs#single-action-selection-controlled
https://react.fluentui.dev/?path=/docs/preview-components-list--docs#single-action-selection-different-primary

For each example the issue is causing the checkbox which is basically input.
The reasonable solution would be to change it the same way as menuitem checkboxes has it:
Image

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.
@khmakoto
Copy link
Member

@george-cz fyi, since you worked on List

@george-cz
Copy link
Contributor

george-cz commented Nov 18, 2024

While this is technically a reported bug, the checkbox is just a visual clue, as the List is using a listbox with option roles, so the user is not expected to go in the list item and focus on the checkbox.
The list items implement the listbox behavior (toggling the state) so the user is never required to focus the checkbox to change state.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants