ListExamples.macos.ts

const ListAccessibilityExamples: React.FunctionComponent = () => {
  const [showImage, setShowImage] = React.useState(true);
  const [showPresence, setShowPresence] = React.useState(false);
  const [showRing, setShowRing] = React.useState(false);

  const redSquareStyle: ViewStyle = { width: 20, height: 20, margin: 10, backgroundColor: 'red' };
  const cardStyle: ViewStyle = { width: 40, height: 40, margin: 10, backgroundColor: 'white', borderWidth: 1 };

  return (
    <View>
      <Text>Simple List</Text>
      {/* Outer View has accessibilityRole "list", and at least one inner view has an AccessibilityLabel */}
      <View accessibilityRole={'list'} accessible>
        <View accessible accessibilityLabel={'A red box'} style={redSquareStyle} />
        <View accessible style={redSquareStyle} />
        <View accessible style={redSquareStyle} />
      </View>
      <Text>List with cards (not accessible), and inner views (acessible)</Text>
      {/* Outer View has accessibilityRole "list", and at least one inner view has an AccessibilityLabel */}
      <View accessibilityRole={'list'} accessible>
        <View style={cardStyle}>
          <View accessible accessibilityLabel={'A red box'} style={redSquareStyle} />
        </View>
        <View style={cardStyle}>
          <View accessible accessibilityLabel={'A red box'} style={redSquareStyle} />
        </View>
        <View style={cardStyle}>
          <View accessible accessibilityLabel={'A red box'} style={redSquareStyle} />
        </View>
      </View>
    </View>
  );
};