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

[TreeView] component is not accessible in Android Talkback #12275

Open
2 tasks done
krv5vignesh opened this issue Apr 29, 2021 · 5 comments
Open
2 tasks done

[TreeView] component is not accessible in Android Talkback #12275

krv5vignesh opened this issue Apr 29, 2021 · 5 comments
Labels
accessibility a11y component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! MUI X

Comments

@krv5vignesh
Copy link

krv5vignesh commented Apr 29, 2021

The Tree View component does not work in Android when used with Talkback enabled. When Talkback (screen reader for Android) is enabled, the nodes in the Tree View are not working.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

All the below list issues occur when Talkback is enabled.

  1. When Talkback is enabled, the tree nodes get focused by the swipe right gesture. But when double tapped, it does not expand or collapsed and instead only announces the current state.
  2. Similar issue occurs on node selection as well. With Talkback enabled and when we use the double-tap gesture to select the node, it does not get selected.
  3. The name of the node is not announced when a node is focused

Expected Behavior 🤔

  1. While using Talkback the nodes should expand or collapse when the double tap gesture is used.
  2. Tree nodes should be selectable when double tag gesture is used
  3. The name of the tree node should be announced when it is focused.

Steps to Reproduce 🕹

Enable Talkback on an Android mobile and try to interact with the Tree nodes give in the example page

Context 🔦

I am trying to use the Tree view component in Android.

Your Environment 🌎

`npx @material-ui/envinfo`
    System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.15.5 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Edge: 90.0.818.49
    Firefox: 88.0
    Safari: 14.1
  npmPackages:
    @material-ui/core: ^4.11.4 => 4.11.4 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.58 => 4.0.0-alpha.58 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  17.0.4 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

Search keywords:

@krv5vignesh krv5vignesh added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 29, 2021
@oliviertassinari oliviertassinari added the component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! label Apr 29, 2021
@oliviertassinari
Copy link
Member

oliviertassinari commented Apr 29, 2021

Could you test https://next.material-ui.com/components/tree-view/ out? The focus is now handled with a aria-activedescendant mui/material-ui#21695 (however, it creates other issues #9958)

@oliviertassinari oliviertassinari added accessibility a11y and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 29, 2021
@oliviertassinari oliviertassinari changed the title Tree View component is not accessible in Android [TreeView] component is not accessible in Android Talkback Apr 29, 2021
@krv5vignesh
Copy link
Author

krv5vignesh commented Apr 30, 2021

@oliviertassinari Unfortunately that did not fix the issue. I am getting the same issues I originally reported.

Also I noticed something while testing this on two different devices. They are,

Device 1 - Android version 7.0

  • I am able to expand a tree node, select a child node without any issue.
  • Only issue is I am NOT able to collapse an already expanded node.

Device 2 - Android version 10

  • All the issues I originally reported are observed here.

Note: Both the above tests were done with Talkback (version 9.1) enabled and tested on both the main Material UI documentation site as well as next.material UI documentation site.

@krv5vignesh
Copy link
Author

@oliviertassinari Any update on this? Could you point me where the issue might be occurring from so I can attempt a fix?

@oliviertassinari
Copy link
Member

@krv5vignesh I don't have a single clue about what's going wrong. It's also unlikely this issue will be worked on before many months. If it's important for your organization, feel free to invest time in it.

@eps1lon
Copy link
Member

eps1lon commented May 7, 2021

Using Android 7.0 NRD90M on a Redmi Note 4 on https://6093d26ee081cf00074f9d5d--material-ui.netlify.app/components/tree-view#FileSystemNavigator.

Checked means working, unchecked means not working:

  • announcing name when focused
  • selection
  • announcing selected state
  • announcing expanded state
  • expansion when double tapped
  • collapsing when double tapped

Same behavior with https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html

Ignore the display 😄

talkback-treeview.mp4

Will check if there are bug reports for Android 10. But I'd be surprised if this were an issue on our part.

@flaviendelangle flaviendelangle transferred this issue from mui/material-ui Mar 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! MUI X
Projects
None yet
Development

No branches or pull requests

3 participants