Skip to content

feat: Add aria Web props to component docs #3404

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

Merged
merged 4 commits into from
Nov 7, 2022
Merged

feat: Add aria Web props to component docs #3404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d194821
feat: Add aria Web props to component docs
gabrieldonadel Nov 7, 2022
6ac0a3c
chore: Update view docs to ensure props are ordered alphabetically
gabrieldonadel Nov 7, 2022
9f2db33
Update docs/touchablewithoutfeedback.md
gabrieldonadel Nov 7, 2022
78b428b
chore: Add types table to aria-live and update aria-modal
gabrieldonadel Nov 7, 2022
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
6 changes: 6 additions & 0 deletions docs/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,12 @@ Indicates that an element will be updated, and describes the types of updates th
- **polite** Accessibility services should announce changes to this view.
- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.

| Type | Default |
| ---------------------------------------- | ------- |
| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |

---

### `aria-modal` <div class="label ios">iOS</div>

Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
Expand Down
58 changes: 58 additions & 0 deletions docs/text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,64 @@ Sets the frequency of automatic hyphenation to use when determining word breaks

---

### `aria-busy`

Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-checked`

Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.

| Type | Default |
| ---------------- | ------- |
| boolean, 'mixed' | false |

---

### `aria-disabled`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-expanded`

Indicates whether an expandable element is currently expanded or collapsed.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-label`

Defines a string value that labels an interactive element.

| Type |
| ------ |
| string |

---

### `aria-selected`

Indicates whether a selectable element is currently selected or not.

| Type |
| ------- |
| boolean |

### `dataDetectorType` <div class="label android">Android</div>

Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
Expand Down
94 changes: 94 additions & 0 deletions docs/touchablewithoutfeedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,100 @@ See the [Accessibility guide](accessibility.md#accessibility-actions) for more i

---

### `aria-busy`

Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-checked`

Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.

| Type | Default |
| ---------------- | ------- |
| boolean, 'mixed' | false |

---

### `aria-disabled`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-expanded`

Indicates whether an expandable element is currently expanded or collapsed.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-hidden`

Indicates whether the accessibility elements contained within this accessibility element are hidden.

For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-label`

Defines a string value that labels an interactive element.

| Type |
| ------ |
| string |

---

### `aria-live` <div class="label android">Android</div>

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

- **off** Accessibility services should not announce changes to this view.
- **polite** Accessibility services should announce changes to this view.
- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.

| Type | Default |
| ---------------------------------------- | ------- |
| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |

---

### `aria-modal` <div class="label ios">iOS</div>

Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-selected`

Indicates whether a selectable element is currently selected or not.

| Type |
| ------- |
| boolean |

### `onAccessibilityAction`

Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
Expand Down
119 changes: 111 additions & 8 deletions docs/view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,117 @@ When `true`, indicates that the view is an accessibility element. By default, al

---

### `aria-busy`

Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-checked`

Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.

| Type | Default |
| ---------------- | ------- |
| boolean, 'mixed' | false |

---

### `aria-disabled`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-expanded`

Indicates whether an expandable element is currently expanded or collapsed.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-hidden`

Indicates whether the accessibility elements contained within this accessibility element are hidden.

For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-label`

Defines a string value that labels an interactive element.

| Type |
| ------ |
| string |

---

### `aria-labelledby` <div class="label android">Android</div>

Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element:

```jsx
<View>
<Text nativeID="formLabel">Label for Input Field</Text>
<TextInput aria-label="input" aria-labelledby="formLabel" />
</View>
```

| Type |
| ------ |
| string |

---

### `aria-live` <div class="label android">Android</div>

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

- **off** Accessibility services should not announce changes to this view.
- **polite** Accessibility services should announce changes to this view.
- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.

| Type | Default |
| ---------------------------------------- | ------- |
| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |

---

### `aria-modal` <div class="label ios">iOS</div>

Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.

| Type | Default |
| ------- | ------- |
| boolean | false |

---

### `aria-selected`

Indicates whether a selectable element is currently selected or not.

| Type |
| ------- |
| boolean |

### `aria-valuemax`

Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
Expand Down Expand Up @@ -287,14 +398,6 @@ Represents the textual description of the component. Has precedence over the `te
| ------ |
| string |

### `aria-modal` <div class="label ios">iOS</div>

Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the `accessibilityViewIsModal` prop.

| Type | Default |
| ---- | ------- |
| bool | false |

---

### `collapsable` <div class="label android">Android</div>
Expand Down