public render()

in packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx [272:464]
184 lines of code
20 McCabe index (conditional complexity)

  public render() {
    const selectableItems = [{}, {}, {}];
    return (
      <View>
        <Text>
          The following TouchableHighlight toggles accessibilityState.disabled
          for the View under it:
        </Text>
        <TouchableHighlight
          style={{width: 100, height: 50, backgroundColor: 'blue'}}
          accessibilityRole="button"
          onPress={this.disablePress}>
          <Text>Toggle</Text>
        </TouchableHighlight>
        <View
          style={{
            backgroundColor: this.state.viewDisabled ? 'gray' : 'lightskyblue',
          }}
          accessibilityRole="none"
          accessibilityState={{disabled: this.state.viewDisabled}}>
          <Text>
            This View should be{' '}
            {this.state.viewDisabled ? 'disabled' : 'enabled'} according to UIA
          </Text>
        </View>
        <Text>
          The following list of TouchableHighlights toggles
          accessibilityState.selected when touched:
        </Text>
        <FlatList
          accessibilityLabel="List of selectable items"
          data={selectableItems}
          renderItem={(item) => (
            <TouchableHighlight
              style={{
                width: 100,
                height: 50,
                backgroundColor: this.state.itemsSelected[item.index]
                  ? 'gray'
                  : 'lightskyblue',
              }}
              accessibilityRole="button"
              accessibilityLabel={'Selectable item ' + (item.index + 1)}
              accessibilityState={{
                selected: this.state.itemsSelected[item.index],
              }}
              onPress={() => this.selectPress(item.index)}>
              <Text>
                {this.state.itemsSelected[item.index]
                  ? 'Selected'
                  : 'Unselected'}
              </Text>
            </TouchableHighlight>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
        <Text>
          The following TouchableHighlight cycles accessibilityState.checked
          through unchecked/checked/mixed for the View under it:
        </Text>
        <TouchableHighlight
          style={{width: 100, height: 50, backgroundColor: 'blue'}}
          accessibilityRole="button"
          onPress={this.checkedPress}>
          <Text>Toggle</Text>
        </TouchableHighlight>
        <View
          style={{
            backgroundColor:
              this.state.viewChecked === 0
                ? 'green'
                : this.state.viewChecked === 1
                ? 'gray'
                : 'lightskyblue',
          }}
          //@ts-ignore
          accessibilityRole="checkbox"
          //@ts-ignore
          accessibilityState={{
            checked:
              this.state.viewChecked === 0
                ? false
                : this.state.viewChecked === 1
                ? true
                : 'mixed',
          }}>
          <Text>
            This View should be{' '}
            {this.state.viewChecked === 0
              ? 'Unchecked'
              : this.state.viewChecked === 1
              ? 'Checked'
              : 'Mixed'}{' '}
            according to UIA
          </Text>
        </View>
        <Text>
          The following TouchableHighlight toggles the acessibilityState.busy
          for the View under it:
        </Text>
        <TouchableHighlight
          style={{width: 100, height: 50, backgroundColor: 'blue'}}
          accessibilityRole="button"
          onPress={this.busyPress}>
          <Text>Toggle</Text>
        </TouchableHighlight>
        <View
          style={{
            backgroundColor: this.state.viewBusy ? 'gray' : 'lightskyblue',
          }}
          accessibilityRole="none"
          //@ts-ignore
          accessibilityState={{busy: this.state.viewBusy}}>
          <Text>
            This View should be {this.state.viewBusy ? 'Busy' : 'Not Busy'}{' '}
            according to UIA
          </Text>
        </View>
        <Text>
          The following TouchableHighlight toggles accessibilityState.expanded
          and accessibilityState.collapsed for the View under it:
        </Text>
        <TouchableHighlight
          style={{width: 100, height: 50, backgroundColor: 'blue'}}
          accessibilityRole="button"
          onPress={this.collapsePress}>
          <Text>Toggle</Text>
        </TouchableHighlight>
        <View
          style={{
            backgroundColor: this.state.viewCollapsed ? 'gray' : 'lightskyblue',
            height: this.state.viewCollapsed ? 25 : 50,
          }}
          accessibilityRole="none"
          //@ts-ignore
          accessibilityState={{
            expanded: !this.state.viewCollapsed,
          }}>
          <Text>
            This View should be{' '}
            {this.state.viewCollapsed ? 'Collapsed' : 'Expanded'} according to
            UIA
          </Text>
        </View>

        <Text>
          The following View exposes accessibilityValue fields (min, max, now)
        </Text>
        <TouchableHighlight
          style={{width: 100, height: 50, backgroundColor: 'blue'}}
          onPress={this.rangePress}>
          <Text>Range value increment</Text>
        </TouchableHighlight>
        <View
          style={{
            backgroundColor: 'gray',
            height: 50,
          }}
          accessibilityValue={{
            min: this.state.viewRangeMin,
            max: this.state.viewRangeMax,
            now: this.state.viewRangeNow,
          }}
          accessibilityRole="adjustable">
          <Text>
            The View's (accessibilityRole == adjustable, ie. Slider) properties
            should be the following according to UIA: Min-{' '}
            {this.state.viewRangeMin}
            Max- {this.state.viewRangeMax}
            Now- {this.state.viewRangeNow}
          </Text>
        </View>

        <Text>
          The following View exposes the accessibilityValue.Text field
        </Text>
        <View
          style={{
            backgroundColor: 'gray',
            height: 50,
          }}
          accessibilityValue={{
            text: this.state.viewValueText,
          }}
          accessibilityRole="combobox">
          <Text>
            The View's properties should be the following according to UIA:
            Text- {this.state.viewValueText}
          </Text>
        </View>
      </View>
    );
  }