Minor doc improvements (#78)

* minor doc improvements: - format string values more clearly - update list of values for accessibilityRole * mirror formatting updates on new rules Co-authored-by: JP <[email protected]>
FormidableLabs · Apr 10, 2020 · 19b7d8a · 19b7d8a
1 parent b36a34a
commit 19b7d8a
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 71 deletions.
diff --git a/docs/rules/has-accessibility-props.md b/docs/rules/has-accessibility-props.md
@@ -6,18 +6,18 @@ The accessibilityRole props tells VoiceOver on iOS what kind of element the user
 
 Touchable components are one of:
 
-- TouchableOpacity
-- TouchableHighlight
-- TouchableWithoutFeedback
-- TouchableNativeFeedback
-- TouchableBounce
-- Touchable (from [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable))
+- `TouchableOpacity`
+- `TouchableHighlight`
+- `TouchableWithoutFeedback`
+- `TouchableNativeFeedback`
+- `TouchableBounce`
+- `Touchable` (from [react-native-platform-touchable](https://github.com/react-community/react-native-platform-touchable))
 
 ### References
 
-1.  https://facebook.github.io/react-native/docs/accessibility.html#accessibilityrole-ios-android
-2.  https://facebook.github.io/react-native/docs/accessibility.html#accessibilitytraits-ios
-3.  https://facebook.github.io/react-native/docs/accessibility.html#accessibilitycomponenttype-android
+1. https://facebook.github.io/react-native/docs/accessibility.html#accessibilityrole-ios-android
+2. https://facebook.github.io/react-native/docs/accessibility.html#accessibilitytraits-ios
+3. https://facebook.github.io/react-native/docs/accessibility.html#accessibilitycomponenttype-android
 
 ## Rule details
 

diff --git a/docs/rules/has-valid-accessibility-actions.md b/docs/rules/has-valid-accessibility-actions.md
@@ -13,21 +13,21 @@ Depending on the action type, the action should contain the following fields:-
 
 NAME|TYPE|REQUIRED
 -|-|-
-name|string|**Yes**
-label|string|Only required for Custom actions
+`name`|string|**Yes**
+`label`|string|Only required for Custom actions
 
 ### Standard Actions
 
 Standard Actions must have a `name` field matching one of:-
 
 NAME|PLATFORM SUPPORT
 -|-
-magicTap|iOS only
-escape|iOS only
-activate|both iOS & Android
-increment|both iOS & Android
-decrement|both iOS & Android
-longpress|Android only
+`"magicTap"`|iOS only
+`"escape"`|iOS only
+`"activate"`|both iOS & Android
+`"increment"`|both iOS & Android
+`"decrement"`|both iOS & Android
+`"longpress"`|Android only
 
 Providing a `label` for a Standard Action is optional.
 

diff --git a/docs/rules/has-valid-accessibility-component-type.md b/docs/rules/has-valid-accessibility-component-type.md
@@ -4,14 +4,14 @@ The accessibilityComponentType property is essentially the android version of [a
 
 Values may be one of the following:
 
-- none
-- button
-- radiobutton_checked
-- radiobutton_unchecked
+- `"none"`
+- `"button"`
+- `"radiobutton_checked"`
+- `"radiobutton_unchecked"`
 
 ### References
 
-1.  https://facebook.github.io/react-native/docs/accessibility.html#accessibilitycomponenttype-android
+1. https://facebook.github.io/react-native/docs/accessibility.html#accessibilitycomponenttype-android
 
 ## Rule details
 

diff --git a/docs/rules/has-valid-accessibility-live-region.md b/docs/rules/has-valid-accessibility-live-region.md
@@ -2,13 +2,13 @@
 
 On android devices, when components dynamically change, we want TalkBack to alert the end user. This is made possible by the `accessibilityLiveRegion` property. It can be set to the following values:
 
-- none: 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.
+- `"none"`: 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.
 
 ### References
 
-1.  https://facebook.github.io/react-native/docs/accessibility.html#accessibilityliveregion-android
+1. https://facebook.github.io/react-native/docs/accessibility.html#accessibilityliveregion-android
 
 ## Rule details
 

diff --git a/docs/rules/has-valid-accessibility-role.md b/docs/rules/has-valid-accessibility-role.md
@@ -6,17 +6,33 @@ The accessibilityRole property is used to tell Talkback or Voiceover the role of
 
 ## Values may be one of the following
 
-- `adjustable`: Used when an element can be "adjusted" (e.g. a slider).
-- `button`: Used when the element should be treated as a button.
-- `header`: Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
-- `image`:  Used when the element should be treated as an image. Can be combined with button or link, for example.
-- `imagebutton`: Used when the element should be treated as a button and is also an image.
-- `keyboardkey`: Used when the element acts as a keyboard key.
-- `link`: Used when the element should be treated as a link.
-- `none`: Used when the element has no role.
-- `search`: Used when the text field element should also be treated as a search field.
-- `summary`: Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
-- `text`: Used when the element should be treated as static text that cannot change.
+- `"adjustable"`:  Used when an element can be "adjusted" (e.g. a slider).
+- `"alert"`:  Used when an element contains important text to be presented to the user.
+- `"button"`:  Used when the element should be treated as a button.
+- `"checkbox"`:  Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `"combobox"`:  Used when an element represents a combo box, which allows the user to select among several choices.
+- `"header"`:  Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
+- `"image"`:  Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `"imagebutton"`:  Used when the element should be treated as a button and is also an image.
+- `"keyboardkey"`:  Used when the element acts as a keyboard key.
+- `"link"`:  Used when the element should be treated as a link.
+- `"menu"`:  Used when the component is a menu of choices.
+- `"menubar"`:  Used when a component is a container of multiple menus.
+- `"menuitem"`:  Used to represent an item within a menu.
+- `"none"`:  Used when the element has no role.
+- `"progressbar"`:  Used to represent a component which indicates progress of a task.
+- `"radio"`:  Used to represent a radio button.
+- `"radiogroup"`:  Used to represent a group of radio buttons.
+- `"scrollbar"`:  Used to represent a scroll bar.
+- `"search"`:  Used when the text field element should also be treated as a search field.
+- `"spinbutton"`:  Used to represent a button which opens a list of choices.
+- `"summary"`:  Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
+- `"switch"`:  Used to represent a switch which can be turned on and off.
+- `"tab"`:  Used to represent a tab.
+- `"tablist"`:  Used to represent a list of tabs.
+- `"text"`:  Used when the element should be treated as static text that cannot change.
+- `"timer"`:  Used to represent a timer.
+- `"toolbar"`:  Used to represent a tool bar (a container of action buttons or components).
 
 ### References
 

diff --git a/docs/rules/has-valid-accessibility-state.md b/docs/rules/has-valid-accessibility-state.md
@@ -6,11 +6,11 @@ Describes the current state of a component to the user of an assistive technolog
 
 NAME|TYPE|REQUIRED
 -|-|-
-disabled|boolean|No
-selecte|boolean|No
-checked|boolean or 'mixed'|No
-busy|boolean|No
-expanded|boolean|No
+`disabled`|boolean|No
+`selected`|boolean|No
+`checked`|boolean or 'mixed'|No
+`busy`|boolean|No
+`expanded`|boolean|No
 
 ### References
 

diff --git a/docs/rules/has-valid-accessibility-states.md b/docs/rules/has-valid-accessibility-states.md
@@ -6,8 +6,8 @@ The accessibilityStates property is used to tell Talkback or Voiceover the state
 
 ## This property takes on an Array containing one, both, or neither of the following values
 
-- `selected`: Used when the element is in a selected state. For example, a button is selected.
-- `disabled`: Used when the element is disabled and cannot be interacted with
+- `"selected"`: Used when the element is in a selected state. For example, a button is selected.
+- `"disabled"`: Used when the element is disabled and cannot be interacted with
 
 ### References
 

diff --git a/docs/rules/has-valid-accessibility-traits.md b/docs/rules/has-valid-accessibility-traits.md
@@ -6,23 +6,23 @@ The accessibilityTraits property is used to tell a person using VoiceOver what k
 
 ## Values may be one of the following
 
-- none
-- button
-- link
-- header
-- search
-- image
-- selected
-- plays
-- key
-- text
-- summary
-- disabled
-- frequentUpdates
-- startsMedia
-- adjustable
-- allowsDirectInteraction
-- pageTurn
+- `"none"`
+- `"button"`
+- `"link"`
+- `"header"`
+- `"search"`
+- `"image"`
+- `"selected"`
+- `"plays"`
+- `"key"`
+- `"text"`
+- `"summary"`
+- `"disabled"`
+- `"frequentUpdates"`
+- `"startsMedia"`
+- `"adjustable"`
+- `"allowsDirectInteraction"`
+- `"pageTurn"`
 
 ### References
 

diff --git a/docs/rules/has-valid-accessibility-value.md b/docs/rules/has-valid-accessibility-value.md
@@ -6,13 +6,13 @@ Represents the current value of a component.
 
 NAME|DESCRIPTION|TYPE|REQUIRED
 -|-|-|-
-min|The minimum value of this component's range.|integer|Required if `now` is set.
-max|The maximum value of this component's range.|integer|Required if `now` is set.
-now|The current value of this component's range.|integer|No
+`min`|The minimum value of this component's range.|integer|Required if `now` is set.
+`max`|The maximum value of this component's range.|integer|Required if `now` is set.
+`now`|The current value of this component's range.|integer|No
 
 NAME|DESCRIPTION|TYPE|REQUIRED
 -|-|-|-
-text|A textual description of this component's value.|string|No
+`text`|A textual description of this component's value.|string|No
 
 
 ### References

diff --git a/docs/rules/has-valid-important-for-accessibility.md b/docs/rules/has-valid-important-for-accessibility.md
@@ -2,14 +2,14 @@
 
 If there are two (or more) overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to:
 
-- auto
-- yes
-- no
-- no-hide-descendants (this will force accessibility services to ignore the component and all of its children).
+- `"auto"`
+- `"yes"`
+- `"no"`
+- `"no-hide-descendants"` (this will force accessibility services to ignore the component and all of its children).
 
 ### References
 
-1.  https://facebook.github.io/react-native/docs/accessibility.html#importantforaccessibility-android
+1. https://facebook.github.io/react-native/docs/accessibility.html#importantforaccessibility-android
 
 ## Rule details
 

diff --git a/docs/rules/no-nested-touchables.md b/docs/rules/no-nested-touchables.md
@@ -4,7 +4,7 @@
 
 ### References
 
-1.  https://facebook.github.io/react-native/docs/accessibility.html
+1. https://facebook.github.io/react-native/docs/accessibility.html
 
 ## Rule details