Custom Component Mappings

[jerrywithaz]

Is there an existing request?

• [X] I have searched for this request

Describe the feature request

I am assessing using this library for a company that I work for and we prefer to use semantic html for everything. I understand that from an accessibility standpoint using things like a div instead of a p tag are not a big deal, but we prefer to be as semantically accurate as possible. Would you be open to providing a custom api for providing our own roleComponents?

I'm specifically referring to here: https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js

I'm envisioning something where we can add a line like this at the beginning of our code:

ReactNativeWeb.setRoleComponents({ ... })

Or using a global variable:

global.roleComponents = {}

[necolas]

we prefer to be as semantically accurate as possible

What does this mean in practice? Please tell me what you're trying to accomplish, why, and what the consequence is.

[jerrywithaz]

we prefer to be as semantically accurate as possible

What does this mean in practice?

A p for paragraphs, a button for buttons. Although modern screen readers can recognize roles, I work in an industry where having semantic html ensures older technology users can get the best accessibility. So, as to not force everyone to use those tags, I thought it would be helpful if we could just have an escape hatch to provide our own mappings.

[necolas]

There's already an issue for changing button https://github.com/necolas/react-native-web/issues/1899. We may as well map paragraph to p and leave the responsibility to avoid HTML conformance errors to developers. I'd rather do that than add a API that allows for arbitrary element replacement. Is it just p and button, or are there any more details to be aware of?

[necolas]

Anything to add? You asked for something, I'm trying to provide it, but get no response

[necolas]

Closing due to lack of follow-up

[michaeltrinh7]

Hi @necolas,

The package is really cool. I really love it. Thank you and your team :)

I notice that the list of roleComponents is not enough. There are more standard html tags. You can check the full list at https://www.w3schools.com/TAgs/default.asp. I believe that there will be more html tags in the future. It would be great if you can provide a functionality/ability that developers can extend roleComponents by themselves (something like jerrywithaz mentioned in his comment: call ReactNativeWeb.setRoleComponents({ ... }) or global.roleComponents = {} to manually add more into roleComponents)

Finally I think there are some very popular tags we should support

• button: there is already a ticket for it #1899
• p: paragraph tag
• input: there are more than 20 types of control that can be used with input such as text, button, checkbox, uploading file, image,... (you can check all at https://www.w3schools.com/TAgs/tag_input.asp)
• ol: ordered list that will show a list of items in an ordered way such as 1. 2. 3. 4. (whereas ul will show a list of items in unordered way)
• br: break line tag

Above are my 2cents.