[Web] The accessibility not work correct with the button inside item

[linhvovan29546]

Describe the bug The keyboard accessibility on the web is not correctly.

To Reproduce Steps to reproduce the behavior:

1. Go to my snack and run example
2. Press the tab button until the last item is displayed.
3. See error

Expected behavior

• I'm not entirely sure if this issue is related to the library itself. However, I wanted to notify you about this behavior.

Screenshots

https://github.com/user-attachments/assets/1f36bd29-eac0-407c-8d8a-075736fbc793

Versions (please complete the following information):

• "react": "18.2.0",
• "react-native": "0.72.3",
• "react-native-gesture-handler": "~2.16.1",
• "react-native-reanimated": "~3.10.1",
• "react-native-safe-area-context": "4.10.1",
• "react-native-reanimated-carousel": "^4.0.0-alpha.7",

Smartphone (please complete the following information):

• Web platform

Additional context

• In this video, at 0:07s, when the item '2' is displayed, I press Tab, but nothing happens. It should move to '3'.

[dosubot[bot]]

Hello, @linhvovan29546! I'm here to assist you with any bugs, questions, or contributions you have. Let's work together to resolve the issue you're experiencing.

To resolve the keyboard accessibility issue with a button inside an item when using the "react-native-reanimated-carousel" library, you can use the accessible and accessibilityRole props provided by React Native. These props help in making the components accessible to keyboard navigation and screen readers.

Here's how you can modify the Item component to include these accessibility props:

const Item: React.FC<Props> = (props) => {
  const { animationValue, label, onPress } = props;

  const translateY = useSharedValue(0);

  const containerStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      animationValue.value,
      [-1, 0, 1],
      [0.5, 1, 0.5],
      Extrapolate.CLAMP,
    );

    return {
      opacity,
    };
  }, [animationValue]);

  const labelStyle = useAnimatedStyle(() => {
    const scale = interpolate(
      animationValue.value,
      [-1, 0, 1],
      [1, 1.25, 1],
      Extrapolate.CLAMP,
    );

    const color = interpolateColor(
      animationValue.value,
      [-1, 0, 1],
      ["#b6bbc0", "#0071fa", "#b6bbc0"],
    );

    return {
      transform: [{ scale }, { translateY: translateY.value }],
      color,
    };
  }, [animationValue, translateY]);

  const onPressIn = React.useCallback(() => {
    translateY.value = withTiming(-8, { duration: 250 });
  }, [translateY]);

  const onPressOut = React.useCallback(() => {
    translateY.value = withTiming(0, { duration: 250 });
  }, [translateY]);

  return (
    <Pressable
      onPress={onPress}
      onPressIn={onPressIn}
      onPressOut={onPressOut}
      accessible={true}
      accessibilityRole="button"
    >
      <Animated.View
        style={[
          {
            height: "100%",
            alignItems: "center",
            justifyContent: "center",
          },
          containerStyle,
        ]}
      >
        <Animated.Text
          style={[{ fontSize: 18, color: "#26292E" }, labelStyle]}
        >
          {label}
        </Animated.Text>
      </Animated.View>
    </Pressable>
  );
};

By adding accessible={true} and accessibilityRole="button" to the Pressable component, you ensure that the button inside the carousel item is accessible via keyboard navigation and screen readers ^[1].

To continue talking to Dosu, mention @dosu.