Skip to content

Commit

Permalink
Add missing aria props to Accessibility docs (#3396)
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrieldonadel authored Nov 5, 2022
1 parent 00646cd commit f279c06
Showing 1 changed file with 83 additions and 4 deletions.
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

Represents 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

0 comments on commit f279c06

Please sign in to comment.