diff --git a/packages/render-html/package.json b/packages/render-html/package.json index 99bd4deb4..dd38b362a 100644 --- a/packages/render-html/package.json +++ b/packages/render-html/package.json @@ -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", diff --git a/packages/render-html/src/__tests__/component.render-html.test.tsx b/packages/render-html/src/__tests__/component.render-html.test.tsx index ef031ef3c..4e5b01e30 100644 --- a/packages/render-html/src/__tests__/component.render-html.test.tsx +++ b/packages/render-html/src/__tests__/component.render-html.test.tsx @@ -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( + test` + }} + 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( + test` + }} + 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( diff --git a/packages/render-html/src/elements/AElement.tsx b/packages/render-html/src/elements/AElement.tsx deleted file mode 100644 index 444787838..000000000 --- a/packages/render-html/src/elements/AElement.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { TBlock, TPhrasing, TText } from '@native-html/transient-render-engine'; -import { InternalRendererProps } from '../shared-types'; - -export default function AElement({ - TDefaultRenderer, - ...props -}: InternalRendererProps) { - return React.createElement(TDefaultRenderer, props); -} diff --git a/packages/render-html/src/renderers/ARenderer.tsx b/packages/render-html/src/renderers/ARenderer.tsx index 1c6474ca8..3169bd8fc 100644 --- a/packages/render-html/src/renderers/ARenderer.tsx +++ b/packages/render-html/src/renderers/ARenderer.tsx @@ -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'; @@ -40,20 +39,14 @@ export function useAElementProps( 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; diff --git a/yarn.lock b/yarn.lock index cfef120a8..d4bb9c524 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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 @@ -4394,7 +4394,7 @@ __metadata: peerDependencies: "@types/react-native": "*" react-native: ^* - checksum: 5830444fd08f6db40226fddc583b743452e9386538059fda32e2e20f7bf76b2972c837a12bce82353622f41a2dfd5665ab61071abbf6260c499b4603e79d7777 + checksum: 3d5854625d30ed5b1c451c093ea6130cfd925e8f12d77d5c896895c7d236a4c322a3e9080eb02e5bd104e7e03123837f20a76b7fbe1f309eb3b5d5947f8b5150 languageName: node linkType: hard @@ -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