zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-16 04:10:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation to match API changes

Browse Source
This commit is contained in:
Nicolas Gallagher
2023-03-21 12:52:07 -07:00
parent 47671ca44e
commit 550afdc81d
10 changed files with 161 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md
-1
View File
@@ -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 %}
packages/react-native-web-docs/src/pages/docs/appendix/unstable-apis.md
-1
View File
@@ -7,7 +7,6 @@ eleventyNavigation:
key: Unstable APIs
parent: Appendix
order: 1
label: "Change"
---
:::lead
packages/react-native-web-docs/src/pages/docs/components/text-input.md
+21 -17
View File
@@ -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('keyboardType', '?string') %}
{% 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('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') %}
packages/react-native-web-docs/src/pages/docs/components/text.md
+15 -18
View File
@@ -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 %}
packages/react-native-web-docs/src/pages/docs/components/view.md
+14 -17
View File
@@ -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 %}
packages/react-native-web-docs/src/pages/docs/concepts/accessibility.md
+63 -62
View File
@@ -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/
packages/react-native-web-docs/src/pages/docs/concepts/interactions.md
+16 -11
View File
@@ -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.
packages/react-native-web-docs/src/pages/docs/concepts/localization.md
+1 -2
View File
@@ -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} />
);
packages/react-native-web-docs/src/pages/docs/concepts/styling.md
+31 -111
View File
@@ -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,10 +90,30 @@ 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('inset', '?(string | number)') %}
Equivalent to [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset).
{% endcall %}
{% 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('insetInline', '?(string | number)') %}
Equivalent to [inset-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline).
{% endcall %}
{% call macro.prop('margin', '?(number | string)') %}
Accepts only a single value that is applied to all sides.
{% endcall %}
{% 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('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('overflow', '?("auto" | "hidden" | "visible")') %}
Accepts only a single value that is applied to both axes.
{% endcall %}
@@ -105,6 +126,14 @@ Accepts only a single value that is applied to both axes.
Accepts only a single value that is applied to all sides.
{% endcall %}
{% 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('paddingInline', '?(number | string)') %}
Equivalent to [padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline). Accepts only a single value.
{% endcall %}
### Non-standard properties
{{ site.name }} includes compatibility with the following non-standard React Native properties and values.
@@ -113,117 +142,8 @@ Accepts only a single value that is applied to all sides.
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)') %}
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)') %}
{% endcall %}
{% call macro.prop('shadowOpacity', '?number') %}
{% endcall %}
{% call macro.prop('shadowRadius', '?(string | number)') %}
{% endcall %}
{% call macro.prop('start', '?(string | number)') %}
Defines the logical inline end position of an element. Equivalent to `left` for `ltr` writing direction.
{% endcall %}
{% call macro.prop('textAlign', '?string') %}
Includes support for non-standard `"start"` and `"end"` values for localization support.
{% endcall %}
{% call macro.prop('textAlignVertical', '?string') %}
Equivalent to [vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align).
{% endcall %}
{% call macro.prop('textShadowColor', '?string') %}
{% endcall %}
{% call macro.prop('textShadowOffset', '?(string | number)') %}
{% endcall %}
{% call macro.prop('textShadowRadius', '?(string | number)') %}
{% 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")') %}
packages/react-native-web-docs/src/pages/docs/hooks/use-locale-context.md
-1
View File
@@ -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 %}