[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:
Andrew Hayward
2021-06-22 17:48:19 +01:00
committed by Nicolas Gallagher
parent b2eb3ca03f
commit ba3c728f2c
2 changed files with 57 additions and 10 deletions
@@ -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
View File
@@ -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';