Skip to content

Move View.js prop transformations to C++ prop parsing #55853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sammy-SC wants to merge 1 commit into from
Closed

Move View.js prop transformations to C++ prop parsing #55853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 82 additions & 77 deletions packages/react-native/Libraries/Components/View/View.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

import type {ViewProps} from './ViewPropTypes';

import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
import TextAncestorContext from '../../Text/TextAncestorContext';
import ViewNativeComponent from './ViewNativeComponent';
import * as React from 'react';
Expand All @@ -28,96 +29,100 @@ component View(
) {
const hasTextAncestor = use(TextAncestorContext);

const {
accessibilityState,
accessibilityValue,
'aria-busy': ariaBusy,
'aria-checked': ariaChecked,
'aria-disabled': ariaDisabled,
'aria-expanded': ariaExpanded,
'aria-hidden': ariaHidden,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-live': ariaLive,
'aria-selected': ariaSelected,
'aria-valuemax': ariaValueMax,
'aria-valuemin': ariaValueMin,
'aria-valuenow': ariaValueNow,
'aria-valuetext': ariaValueText,
id,
tabIndex,
...otherProps
} = props;

// Since we destructured props, we can now treat it as mutable
const processedProps = otherProps as {...ViewProps};

const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
if (parsedAriaLabelledBy !== undefined) {
processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
}
let resolvedProps = props;
if (!ReactNativeFeatureFlags.enableNativeViewPropTransformations()) {
const {
accessibilityState,
accessibilityValue,
'aria-busy': ariaBusy,
'aria-checked': ariaChecked,
'aria-disabled': ariaDisabled,
'aria-expanded': ariaExpanded,
'aria-hidden': ariaHidden,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-live': ariaLive,
'aria-selected': ariaSelected,
'aria-valuemax': ariaValueMax,
'aria-valuemin': ariaValueMin,
'aria-valuenow': ariaValueNow,
'aria-valuetext': ariaValueText,
id,
tabIndex,
...otherProps
} = props;

const processedProps = otherProps as {...ViewProps};

const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
if (parsedAriaLabelledBy !== undefined) {
processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
}

if (ariaLabel !== undefined) {
processedProps.accessibilityLabel = ariaLabel;
}
if (ariaLabel !== undefined) {
processedProps.accessibilityLabel = ariaLabel;
}

if (ariaLive !== undefined) {
processedProps.accessibilityLiveRegion =
ariaLive === 'off' ? 'none' : ariaLive;
}
if (ariaLive !== undefined) {
processedProps.accessibilityLiveRegion =
ariaLive === 'off' ? 'none' : ariaLive;
}

if (ariaHidden !== undefined) {
processedProps.accessibilityElementsHidden = ariaHidden;
if (ariaHidden === true) {
processedProps.importantForAccessibility = 'no-hide-descendants';
if (ariaHidden !== undefined) {
processedProps.accessibilityElementsHidden = ariaHidden;
if (ariaHidden === true) {
processedProps.importantForAccessibility = 'no-hide-descendants';
}
}
}

if (id !== undefined) {
processedProps.nativeID = id;
}
if (id !== undefined) {
processedProps.nativeID = id;
}

if (tabIndex !== undefined) {
processedProps.focusable = !tabIndex;
}
if (tabIndex !== undefined) {
processedProps.focusable = !tabIndex;
}

if (
accessibilityState != null ||
ariaBusy != null ||
ariaChecked != null ||
ariaDisabled != null ||
ariaExpanded != null ||
ariaSelected != null
) {
processedProps.accessibilityState = {
busy: ariaBusy ?? accessibilityState?.busy,
checked: ariaChecked ?? accessibilityState?.checked,
disabled: ariaDisabled ?? accessibilityState?.disabled,
expanded: ariaExpanded ?? accessibilityState?.expanded,
selected: ariaSelected ?? accessibilityState?.selected,
};
}
if (
accessibilityState != null ||
ariaBusy != null ||
ariaChecked != null ||
ariaDisabled != null ||
ariaExpanded != null ||
ariaSelected != null
) {
processedProps.accessibilityState = {
busy: ariaBusy ?? accessibilityState?.busy,
checked: ariaChecked ?? accessibilityState?.checked,
disabled: ariaDisabled ?? accessibilityState?.disabled,
expanded: ariaExpanded ?? accessibilityState?.expanded,
selected: ariaSelected ?? accessibilityState?.selected,
};
}

if (
accessibilityValue != null ||
ariaValueMax != null ||
ariaValueMin != null ||
ariaValueNow != null ||
ariaValueText != null
) {
processedProps.accessibilityValue = {
max: ariaValueMax ?? accessibilityValue?.max,
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
};
}

if (
accessibilityValue != null ||
ariaValueMax != null ||
ariaValueMin != null ||
ariaValueNow != null ||
ariaValueText != null
) {
processedProps.accessibilityValue = {
max: ariaValueMax ?? accessibilityValue?.max,
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
};
resolvedProps = processedProps;
}

const actualView =
ref == null ? (
<ViewNativeComponent {...processedProps} />
<ViewNativeComponent {...resolvedProps} />
) : (
<ViewNativeComponent {...processedProps} ref={ref} />
<ViewNativeComponent {...resolvedProps} ref={ref} />
);

if (hasTextAncestor) {
Expand Down
136 changes: 135 additions & 1 deletion packages/react-native/Libraries/Components/View/__tests__/View-itest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @fantom_flags enableNativeCSSParsing:*
* @fantom_flags enableNativeCSSParsing:* enableNativeViewPropTransformations:*
* @format
*/

Expand Down Expand Up @@ -578,6 +578,140 @@ describe('<View>', () => {
});
});

describe('overlapping aria-label and accessibilityLabel', () => {
it('preserves accessibilityLabel when aria-label is removed', () => {
const root = Fantom.createRoot();

// Set both aria-label and accessibilityLabel
Fantom.runTask(() => {
root.render(
<View
aria-label="aria value"
accessibilityLabel="native value"
accessible={true}
/>,
);
});

// aria-label should take precedence
expect(
root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
).toEqual(<rn-view accessibilityLabel="aria value" />);

// Remove aria-label but keep accessibilityLabel
Fantom.runTask(() => {
root.render(
<View accessibilityLabel="native value" accessible={true} />,
);
});

// accessibilityLabel should still be "native value"
expect(
root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
).toEqual(<rn-view accessibilityLabel="native value" />);
});
});

describe('overlapping aria-hidden and importantForAccessibility', () => {
it('preserves importantForAccessibility when aria-hidden is removed', () => {
const root = Fantom.createRoot();

// Set both aria-hidden and importantForAccessibility
Fantom.runTask(() => {
root.render(
<View
aria-hidden={true}
importantForAccessibility="no-hide-descendants"
accessible={true}
/>,
);
});

expect(
root
.getRenderedOutput({props: ['importantForAccessibility']})
.toJSX(),
).toEqual(
<rn-view importantForAccessibility="no-hide-descendants" />,
);

// Remove aria-hidden but keep importantForAccessibility
Fantom.runTask(() => {
root.render(
<View
importantForAccessibility="no-hide-descendants"
accessible={true}
/>,
);
});

// importantForAccessibility should still be "no-hide-descendants"
expect(
root
.getRenderedOutput({props: ['importantForAccessibility']})
.toJSX(),
).toEqual(
<rn-view importantForAccessibility="no-hide-descendants" />,
);
});
});

describe('aria-hidden={false} with importantForAccessibility', () => {
it('does not overwrite explicit importantForAccessibility', () => {
const root = Fantom.createRoot();

// Set importantForAccessibility="yes" and aria-hidden={false}.
// aria-hidden={false} should NOT reset importantForAccessibility
// to Auto, it should preserve the explicit "yes" value.
Fantom.runTask(() => {
root.render(
<View
importantForAccessibility="yes"
aria-hidden={false}
collapsable={false}
/>,
);
});

expect(
root
.getRenderedOutput({props: ['importantForAccessibility']})
.toJSX(),
).toEqual(<rn-view importantForAccessibility="yes" />);
});
});

describe('overlapping aria-live and accessibilityLiveRegion', () => {
it('preserves accessibilityLiveRegion when aria-live is removed', () => {
const root = Fantom.createRoot();

// Set both aria-live and accessibilityLiveRegion
Fantom.runTask(() => {
root.render(
<View
aria-live="polite"
accessibilityLiveRegion="assertive"
accessible={true}
/>,
);
});

// Remove aria-live but keep accessibilityLiveRegion
Fantom.runTask(() => {
root.render(
<View accessibilityLiveRegion="assertive" accessible={true} />,
);
});

// accessibilityLiveRegion should still be "assertive"
expect(
root
.getRenderedOutput({props: ['accessibilityLiveRegion']})
.toJSX(),
).toEqual(<rn-view accessibilityLiveRegion="assertive" />);
});
});

describe('aria-live', () => {
it('is mapped to accessibilityLiveRegion', () => {
const root = Fantom.createRoot();
Expand Down
15 changes: 15 additions & 0 deletions packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ const validAttributesForNonEventProps = {
renderToHardwareTextureAndroid: true,
testID: true,
nativeID: true,
id: true,
accessibilityLabelledBy: true,
accessibilityLabel: true,
accessibilityHint: true,
Expand All @@ -226,6 +227,19 @@ const validAttributesForNonEventProps = {
experimental_accessibilityOrder: true,
importantForAccessibility: true,
screenReaderFocusable: true,
'aria-busy': true,
'aria-checked': true,
'aria-disabled': true,
'aria-expanded': true,
'aria-hidden': true,
'aria-label': true,
'aria-labelledby': true,
'aria-live': true,
'aria-selected': true,
'aria-valuemax': true,
'aria-valuemin': true,
'aria-valuenow': true,
'aria-valuetext': true,
role: true,
rotation: true,
scaleX: true,
Expand Down Expand Up @@ -368,6 +382,7 @@ const validAttributesForNonEventProps = {
borderBlockEndColor: colorAttribute,
borderBlockStartColor: colorAttribute,
focusable: true,
tabIndex: true,
backfaceVisibility: true,
} as const;

Expand Down
15 changes: 15 additions & 0 deletions packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,22 @@ const validAttributesForNonEventProps = {
transformOrigin: true,
accessibilityRole: true,
accessibilityState: true,
'aria-busy': true,
'aria-checked': true,
'aria-disabled': true,
'aria-expanded': true,
'aria-hidden': true,
'aria-label': true,
'aria-labelledby': true,
'aria-live': true,
'aria-selected': true,
'aria-valuemax': true,
'aria-valuemin': true,
'aria-valuenow': true,
'aria-valuetext': true,
tabIndex: true,
nativeID: true,
id: true,
pointerEvents: true,
removeClippedSubviews: true,
role: true,
Expand Down
Loading
Loading