From 550afdc81dc8a060130e995b09cda48f2053de2e Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Tue, 21 Mar 2023 12:52:07 -0700
Subject: [PATCH] Update documentation to match API changes

---
 .../src/pages/docs/apis/style-sheet.md        |   1 -
 .../src/pages/docs/appendix/unstable-apis.md  |   1 -
 .../src/pages/docs/components/text-input.md   |  38 ++---
 .../src/pages/docs/components/text.md         |  33 ++---
 .../src/pages/docs/components/view.md         |  31 ++--
 .../src/pages/docs/concepts/accessibility.md  | 125 ++++++++--------
 .../src/pages/docs/concepts/interactions.md   |  27 ++--
 .../src/pages/docs/concepts/localization.md   |   3 +-
 .../src/pages/docs/concepts/styling.md        | 134 ++++--------------
 .../pages/docs/hooks/use-locale-context.md    |   1 -
 10 files changed, 157 insertions(+), 237 deletions(-)

diff --git a/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md b/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md
index c00a6a7d3..3b15ed719 100644
--- a/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md
+++ b/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md
@@ -5,7 +5,6 @@ permalink: /docs/style-sheet/index.html
 eleventyNavigation:
   key: StyleSheet
   parent: APIs
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
diff --git a/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md b/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md
index f8cc6d1a6..eb8058592 100644
--- a/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md
+++ b/packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md
@@ -7,7 +7,6 @@ eleventyNavigation:
   key: Unstable APIs
   parent: Appendix
   order: 1
-  label: "Change"
 ---
 
 :::lead
diff --git a/packages/react-native-web-docs/src/pages/docs/components/text-input.md b/packages/react-native-web-docs/src/pages/docs/components/text-input.md
index 30a5b48e7..50c7673d9 100644
--- a/packages/react-native-web-docs/src/pages/docs/components/text-input.md
+++ b/packages/react-native-web-docs/src/pages/docs/components/text-input.md
@@ -5,6 +5,7 @@ permalink: /docs/text-input/index.html
 eleventyNavigation:
   key: TextInput
   parent: Components
+  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -31,12 +32,16 @@ import { TextInput } from 'react-native-web';
 The [accessibility props]({{ '/docs/accessibility' | url }}).
 {% endcall %}
 
