diff --git a/packages/docs/src/pages/docs/concepts/accessibility.md b/packages/docs/src/pages/docs/concepts/accessibility.md index 71df0b11..07629738 100644 --- a/packages/docs/src/pages/docs/concepts/accessibility.md +++ b/packages/docs/src/pages/docs/concepts/accessibility.md @@ -58,6 +58,10 @@ Equivalent to [aria-colspan](https://www.w3.org/TR/wai-aria-1.2/#aria-colspan). Equivalent to [aria-controls](https://www.w3.org/TR/wai-aria-1.2/#aria-controls). {% endcall %} +{% call macro.prop('accessibilityCurrent', '?(boolean | 'page' | 'step' | 'location' | 'date' | 'time')') %} +Equivalent to [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current). +{% endcall %} + {% call macro.prop('accessibilityDescribedBy', '?string') %} Equivalent to [aria-describedby](https://www.w3.org/TR/wai-aria-1.2/#aria-describedby). {% endcall %} diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js index c61b55ad..8f53051c 100644 --- a/packages/react-native-web/src/exports/View/types.js +++ b/packages/react-native-web/src/exports/View/types.js @@ -34,6 +34,7 @@ export type AccessibilityProps = {| accessibilityColumnIndex?: ?number, accessibilityColumnSpan?: ?number, accessibilityControls?: ?idRefList, + accessibilityCurrent?: ?(boolean | 'page' | 'step' | 'location' | 'date' | 'time'), accessibilityDescribedBy?: ?idRef, accessibilityDetails?: ?idRef, accessibilityDisabled?: ?boolean, diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js index 8358d63f..f3f031ae 100644 --- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js @@ -113,6 +113,15 @@ describe('exports/createElement', () => { expect(getAttribute(hasValue, 'aria-controls')).toBe('abc'); }); + test('accessibilityCurrent', () => { + const { container: isEmpty } = render(createElement('div', { accessibilityCurrent: null })); + expect(getAttribute(isEmpty, 'aria-current')).toBeNull(); + const { container: hasValue } = render( + createElement('div', { accessibilityCurrent: 'page' }) + ); + expect(getAttribute(hasValue, 'aria-current')).toBe('page'); + }); + test('accessibilityDescribedBy', () => { const { container: isEmpty } = render( createElement('div', { accessibilityDescribedBy: null }) diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js index d11ac563..ae53dfd8 100644 --- a/packages/react-native-web/src/modules/createDOMProps/index.js +++ b/packages/react-native-web/src/modules/createDOMProps/index.js @@ -73,6 +73,7 @@ const createDOMProps = (elementType, props) => { accessibilityColumnIndex, accessibilityColumnSpan, accessibilityControls, + accessibilityCurrent, accessibilityDescribedBy, accessibilityDetails, accessibilityDisabled, @@ -194,6 +195,9 @@ const createDOMProps = (elementType, props) => { if (accessibilityControls != null) { domProps['aria-controls'] = accessibilityControls; } + if (accessibilityCurrent != null) { + domProps['aria-current'] = accessibilityCurrent; + } if (accessibilityDescribedBy != null) { domProps['aria-describedby'] = accessibilityDescribedBy; } diff --git a/packages/react-native-web/src/modules/forwardedProps/index.js b/packages/react-native-web/src/modules/forwardedProps/index.js index 5914b67b..35782de4 100644 --- a/packages/react-native-web/src/modules/forwardedProps/index.js +++ b/packages/react-native-web/src/modules/forwardedProps/index.js @@ -26,6 +26,7 @@ export const accessibilityProps = { accessibilityColumnIndex: true, accessibilityColumnSpan: true, accessibilityControls: true, + accessibilityCurrent: true, accessibilityDescribedBy: true, accessibilityDetails: true, accessibilityDisabled: true,