Skip to content

feat: Add aria Web props to Accessibility docs #3396

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.

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
Changes from all commits
Commits
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
87 changes: 83 additions & 4 deletions docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,15 +220,94 @@ Represents the current value for range-based components, such as sliders and pro

Repersents the textual description of the component.

### `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.

### `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.

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

---
### `aria-selected`

Indicates whether a selectable element is currently selected or not.

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

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

Expand Down