-{% call macro.prop('...ClickProps') %}
-The [click props]({{ '/docs/interactions' | url }}).
+{% call macro.prop('...PointerProps') %}
+The [PointerEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...FocusProps') %}
-The [focus props]({{ '/docs/interactions' | url }}).
+The [FocusEvent props]({{ '/docs/interactions' | url }}).
+{% endcall %}
+
+{% call macro.prop('...KeyboardProps') %}
+The [KeyboardEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('autoCapitalize', '?string') %}
@@ -79,11 +84,15 @@ Equivalent to [HTMLElement.dir](https://developer.mozilla.org/en-US/docs/Web/API
 Equivalent to [HTMLElement.disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
 {% endcall %}
 
-{% call macro.prop('editable', '?boolean = true') %}
-Equivalent to [HTMLElement.readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+{% call macro.prop('enterKeyHint', '?string') %}
+Specifies what action label (or icon) to present for the enter key on virtual keyboards. Equivalent to [HTMLElement.enterkeyhint](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute)
+{% endcall %}
+
+{% call macro.prop('id', '?string') %}
+Equivalent to [HTMLElement.id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
 {% endcall %}
 
-{% call macro.prop('keyboardType', '?string') %}
+{% call macro.prop('inputMode', '?string') %}
 Hints at the type of data that might be entered by the user while editing the element or its contents. Equivalent to [HTMLElement.inputMode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). Safari iOS requires an ancestral `<form action>` element to display the search keyboard. (Not available when multiline is true.)
 {% endcall %}
 
@@ -99,14 +108,6 @@ Equivalent to [HTMLElement.maxlength](https://developer.mozilla.org/en-US/docs/W
 If `true`, the text input can be multiple lines.
 {% endcall %}
 
-{% call macro.prop('nativeID', '?string') %}
-Equivalent to [HTMLElement.id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
-{% endcall %}
-
-{% call macro.prop('numberOfLines', '?number = 1') %}
-Sets the number of lines for a multiline input. (Requires `multiline` to be `true`.)
-{% endcall %}
-
 {% call macro.prop('onChange', '?(e: ChangeEvent) => void') %}
 Equivalent to the React DOM `ChangeEvent`.
 {% endcall %}
@@ -139,7 +140,6 @@ Callback that is called when the text input's selection changes.
 Callback that is called when the keyboard's submit button is pressed. When `multiline={true}`, this is only called if `blurOnSubmit={true}`.
 {% endcall %}
 
-
 {% call macro.prop('placeholder', '?boolean') %}
 Text that appears in the form control when it has no value set.
 {% endcall %}
@@ -148,8 +148,12 @@ Text that appears in the form control when it has no value set.
 Equivalent to defining `::placeholder { color }` via a CSS property.
 {% endcall %}
 
-{% call macro.prop('returnKeyType', '?string') %}
-Specifies what action label (or icon) to present for the enter key on virtual keyboards. Equivalent to [HTMLElement.enterkeyhint](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute)
+{% call macro.prop('readOnly', '?boolean = false') %}
+Equivalent to [HTMLElement.readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+{% endcall %}
+
+{% call macro.prop('rows', '?number = 1') %}
+Sets the number of lines for a multiline input. (Requires `multiline` to be `true`.)
 {% endcall %}
 
 {% call macro.prop('secureTextEntry', '?boolean = false') %}
diff --git a/packages/react-native-web-docs/src/pages/docs/components/text.md b/packages/react-native-web-docs/src/pages/docs/components/text.md
index d7be63df9..4a594975b 100644
--- a/packages/react-native-web-docs/src/pages/docs/components/text.md
+++ b/packages/react-native-web-docs/src/pages/docs/components/text.md
@@ -5,6 +5,7 @@ permalink: /docs/text/index.html
 eleventyNavigation:
   key: Text
   parent: Components
+  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -21,7 +22,7 @@ import { Text } from 'react-native';
 <Text {...props}>{children}</Text>;
 ```
 
-::: callout 
+::: callout
 **Did you know?** Text styling in {{ site.name }} has stricter rules than it does on the web. Read the [Styling]({{ '/docs/styling' | url }}) guide to learn more.
 :::
 
@@ -35,20 +36,20 @@ import { Text } from 'react-native';
 The [accessibility props]({{ '/docs/accessibility' | url }}).
 {% endcall %}
 
-{% call macro.prop('...ClickProps') %}
-The [click props]({{ '/docs/interactions' | url }}).
+{% call macro.prop('...PointerProps') %}
+The [PointerEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...FocusProps') %}
-The [focus props]({{ '/docs/interactions' | url }}).
+The [FocusEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...KeyboardProps') %}
-The [keyboard props]({{ '/docs/interactions' | url }}).
+The [KeyboardEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...ResponderProps') %}
-The [responder props]({{ '/docs/interactions' | url }}).
+The [ResponderEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('children', 'any') %}
@@ -63,10 +64,6 @@ Equivalent to [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web
 Equivalent to [HTMLElement.dir](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir). The default value of `"auto"` is not set on *nested* text elements.
 {% endcall %}
 
-{% call macro.prop('focusable', '?boolean') %}
-Set whether the view can receive keyboard focus.
-{% endcall %}
-
 {% call macro.prop('href', '?string') %}
 If `href` is defined, the view is rendered as an anchor tag pointing to this URL.
 {% endcall %}
@@ -75,12 +72,12 @@ If `href` is defined, the view is rendered as an anchor tag pointing to this URL
 If `href` is defined, this prop defines related attributes to include on the anchor (e.g., `download`, `rel`, `target`) which may modify its behavior.
 {% endcall %}
 
-{% call macro.prop('lang', '?string') %}
-Equivalent to [HTMLElement.lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). This prop is used to infer writing direction if no `dir` is set.
+{% call macro.prop('id', '?string') %}
+Equivalent to [HTMLElement.id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
 {% endcall %}
 
-{% call macro.prop('nativeID', '?string') %}
-Equivalent to [HTMLElement.id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+{% call macro.prop('lang', '?string') %}
+Equivalent to [HTMLElement.lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). This prop is used to infer writing direction if no `dir` is set.
 {% endcall %}
 
 {% call macro.prop('numberOfLines', '?number') %}
@@ -91,14 +88,14 @@ Truncates the text with an ellipsis after this many lines.
 This is invoked when a component is mounted and when its layout changes. `x` and `y` are the offsets from the parent node.
 {% endcall %}
 
-{% call macro.prop('selectable', '?boolean = true') %}
-When `false`, the text is not selectable.
-{% endcall %}
-
 {% call macro.prop('style', '?Style') %}
 Set the styles of the text. `Text` supports typographic styles in addition to those of `View`.
 {% endcall %}
 
+{% call macro.prop('tabIndex', '0 | -1') %}
+Set whether the view can receive keyboard focus.
+{% endcall %}
+
 {% call macro.prop('testID', '?string') %}
 Set the test selector label (via `data-testid`).
 {% endcall %}
diff --git a/packages/react-native-web-docs/src/pages/docs/components/view.md b/packages/react-native-web-docs/src/pages/docs/components/view.md
index 4e6ce8a77..01ed1fbbf 100644
--- a/packages/react-native-web-docs/src/pages/docs/components/view.md
+++ b/packages/react-native-web-docs/src/pages/docs/components/view.md
@@ -5,6 +5,7 @@ permalink: /docs/view/index.html
 eleventyNavigation:
   key: View
   parent: Components
+  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -37,20 +38,20 @@ import { View } from 'react-native';
 The [accessibility props]({{ '/docs/accessibility' | url }}).
 {% endcall %}
 
-{% call macro.prop('...ClickProps') %}
-The [click props]({{ '/docs/interactions' | url }}).
+{% call macro.prop('...PointerProps') %}
+The [PointerEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...FocusProps') %}
-The [focus props]({{ '/docs/interactions' | url }}).
+The [FocusEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...KeyboardProps') %}
-The [keyboard props]({{ '/docs/interactions' | url }}).
+The [KeyboardEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('...ResponderProps') %}
-The [responder props]({{ '/docs/interactions' | url }}).
+The [ResponderEvent props]({{ '/docs/interactions' | url }}).
 {% endcall %}
 
 {% call macro.prop('children', 'any') %}
@@ -65,10 +66,6 @@ Equivalent to [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web
 Equivalent to [HTMLElement.dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).
 {% endcall %}
 
-{% call macro.prop('focusable', '?boolean') %}
-Set whether the view can receive keyboard focus.
-{% endcall %}
-
 {% call macro.prop('href', '?string') %}
 If `href` is defined, the view is rendered as an anchor tag pointing to this URL.
 {% endcall %}
@@ -77,26 +74,26 @@ If `href` is defined, the view is rendered as an anchor tag pointing to this URL
 If `href` is defined, this prop defines related attributes to include on the anchor (e.g., `download`, `rel`, `target`) which may modify its behavior.
 {% endcall %}
 
-{% call macro.prop('lang', '?string') %}
-Equivalent to [HTMLElement.lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). This prop is used to infer writing direction if no `dir` is set.
+{% call macro.prop('id', '?string') %}
+Equivalent to [HTMLElement.id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
 {% endcall %}
 
-{% call macro.prop('nativeID', '?string') %}
-Equivalent to [HTMLElement.id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
+{% call macro.prop('lang', '?string') %}
+Equivalent to [HTMLElement.lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). This prop is used to infer writing direction if no `dir` is set.
 {% endcall %}
 
 {% call macro.prop('onLayout', '?({ nativeEvent: { layout: { x, y, width, height } } }) => void') %}
 This is invoked when a component is mounted and when its layout changes. `x` and `y` are the offsets from the parent node.
 {% endcall %}
 
-{% call macro.prop('pointerEvents', '?("all" | "none" | "box-only" | "box-none")') %}
-Equivalent to [CSS pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) with 2 additional values. A value of `"box-none"` preserves pointer events on the element's children; `"box-only"` disables pointer events on the element's children.
-{% endcall %}
-
 {% call macro.prop('style', '?Style') %}
 Set the styles of the view.
 {% endcall %}
 
+{% call macro.prop('tabIndex', '0 | -1') %}
+Set whether the view can receive keyboard focus.
+{% endcall %}
+
 {% call macro.prop('testID', '?string') %}
 Set the test selector label (via `data-testid`).
 {% endcall %}
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md b/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md
index 4ade02a64..73b24fce1 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md
@@ -5,6 +5,7 @@ permalink: /docs/accessibility/index.html
 eleventyNavigation:
   key: Accessibility
   parent: Concepts
+  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -19,189 +20,189 @@ Accessibility in {{ site.name }} combines several separate web APIs into a cohes
 
 ## Accessibility Props API
 
-{{ site.name }} includes APIs for making accessible apps. The most common and well supported accessibility features of the Web are exposed as platform-agnostic `accessibility*` props.
+{{ site.name }} includes APIs for making accessible apps. (Note that the React Native-specific `accessibility*` props are deprecated in favor of `aria-*` props).
 
-{% call macro.prop('accessibilityActiveDescendant', '?string') %}
+{% call macro.prop('aria-activedescendant', '?string') %}
 Equivalent to [aria-activedescendant](https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant).
 {% endcall %}
 
-{% call macro.prop('accessibilityAtomic', '?boolean') %}
+{% call macro.prop('aria-atomic', '?boolean') %}
 Equivalent to [aria-atomic](https://www.w3.org/TR/wai-aria-1.2/#aria-atomic).
 {% endcall %}
 
-{% call macro.prop('accessibilityAutoComplete', '?string') %}
+{% call macro.prop('aria-autocomplete', '?string') %}
 Equivalent to [aria-autocomplete](https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete).
 {% endcall %}
 
-{% call macro.prop('accessibilityBusy', '?boolean') %}
+{% call macro.prop('aria-busy', '?boolean') %}
 Equivalent to [aria-busy](https://www.w3.org/TR/wai-aria-1.2/#aria-busy).
 {% endcall %}
 
-{% call macro.prop('accessibilityChecked', '?(boolean | "mixed")') %}
+{% call macro.prop('aria-checked', '?(boolean | "mixed")') %}
 Equivalent to [aria-checked](https://www.w3.org/TR/wai-aria-1.2/#aria-checked).
 {% endcall %}
 
-{% call macro.prop('accessibilityColumnCount', '?number') %}
+{% call macro.prop('aria-colcount', '?number') %}
 Equivalent to [aria-colcount](https://www.w3.org/TR/wai-aria-1.2/#aria-colcount).
 {% endcall %}
 
-{% call macro.prop('accessibilityColumnIndex', '?number') %}
+{% call macro.prop('aria-colindex', '?number') %}
 Equivalent to [aria-colindex](https://www.w3.org/TR/wai-aria-1.2/#aria-colindex).
 {% endcall %}
 
-{% call macro.prop('accessibilityColumnSpan', '?number') %}
+{% call macro.prop('aria-colspan', '?number') %}
 Equivalent to [aria-colspan](https://www.w3.org/TR/wai-aria-1.2/#aria-colspan).
 {% endcall %}
 
-{% call macro.prop('accessibilityControls', '?(string | Array<string>)') %}
+{% call macro.prop('aria-controls', '?string') %}
 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")') %}
+{% call macro.prop('aria-current', '?(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 | Array<string>)') %}
+{% call macro.prop('aria-describedby', '?string') %}
 Equivalent to [aria-describedby](https://www.w3.org/TR/wai-aria-1.2/#aria-describedby).
 {% endcall %}
 
-{% call macro.prop('accessibilityDetails', '?string') %}
+{% call macro.prop('aria-details', '?string') %}
 Equivalent to [aria-details](https://www.w3.org/TR/wai-aria-1.2/#aria-details).
 {% endcall %}
 
-{% call macro.prop('accessibilityDisabled', '?boolean') %}
+{% call macro.prop('aria-disabled', '?boolean') %}
 Equivalent to [aria-disabled](https://www.w3.org/TR/wai-aria-1.2/#aria-disabled).
 {% endcall %}
 
-{% call macro.prop('accessibilityErrorMessage', '?string') %}
+{% call macro.prop('aria-errormessage', '?string') %}
 Equivalent to [aria-errormessage](https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage).
 {% endcall %}
 
-{% call macro.prop('accessibilityExpanded', '?boolean') %}
+{% call macro.prop('aria-expanded', '?boolean') %}
 Equivalent to [aria-expanded](https://www.w3.org/TR/wai-aria-1.2/#aria-expanded).
 {% endcall %}
 
-{% call macro.prop('accessibilityFlowTo', '?(string | Array<string>)') %}
+{% call macro.prop('aria-flowto', '?string') %}
 Equivalent to [aria-flowto](https://www.w3.org/TR/wai-aria-1.2/#aria-flowto).
 {% endcall %}
 
-{% call macro.prop('accessibilityHasPopup', '?string') %}
+{% call macro.prop('aria-haspopup', '?string') %}
 Equivalent to [aria-haspopup](https://www.w3.org/TR/wai-aria-1.2/#aria-haspopup).
 {% endcall %}
 
-{% call macro.prop('accessibilityHidden', '?boolean') %}
+{% call macro.prop('aria-hidden', '?boolean') %}
 Equivalent to [aria-hidden](https://www.w3.org/TR/wai-aria-1.2/#aria-hidden).
 {% endcall %}
 
-{% call macro.prop('accessibilityInvalid', '?boolean') %}
+{% call macro.prop('aria-invalid', '?boolean') %}
 Equivalent to [aria-invalid](https://www.w3.org/TR/wai-aria-1.2/#aria-invalid).
 {% endcall %}
 
-{% call macro.prop('accessibilityKeyShortcuts', '?Array<string>') %}
+{% call macro.prop('aria-keyshortcuts', '?string') %}
 Equivalent to [aria-keyshortcuts](https://www.w3.org/TR/wai-aria-1.2/#aria-keyshortcuts).
 {% endcall %}
 
-{% call macro.prop('accessibilityLabel', '?string') %}
+{% call macro.prop('aria-label', '?string') %}
 Equivalent to [aria-label](https://www.w3.org/TR/wai-aria-1.2/#aria-label).
 {% endcall %}
 
-{% call macro.prop('accessibilityLabelledBy', '?(string | Array<string>)') %}
+{% call macro.prop('aria-labelledby', '?string') %}
 Equivalent to [aria-labelledby](https://www.w3.org/TR/wai-aria-1.2/#aria-labelledby).
 {% endcall %}
 
-{% call macro.prop('accessibilityLevel', '?number') %}
+{% call macro.prop('aria-level', '?number') %}
 Equivalent to [aria-level](https://www.w3.org/TR/wai-aria-1.2/#aria-level).
 {% endcall %}
 
-{% call macro.prop('accessibilityLiveRegion', '?("assertive" | "off" | "polite")') %}
+{% call macro.prop('aria-live', '?("assertive" | "off" | "polite")') %}
 Equivalent to [aria-live](https://www.w3.org/TR/wai-aria-1.2/#aria-live).
 {% endcall %}
 
-{% call macro.prop('accessibilityModal', '?boolean') %}
+{% call macro.prop('aria-modal', '?boolean') %}
 Equivalent to [aria-modal](https://www.w3.org/TR/wai-aria-1.2/#aria-modal).
 {% endcall %}
 
-{% call macro.prop('accessibilityMultiline', '?boolean') %}
+{% call macro.prop('aria-multiline', '?boolean') %}
 Equivalent to [aria-multiline](https://www.w3.org/TR/wai-aria-1.2/#aria-multiline).
 {% endcall %}
 
-{% call macro.prop('accessibilityMultiSelectable', '?boolean') %}
+{% call macro.prop('aria-multiselectable', '?boolean') %}
 Equivalent to [aria-multiselectable](https://www.w3.org/TR/wai-aria-1.2/#aria-multiselectable).
 {% endcall %}
 
-{% call macro.prop('accessibilityOrientation', '?("horizontal" | "vertical")') %}
+{% call macro.prop('aria-orientation', '?("horizontal" | "vertical")') %}
 Equivalent to [aria-orientation](https://www.w3.org/TR/wai-aria-1.2/#aria-orientation).
 {% endcall %}
 
-{% call macro.prop('accessibilityOwns', '?(string | Array<string>)') %}
+{% call macro.prop('aria-owns', '?string') %}
 Equivalent to [aria-owns](https://www.w3.org/TR/wai-aria-1.2/#aria-owns).
 {% endcall %}
 
-{% call macro.prop('accessibilityPlaceholder', '?string') %}
+{% call macro.prop('aria-placeholder', '?string') %}
 Equivalent to [aria-placeholder](https://www.w3.org/TR/wai-aria-1.2/#aria-placeholder).
 {% endcall %}
 
-{% call macro.prop('accessibilityPosInSet', '?number') %}
+{% call macro.prop('aria-posinset', '?number') %}
 Equivalent to [aria-posinset](https://www.w3.org/TR/wai-aria-1.2/#aria-posinset).
 {% endcall %}
 
-{% call macro.prop('accessibilityPressed', '?boolean') %}
+{% call macro.prop('aria-pressed', '?boolean') %}
 Equivalent to [aria-pressed](https://www.w3.org/TR/wai-aria-1.2/#aria-pressed).
 {% endcall %}
 
-{% call macro.prop('accessibilityReadOnly', '?boolean') %}
+{% call macro.prop('aria-readonly', '?boolean') %}
 Equivalent to [aria-readonly](https://www.w3.org/TR/wai-aria-1.2/#aria-readonly).
 {% endcall %}
 
-{% call macro.prop('accessibilityRequired', '?boolean') %}
+{% call macro.prop('aria-required', '?boolean') %}
 Equivalent to [aria-required](https://www.w3.org/TR/wai-aria-1.2/#aria-required).
 {% endcall %}
 
-{% call macro.prop('accessibilityRole', '?string') %}
+{% call macro.prop('role', '?string') %}
 Equivalent to [role](https://www.w3.org/TR/wai-aria-1.2/#role_definitions).
 {% endcall %}
 
-{% call macro.prop('accessibilityRoleDescription', '?string') %}
+{% call macro.prop('aria-roledescription', '?string') %}
 Equivalent to [aria-roledescription](https://www.w3.org/TR/wai-aria-1.2/#aria-roledescription).
 {% endcall %}
 
-{% call macro.prop('accessibilityRowCount', '?number') %}
+{% call macro.prop('aria-rowcount', '?number') %}
 Equivalent to [aria-rowcount](https://www.w3.org/TR/wai-aria-1.2/#aria-rowcount).
 {% endcall %}
 
-{% call macro.prop('accessibilityRowIndex', '?number') %}
+{% call macro.prop('aria-rowindex', '?number') %}
 Equivalent to [aria-rowindex](https://www.w3.org/TR/wai-aria-1.2/#aria-rowindex).
 {% endcall %}
 
-{% call macro.prop('accessibilityRowSpan', '?number') %}
+{% call macro.prop('aria-rowspan', '?number') %}
 Equivalent to [aria-rowspan](https://www.w3.org/TR/wai-aria-1.2/#aria-rowspan).
 {% endcall %}
 
-{% call macro.prop('accessibilitySelected', '?boolean') %}
+{% call macro.prop('aria-selected', '?boolean') %}
 Equivalent to [aria-selected](https://www.w3.org/TR/wai-aria-1.2/#aria-selected).
 {% endcall %}
 
-{% call macro.prop('accessibilitySetSize', '?number') %}
+{% call macro.prop('aria-setsize', '?number') %}
 Equivalent to [aria-setsize](https://www.w3.org/TR/wai-aria-1.2/#aria-setsize).
 {% endcall %}
 
-{% call macro.prop('accessibilitySort', '?("ascending" | "descending" | "none" | "other")') %}
+{% call macro.prop('aria-sort', '?("ascending" | "descending" | "none" | "other")') %}
 Equivalent to [aria-sort](https://www.w3.org/TR/wai-aria-1.2/#aria-sort).
 {% endcall %}
 
-{% call macro.prop('accessibilityValueMax', '?number') %}
+{% call macro.prop('aria-valuemax', '?number') %}
 Equivalent to [aria-valuemax](https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax).
 {% endcall %}
 
-{% call macro.prop('accessibilityValueMin', '?number') %}
+{% call macro.prop('aria-valuemin', '?number') %}
 Equivalent to [aria-valuemin](https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin).
 {% endcall %}
 
-{% call macro.prop('accessibilityValueNow', '?number') %}
+{% call macro.prop('aria-valuenow', '?number') %}
 Equivalent to [aria-valuenow](https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow).
 {% endcall %}
 
-{% call macro.prop('accessibilityValueText', '?string') %}
+{% call macro.prop('aria-valuetext', '?string') %}
 Equivalent to [aria-valuetext](https://www.w3.org/TR/wai-aria-1.2/#aria-valuetext).
 {% endcall %}
 
@@ -232,13 +233,13 @@ const hrefAttrs = { download: true, rel: "nofollow", target: "blank" };
 
 ### Keyboard focus
 
-The `focusable` prop determines whether a component is user-focusable and appears in the keyboard tab flow. This prop should be used instead of the `accessible` prop found in React Native for Android/iOS, which is not implemented by React Native for Web/Windows/macOS.
+The `tabIndex` prop determines whether a component is user-focusable and appears in the keyboard tab flow. This prop should be used instead of the `accessible` (or `focusable` prop) found in React Native for Android/iOS, which is not implemented by React Native for Web/Windows/macOS.
 
 ```jsx
-<View focusable={true} />
+<View tabindex={0} />
 // <div tabindex="0"></div>
 
-<Text focusable={false} href="/" />
+<Text tabindex={-1} href="/" />
 // <a href="/" tabindex="-1"></a>
 ```
 
@@ -248,14 +249,14 @@ The `focusable` prop determines whether a component is user-focusable and appear
 
 ### Accessible HTML
 
-{{ site.name }} components express semantics exclusively via the `accessibility*` props which are equivalent to `aria-*` attributes. For example, `accessibilityRole` is equivalent to the HTML `role` attribute, `accessibilityLabel` is equivalent to `aria-label`, etc. (Additional compatibility with React Native accessibility props is also included.)
+{{ site.name }} components express semantics exclusively via the `aria-*` props.
 
 ```jsx
 <View
-  accessibilityLabel="..."
-  accessibilityPressed={false}
-  accessibilityRole="menuitem"
-  nativeID="abc"
+  aria-label="..."
+  aria-pressed={false}
+  id="abc"
+  role="menuitem"
 />
 /*
 <div
@@ -269,11 +270,11 @@ The `focusable` prop determines whether a component is user-focusable and appear
 
 ### Semantic HTML
 
-The value of the `accessibilityRole` prop is used to infer an [analogous HTML element][html-aria-url] where appropriate. This is done to rely on well-supported native mechanisms for encoding semantics and accessibility information.
+The value of the `role` prop is used to infer an [analogous HTML element][html-aria-url] where appropriate. This is done to rely on well-supported native mechanisms for encoding semantics and accessibility information.
 
 ```jsx
-<View accessibilityRole="article">
-  <Text accessibilityRole="paragraph">This is an article</Text>
+<View role="article">
+  <Text role="paragraph">This is an article</Text>
 </View>
 /*
 <article>
@@ -282,14 +283,14 @@ The value of the `accessibilityRole` prop is used to infer an [analogous HTML el
 */
 ```
 
-If the `"heading"` role is combined with an `accessibilityLevel`, the equivalent HTML heading element is rendered. Otherwise, it is rendered as `<h1>`.
+If the `"heading"` role is combined with an `aria-level`, the equivalent HTML heading element is rendered. Otherwise, it is rendered as `<h1>`.
 
 ```jsx
-<Text accessibilityRole="heading" /> /* <h1> */
-<Text accessibilityRole="heading" accessibilityLevel={2} /> /* <h2> */
+<Text role="heading" /> /* <h1> */
+<Text role="heading" aria-level={2} /> /* <h2> */
 ```
 
-Note: Avoid changing `accessibilityRole` values over time or after user actions. Generally, accessibility APIs do not provide a means of notifying assistive technologies if a `role` changes.
+Note: Avoid changing `role` values over time or after user actions. Generally, accessibility APIs do not provide a means of notifying assistive technologies if a `role` changes.
 
 
 [aria-in-html-url]: https://w3c.github.io/aria-in-html/
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/interactions.md b/packages/react-native-web-docs/src/pages/docs/concepts/interactions.md
index beb432b7c..fc2286311 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/interactions.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/interactions.md
@@ -5,6 +5,7 @@ permalink: /docs/interactions/index.html
 eleventyNavigation:
   key: Interactions
   parent: Concepts
+  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -17,27 +18,31 @@ Interactions and gestures for the web.
 
 ---
 
-## Click Props API
+## PointerEvent Props API
 
-Click interactions are available on supporting elements. These events are React DOM synthetic mouse events. The `click` events may be dispatched by the browser following user interactions with a pointer (mouse or touch) as well as a keyboard.
+Pointer interactions are available on supporting elements. These events are React DOM synthetic mouse events. The `click` events may be dispatched by the browser following user interactions with a pointer (mouse or touch) as well as a keyboard.
 
 In cases where a native `click` is not dispatched following a valid keyboard interaction (due to the native semantics of the host element), it will be emulated by React Native for Web. This helps to improve the accessibility of elements for all forms of interaction hardware.
 
-{% call macro.prop('onClick', '?(event: MouseEvent) => void') %}
-Called when the element is clicked. 
+{% call macro.prop('onClick', '?(event: PointerEvent) => void') %}
+Called when the element is clicked.
 {% endcall %}
 
-{% call macro.prop('onClickCapture', '?(event: MouseEvent) => void') %}
+{% call macro.prop('onClickCapture', '?(event: PointerEvent) => void') %}
 Called when the element is clicked. (Capture phase.)
 {% endcall %}
 
-{% call macro.prop('onContextMenu', '?(event: MouseEvent) => void') %}
+{% call macro.prop('onContextMenu', '?(event: PointerEvent) => void') %}
 Called when a native context menu is displayed. This may be in response to mouse, touch, or mouse+keyboard interaction.
 {% endcall %}
 
+{% call macro.prop('onPointer*', '?(event: PointerEvent) => void') %}
+Support for the PointerEvent API.
+{% endcall %}
+
 ---
 
-## Focus Props API
+## FocusEvent Props API
 
 Focus interactions are available on supporting elements. The focus events are React DOM synthetic focus events. These events are also fired in response to focus being programmatically moved.
 
@@ -51,7 +56,7 @@ Called when the element receives focus.
 
 ---
 
-## Keyboard Props API
+## KeyboardEvent Props API
 
 Keyboard interactions are available on supporting elements. The keyboard events are React DOM synthetic keyboard events.
 
@@ -73,7 +78,7 @@ Called when a key is released. (Capture phase.)
 
 ---
 
-## Responder Props API
+## ResponderEvent Props API
 
 "Responder" interactions are available on supporting elements. The Responder System allows views and gesture recognizers to opt-in to negotiating over a single, global “interaction lock”. For a view to become the “responder” means that pointer interactions are exclusive to that view and none other. A view can negotiate to become the “responder” without requiring knowledge of other views. A more specialized API for working with multi-pointer gestures is available by using the [PanResponder]({{ '/docs/pan-responder' | url }}) module.
 
@@ -141,11 +146,11 @@ A pointer down event occured on the screen. The responder is notified of all sta
 
 {% call macro.prop('onResponderMove', '?(event: ResponderEvent) => void') %}
 A pointer move event occured on the screen. The responder is notified of all move events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder.
-{% endcall %} 
+{% endcall %}
 
 {% call macro.prop('onResponderEnd', '?(event: ResponderEvent) => void') %}
 A pointer up event occured on the screen. The responder is notified of all end events, even if the pointer target is not this view (i.e., additional pointers are being used). Therefore, this callback may be called multiple times while the view is the responder.
-{% endcall %} 
+{% endcall %}
 
 {% call macro.prop('onResponderRelease', '?(event: ResponderEvent) => void') %}
 As soon as there are no more pointers that *started* inside descendants of the responder, this callback is called on the responder and the interaction lock is released. This is the point at which you should provide visual feedback for users that the interaction is over.
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md
index d50bc78cd..67e6b5fa2 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/localization.md
@@ -5,7 +5,6 @@ permalink: /docs/localization/index.html
 eleventyNavigation:
   key: Localization
   parent: Concepts
-  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -23,7 +22,7 @@ The non-standard [direction-independent style properties and values]({{ '/docs/s
 
 ```jsx
 // "start" is "left" for LTR and "right" for RTL
-const style = { paddingStart: 10, marginStart: 10 };
+const style = { paddingInlineStart: 10, marginInlineStart: 10 };
 return (
   <View style={style} />
 );
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/styling.md b/packages/react-native-web-docs/src/pages/docs/concepts/styling.md
index e00afbc7c..fef21c6d8 100644
--- a/packages/react-native-web-docs/src/pages/docs/concepts/styling.md
+++ b/packages/react-native-web-docs/src/pages/docs/concepts/styling.md
@@ -5,6 +5,7 @@ permalink: /docs/styling/index.html
 eleventyNavigation:
   key: Styling
   parent: Concepts
+  label: "Change"
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -89,141 +90,60 @@ Accepts only positive integers, `0`, or `-1`.
 The value of `-1` is non-standard and equivalent to setting `flowGrow:0` and `flexShrink:1`.
 {% endcall %}
 
-{% call macro.prop('margin', '?(number | string)') %}
-Accepts only a single value that is applied to all sides.
+{% call macro.prop('inset', '?(string | number)') %}
+Equivalent to [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset).
 {% endcall %}
 
-{% call macro.prop('overflow', '?("auto" | "hidden" | "visible")') %}
-Accepts only a single value that is applied to both axes.
+{% call macro.prop('insetBlock', '?(string | number)') %}
+Equivalent to [inset-block](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block).
 {% endcall %}
 
-{% call macro.prop('overscrollBehavior', '?("auto" | "contain" | "none")') %}
-Accepts only a single value that is applied to both axes.
+{% call macro.prop('insetInline', '?(string | number)') %}
+Equivalent to [inset-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline).
 {% endcall %}
 
-{% call macro.prop('padding', '?(number | string)') %}
+{% call macro.prop('margin', '?(number | string)') %}
 Accepts only a single value that is applied to all sides.
 {% endcall %}
 
-### Non-standard properties
-
-{{ site.name }} includes compatibility with the following non-standard React Native properties and values.
-
-{% call macro.prop('animationKeyframes', '?Object') %}
-A web-only CSS extension for defining keyframes. The value is an object representing a [CSS keyframes definition](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations). For example: `{ '0%': { opacity: 1 } }`.
-{% endcall %}
-
-{% call macro.prop('borderEndColor', '?string') %}
-Equivalent to [border-inline-end-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color).
-{% endcall %}
-
-{% call macro.prop('borderEndStyle', '?string') %}
-Equivalent to [border-inline-end-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style).
-{% endcall %}
-
-{% call macro.prop('borderEndWidth', '?(string | number)') %}
-Equivalent to [border-inline-end-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width).
-{% endcall %}
-
-{% call macro.prop('borderStartColor', '?string') %}
-Equivalent to [border-inline-start-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color).
-{% endcall %}
-
-{% call macro.prop('borderStartStyle', '?string') %}
-Equivalent to [border-inline-start-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style).
-{% endcall %}
-
-{% call macro.prop('borderStartWidth', '?(string | number)') %}
-Equivalent to [border-inline-start-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width).
-{% endcall %}
-
-{% call macro.prop('borderBottomEndRadius', '?(string | number)') %}
-Equivalent to [border-end-end-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius).
-{% endcall %}
-
-{% call macro.prop('borderBottomStartRadius', '?(string | number)') %}
-Equivalent to [border-end-start-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius).
-{% endcall %}
-
-{% call macro.prop('borderTopEndRadius', '?(string | number)') %}
-Equivalent to [border-start-end-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius).
-{% endcall %}
-
-{% call macro.prop('borderTopStartRadius', '?(string | number)') %}
-Equivalent to [border-start-start-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius).
-{% endcall %}
-
-{% call macro.prop('end', '?(string | number)') %}
-Defines the logical inline end position of an element. Equivalent to `right` for `ltr` writing direction.
-{% endcall %}
-
-{% call macro.prop('marginHorizontal', '?(number | string)') %}
-Equivalent to [margin-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline). Accepts only a single value.
-{% endcall %}
-
-{% call macro.prop('marginVertical', '?(number | string)') %}
+{% call macro.prop('marginBlock', '?(number | string)') %}
 Equivalent to [margin-block](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block).
 {% endcall %}
 
-{% call macro.prop('marginEnd', '?(string | number)') %}
-Equivalent to [margin-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end).
-{% endcall %}
-
-{% call macro.prop('marginStart', '?(string | number)') %}
-Equivalent to [margin-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start).
-{% endcall %}
-
-{% call macro.prop('paddingHorizontal', '?(number | string)') %}
-Equivalent to [padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline). Accepts only a single value.
-{% endcall %}
-
-{% call macro.prop('paddingVertical', '?(number | string)') %}
-Equivalent to [padding-block](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block). Accepts only a single value.
-{% endcall %}
-
-{% call macro.prop('paddingEnd', '?(string | number)') %}
-Equivalent to [padding-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end).
-{% endcall %}
-
-{% call macro.prop('paddingStart', '?(string | number)') %}
-Equivalent to [padding-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start).
-{% endcall %}
-
-{% call macro.prop('shadowColor', '?string') %}
-{% endcall %}
-
-{% call macro.prop('shadowOffset', '?(string | number)') %}
+{% call macro.prop('marginInline', '?(number | string)') %}
+Equivalent to [margin-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline). Accepts only a single value.
 {% endcall %}
 
-{% call macro.prop('shadowOpacity', '?number') %}
+{% call macro.prop('overflow', '?("auto" | "hidden" | "visible")') %}
+Accepts only a single value that is applied to both axes.
 {% endcall %}
 
-{% call macro.prop('shadowRadius', '?(string | number)') %}
+{% call macro.prop('overscrollBehavior', '?("auto" | "contain" | "none")') %}
+Accepts only a single value that is applied to both axes.
 {% endcall %}
 
-{% call macro.prop('start', '?(string | number)') %}
-Defines the logical inline end position of an element. Equivalent to `left` for `ltr` writing direction.
+{% call macro.prop('padding', '?(number | string)') %}
+Accepts only a single value that is applied to all sides.
 {% endcall %}
 
-{% call macro.prop('textAlign', '?string') %}
-Includes support for non-standard `"start"` and `"end"` values for localization support.
+{% call macro.prop('paddingBlock', '?(number | string)') %}
+Equivalent to [padding-block](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block).
 {% endcall %}
 
-{% call macro.prop('textAlignVertical', '?string') %}
-Equivalent to [vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align).
+{% call macro.prop('paddingInline', '?(number | string)') %}
+Equivalent to [padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline). Accepts only a single value.
 {% endcall %}
 
-{% call macro.prop('textShadowColor', '?string') %}
-{% endcall %}
+### Non-standard properties
 
-{% call macro.prop('textShadowOffset', '?(string | number)') %}
-{% endcall %}
+{{ site.name }} includes compatibility with the following non-standard React Native properties and values.
 
-{% call macro.prop('textShadowRadius', '?(string | number)') %}
+{% call macro.prop('animationKeyframes', '?Object') %}
+A web-only CSS extension for defining keyframes. The value is an object representing a [CSS keyframes definition](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations). For example: `{ '0%': { opacity: 1 } }`.
 {% endcall %}
 
-{% call macro.prop('transform', '?Array<Object>') %}
-Implements React Native's [JavaScript syntax for transforms](https://reactnative.dev/docs/transforms#reference).
+{% call macro.prop('pointerEvents', '?("all" | "none" | "box-only" | "box-none")') %}
+Equivalent to [CSS pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) with 2 additional values. A value of `"box-none"` preserves pointer events on the element's children; `"box-only"` disables pointer events on the element's children.
 {% endcall %}
 
 {% call macro.prop('writingDirection', '?("auto" | "ltr" | "rtl")') %}
diff --git a/packages/react-native-web-docs/src/pages/docs/hooks/use-locale-context.md b/packages/react-native-web-docs/src/pages/docs/hooks/use-locale-context.md
index 149557890..905281661 100644
--- a/packages/react-native-web-docs/src/pages/docs/hooks/use-locale-context.md
+++ b/packages/react-native-web-docs/src/pages/docs/hooks/use-locale-context.md
@@ -5,7 +5,6 @@ permalink: /docs/use-locale-context/index.html
 eleventyNavigation:
   key: useLocaleContext
   parent: Hooks
-  label: "New"
 ---
 
 {% import "fragments/macros.html" as macro with context %}