Benjamin-Dobell / react-native-markdown-view

MarkdownView for React Native
MIT License
190 stars 77 forks source link

There is no way to add accessibility (https://reactnative.dev/docs/accessibility) to link elements #50

Open jakthegr8 opened 3 years ago

jakthegr8 commented 3 years ago

The markdown is not supporting accessibility(https://reactnative.dev/docs/accessibility) tags. Basically I want to add focus (accessible={true}) for link elements inside the markdown tag, But there is no way to do it.

satya-imaginea commented 2 years ago

I too have the same issue, switched to webview.

Laudair commented 2 years ago

The children components will respect the parent accessibility role. Which in this case will always be Text.

What you can do is to set the parent component to not have any accessibility role, so that the children components can have their own accessibility props.

In the rules props function, just return the textgroup as react fragment

const rules = (props: Props): RenderRules => {
   return {
      textgroup: (children) => <>{children}</>,
      link: (node, __, ___, ____) => {
         const { content } = node.children[0];

            return (
              <Text key={node.key}  accessibilityRole="link" onPress={() => onPress()}>
                   {content}
               </Text>
                );
          },
    }

<MarkdownRenderer style={mergedMarkdownStyle} rules={rules(this.props)}>
          {children}
 </MarkdownRenderer 
JPGrefaldo commented 2 years ago

I've wrap the component with and it works i.e. ` return (

onPress()}> {content} `