Screen reader issue with unordered list.

mmacartney10 commented 1 year ago

Decision Table

[X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
[X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

[X] I have read the HELP document here: https://git.io/JBi6R
[X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
[X] I have confirmed that this bug has not been reported yet

Description

I am rendering an unordered list like in the example below:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The issue i'm facing is that the word "space" is read out by the screen reader when scrolling through this list. So for the example above it will read: "space", "one", "space", "two", "space", "three". This text is caused by the bulletpoint. I think it would be a good idea to add some accessibility labels to this bulletpoint so that it doesn't read out the word "space".

React Native Information

"react": "17.0.2",
"react-native": "0.68.5",

RNRH Version

6.3.4

Tested Platforms

[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Reproduction Platforms

[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Minimal, Reproducible Example

import React from 'react'
import { View } from "react-native";
import HTML from "react-native-render-html";

const Example = (): JSX.Element => {

  const source = {html: "<ul><li>one</li><li>two</li><li>three</li></ul>"};

  return (
    <View>
      <HTML source={source} />
    </View>
  );
};

export default Example;

Additional Notes

No response

Pramod-Aswani1012 commented 1 year ago

I would like to solve this issue

neonbhai commented 1 year ago

@jsamr could you please provide the steps on how I could solve this issue? I would to contribute to this project and raise a PR!

meliorence / react-native-render-html