Skip to content

Commit

Permalink
fix: anchors are now not accessible when href is empty or absent
Browse files Browse the repository at this point in the history
  • Loading branch information
jsamr committed Sep 4, 2021
1 parent 1c79bc3 commit 4e1f2f4
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 26 deletions.
2 changes: 1 addition & 1 deletion packages/render-html/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
"dependencies": {
"@jsamr/counter-style": "^2.0.1",
"@jsamr/react-native-li": "^2.3.0",
"@native-html/transient-render-engine": "10.0.0",
"@native-html/transient-render-engine": "10.0.2",
"@types/ramda": "^0.27.40",
"@types/urijs": "^1.19.15",
"prop-types": "^15.5.7",
Expand Down
26 changes: 26 additions & 0 deletions packages/render-html/src/__tests__/component.render-html.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,32 @@ describe('RenderHTML', () => {
act(() => anchor.props.onPress?.({}));
expect(onPress).toHaveBeenCalled();
});
it('should add accessibility features to anchors when href is non-empty', () => {
const { getByTestId } = render(
<RenderHTML
source={{
html: `<a href="https://domain.com">test</a>`
}}
debug={false}
contentWidth={0}
/>
);
expect(getByTestId('a').props.accessibilityRole).toBe('link');
expect(getByTestId('a').props.accessible).toBe(true);
});
it('should not add accessibility features to anchors when href is empty', () => {
const { getByTestId } = render(
<RenderHTML
source={{
html: `<a href="">test</a>`
}}
debug={false}
contentWidth={0}
/>
);
expect(getByTestId('a').props.accessibilityRole).not.toBeDefined();
expect(getByTestId('a').props.accessible).not.toBeDefined();
});
it("should add accessibility role 'header' to headings", () => {
for (const header of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) {
const { getByTestId } = render(
Expand Down
10 changes: 0 additions & 10 deletions packages/render-html/src/elements/AElement.tsx

This file was deleted.

13 changes: 3 additions & 10 deletions packages/render-html/src/renderers/ARenderer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React from 'react';
import { InternalMixedRenderer } from '../render/render-types';
import { TNode, DocumentContext } from '@native-html/transient-render-engine';
import { InternalRendererProps, RenderersProps } from '../shared-types';
import { AccessibilityProps, GestureResponderEvent } from 'react-native';
import AElement from '../elements/AElement';
import { GestureResponderEvent } from 'react-native';
import useNormalizedUrl from '../hooks/useNormalizedUrl';
import { useDocumentMetadata } from '../context/DocumentMetadataProvider';
import { useRendererProps } from '../context/RenderersPropsProvider';
Expand Down Expand Up @@ -40,20 +39,14 @@ export function useAElementProps<T extends TNode>(
if (typeof syntheticAnchorOnLinkPress !== 'function') {
return props;
}
const accessibilityProps: AccessibilityProps = {
accessible: true,
accessibilityRole: 'link'
};
return {
...props,
onPress: syntheticAnchorOnLinkPress,
textProps: accessibilityProps,
viewProps: accessibilityProps
onPress: syntheticAnchorOnLinkPress
};
}

const ARenderer: InternalMixedRenderer = (props) => {
return React.createElement(AElement, useAElementProps(props));
return React.createElement(props.TDefaultRenderer, useAElementProps(props));
};

export default ARenderer;
10 changes: 5 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4380,9 +4380,9 @@ __metadata:
languageName: node
linkType: hard

"@native-html/transient-render-engine@npm:10.0.0":
version: 10.0.0
resolution: "@native-html/transient-render-engine@npm:10.0.0"
"@native-html/transient-render-engine@npm:10.0.2":
version: 10.0.2
resolution: "@native-html/transient-render-engine@npm:10.0.2"
dependencies:
"@native-html/css-processor": 1.10.2
"@types/ramda": ^0.27.44
Expand All @@ -4394,7 +4394,7 @@ __metadata:
peerDependencies:
"@types/react-native": "*"
react-native: ^*
checksum: 5830444fd08f6db40226fddc583b743452e9386538059fda32e2e20f7bf76b2972c837a12bce82353622f41a2dfd5665ab61071abbf6260c499b4603e79d7777
checksum: 3d5854625d30ed5b1c451c093ea6130cfd925e8f12d77d5c896895c7d236a4c322a3e9080eb02e5bd104e7e03123837f20a76b7fbe1f309eb3b5d5947f8b5150
languageName: node
linkType: hard

Expand Down Expand Up @@ -19965,7 +19965,7 @@ fsevents@^1.2.7:
"@jsamr/counter-style": ^2.0.1
"@jsamr/react-native-li": ^2.3.0
"@microsoft/api-extractor": ^7.14.0
"@native-html/transient-render-engine": 10.0.0
"@native-html/transient-render-engine": 10.0.2
"@release-it/conventional-changelog": ^2.0.1
"@testing-library/react-hooks": ^7.0.0
"@testing-library/react-native": ^7.2.0
Expand Down

0 comments on commit 4e1f2f4

Please sign in to comment.