accessibility

[GuillotJessica]

Thanks for the library, easy to use.
I must use accessibility all over the app, and I have some issue regarding your component, accessibility reads content hide by pop menu Item that I'm pressing, the behaviour only happened with the library.
Any workaround?
Thanks for the response

[sodik82]

hi there,
Unfortunately I am not very familiar with accessibility. What changes would be needed?

[GuillotJessica]

we could try passing accessibility props all the way, for a start:

<MenuOptions >
        {condition && <FlatList
          keyExtractor={item => item[keyExtractor]}
          data={data}
          extraData={props}
          renderItem={({ item }) => (<MenuOption
            accessibilityComponentType="none"
            accessibilityTraits={['text']}
            accessibilityLabel={item[value]}
            customStyles={optionStyles}
            onSelect={() => onPress({ id: item.id, name: item.name })}
            text={item[value]}
          />)}
        />}
      </MenuOptions>

[sodik82]

those accessibility props should go to the MenuOption Touchable not the underlying View right?

In theory you can create your own "accessible" touchable (with OptionTouchableComponent and optionTouchable) maybe with your own custom MenuOption (to support reusability).

[GuillotJessica]

since using optionTouchable I end up having error on Android (at least)
located at MenuOption(at width-context.js:16)

[sodik82]

sorry @GuillotJessica , I somehow miss your problem with optionTouchable .. can you give us the whole error (full message + maybe stacktrace) - as this can be another problem as accesibility

[sfuqua]

Hi @sodik82 - I have run into a similar issue (screen reader can traverse elements below the menu). I wanted to take a crack at fixing it but quickly ran into a problem with the MenuPlaceholder, so I am wondering if you can advise on the best approach.

In order to avoid having the screen reader "see" content beneath the menu, there are several props we can use:

• importantForAccessibility (Android), set to "no-hide-descendants" on the tree we want to hide from the screen reader (e.g., the app content or children of the Provider while a menu is open)
• accessibilityViewIsModal/accessibilityElementsHidden (iOS), e.g., can set accessibilityViewIsModal to true on the menu, or accessibilityElementsHidden on the app content (Provider children)

So the first pass at a fix is in the MenuProvider, I tried something like this:

// New props on the View containing { this.props.children }
          accessibilityElementsHidden={isMenuOpen}
          importantForAccessibility={isMenuOpen ? 'no-hide-descendants' : 'auto'}>

// New props on the SafeAreaView containing the MenuPlaceholder
            accessibilityViewIsModal={isMenuOpen}
            importantForAccessibility={isMenuOpen ? 'yes' : 'no-hide-descendants'}

However, this falls over when a menu gets opened because the MenuProvider doesn't actually re-render. Only the MenuPlaceholder does, which doesn't provide a way for me to toggle the accessibility props on the app content.

It's easy enough to work around with setState or forceUpdate, but it appears that that would bypass the intent of MenuPlaceholder? It seems that it was created for exactly this reason (to avoid re-rendering the rest of the tree), so I'm not sure how to address this properly.

---

Note - there are several other accessibility tweaks we can investigate for the library, but this one (screen reader traversing underneath the menus) is the most urgently needed for the package to be screen reader friendly. Other low hanging fruit:

• Allowing configurability of accessibilityLabel prop for various parts of the UI (such as backdrop, or certain Menu components)
• Provide default values for accessibilityRole props for various elements (such as "menuitem", or "button" where appropriate)
• Automatically set accessibility focus on a specific item in the Menu when it pops up and restore focus to the app content when the menu goes away

[RenanSanguinete]

Any update on this issue?

I tried to use accessibilityLabel on MenuOption with no success.

[RenanSanguinete]

• Allowing configurability of accessibilityLabel prop for various parts of the UI (such as backdrop, or certain Menu components)

Any update on allowing the accessibilityLabel ??? Or other Menu Lib for React Native that allow the use of it???

[deggertsen]

This is causing problems for us as well.

[sodik82]

hi guys.... as I understand the topic is also important, we are lacking accessibility expertise and time to dive into the problem.
as indicated by label, help is welcomed and if someone can prepare PR, I will review it.

[hiral-moradiya]

Thanks for the library, easy to use. I must use accessibility all over the app, and I have some issue regarding your component, accessibility reads content hide by pop menu Item that I'm pressing, the behaviour only happened with the library. Any workaround? Thanks for the response

I have addressed these issues. Most recently, I focused on a task related to accessibility.

Step 1 - Begin by copying this node module into your local project.
Step 2 - Modify the MenuOption and MenuTrigger files. I can provide a screenshot to aid understanding.
Step 3 - Change your import settings and remove this package from node module and package.json file and restart project.

[renjieguo927]

Hello, I recently encountered an issue while using this component. I'm automating React Native with Appium, and I can't locate the children elements of MenuTrigger using Appium Inspector because they are wrapped. I understand some reasons for this. When we use pressable components (components with onPress method, such as Touchable components), their accessible property defaults to true. If we don't set it to false, it wraps the child elements below it. Therefore, when we try to detect its elements using automation tools, we can only see one element and not the elements wrapped below it.

@sodik82 I'd like to suggest opening up the option to set the accessible property so that we can pass in the accessible property. You can apply this property to the following pressable components. This may be helpful for products with automation needs.
Related link: React Native