mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-25 15:42:24 +00:00
[fix] Image does not set persistent click handler
Only set the click handler if it is needed. This was previously always set, which caused screen readers to announce the element as "clickable". Close #2061
This commit is contained in:
committed by
Nicolas Gallagher
parent
b2eb3ca03f
commit
ba3c728f2c
@@ -155,6 +155,34 @@ describe('components/Text', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('prop "onClick"', () => {
|
||||
test('is called', () => {
|
||||
const onClick = jest.fn();
|
||||
const ref = React.createRef();
|
||||
act(() => {
|
||||
render(<Text onClick={onClick} ref={ref} />);
|
||||
});
|
||||
const target = createEventTarget(ref.current);
|
||||
act(() => {
|
||||
target.click();
|
||||
});
|
||||
expect(onClick).toBeCalled();
|
||||
});
|
||||
|
||||
test('is still called if "onPress" is provided', () => {
|
||||
const onClick = jest.fn();
|
||||
const ref = React.createRef();
|
||||
act(() => {
|
||||
render(<Text onClick={onClick} onPress={() => {}} ref={ref} />);
|
||||
});
|
||||
const target = createEventTarget(ref.current);
|
||||
act(() => {
|
||||
target.click();
|
||||
});
|
||||
expect(onClick).toBeCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('prop "onFocus"', () => {
|
||||
test('is called', () => {
|
||||
const onFocus = jest.fn();
|
||||
@@ -184,6 +212,19 @@ describe('components/Text', () => {
|
||||
});
|
||||
expect(onPress).toBeCalled();
|
||||
});
|
||||
|
||||
test('is not called if "onClick" is provided', () => {
|
||||
const onPress = jest.fn();
|
||||
const ref = React.createRef();
|
||||
act(() => {
|
||||
render(<Text onClick={() => {}} onPress={onPress} ref={ref} />);
|
||||
});
|
||||
const target = createEventTarget(ref.current);
|
||||
act(() => {
|
||||
target.click();
|
||||
});
|
||||
expect(onPress).not.toBeCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('prop "ref"', () => {
|
||||
|
||||
+16
-10
@@ -104,15 +104,17 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
|
||||
onStartShouldSetResponderCapture
|
||||
});
|
||||
|
||||
function handleClick(e) {
|
||||
if (onClick != null) {
|
||||
onClick(e);
|
||||
}
|
||||
if (onClick == null && onPress != null) {
|
||||
e.stopPropagation();
|
||||
onPress(e);
|
||||
}
|
||||
}
|
||||
const handleClick = React.useCallback(
|
||||
(e) => {
|
||||
if (onClick != null) {
|
||||
onClick(e);
|
||||
} else if (onPress != null) {
|
||||
e.stopPropagation();
|
||||
onPress(e);
|
||||
}
|
||||
},
|
||||
[onClick, onPress]
|
||||
);
|
||||
|
||||
let component = hasTextAncestor ? 'span' : 'div';
|
||||
const supportedProps = pickProps(props);
|
||||
@@ -122,7 +124,11 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
|
||||
if (!hasTextAncestor) {
|
||||
supportedProps.dir = dir != null ? dir : 'auto';
|
||||
}
|
||||
supportedProps.onClick = handleClick;
|
||||
|
||||
if (onClick || onPress) {
|
||||
supportedProps.onClick = handleClick;
|
||||
}
|
||||
|
||||
supportedProps.style = style;
|
||||
if (props.href != null) {
|
||||
component = 'a';
|
||||
|
||||
Reference in New Issue
Block a user