mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-05 09:29:53 +08:00
41159bcb10
There are certain contexts where using a `div` is invalid HTML and may cause rendering issues. Change the default element created by `createReactDOMComponent` to a `span`. **Appendix** The following HTML results a validator error. <!DOCTYPE html> <head> <meta charset="utf-8"> <title>test</title> <button><div>a</div></button> Error: Element `div` not allowed as child of element `button` in this context. Source: https://validator.w3.org/nu/#textarea
59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import React, { PropTypes } from 'react'
|
|
import StyleSheet from '../../apis/StyleSheet'
|
|
|
|
const roleComponents = {
|
|
article: 'article',
|
|
banner: 'header',
|
|
button: 'button',
|
|
complementary: 'aside',
|
|
contentinfo: 'footer',
|
|
form: 'form',
|
|
heading: 'h1',
|
|
link: 'a',
|
|
list: 'ul',
|
|
listitem: 'li',
|
|
main: 'main',
|
|
navigation: 'nav',
|
|
region: 'section'
|
|
}
|
|
|
|
const createReactDOMComponent = ({
|
|
accessibilityLabel,
|
|
accessibilityLiveRegion,
|
|
accessibilityRole,
|
|
accessible = true,
|
|
component = 'span',
|
|
testID,
|
|
type,
|
|
...other
|
|
}) => {
|
|
const role = accessibilityRole
|
|
const Component = role && roleComponents[role] ? roleComponents[role] : component
|
|
|
|
return (
|
|
<Component
|
|
{...other}
|
|
{...StyleSheet.resolve(other)}
|
|
aria-hidden={accessible ? null : true}
|
|
aria-label={accessibilityLabel}
|
|
aria-live={accessibilityLiveRegion}
|
|
data-testid={testID}
|
|
role={role}
|
|
type={role === 'button' ? 'button' : type}
|
|
/>
|
|
)
|
|
}
|
|
|
|
createReactDOMComponent.propTypes = {
|
|
accessibilityLabel: PropTypes.string,
|
|
accessibilityLiveRegion: PropTypes.oneOf([ 'assertive', 'off', 'polite' ]),
|
|
accessibilityRole: PropTypes.string,
|
|
accessible: PropTypes.bool,
|
|
component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]),
|
|
style: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]),
|
|
testID: PropTypes.string,
|
|
type: PropTypes.string
|
|
}
|
|
|
|
module.exports = createReactDOMComponent
|