Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

VoiceOver/TalkBack items inside Carousel/Flatlist

Ouverte
  • Quelque chose ne va pas ?
#321 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react-native, typescript
Domaine
accessibility, mobile

Piste de recherche

Commencez par reproduire le comportement de VoiceOver/TalkBack décrit pour Carousel et FlatList, en utilisant l’exemple de l’issue comme point de départ. Suivez le comportement d’accessibilité pertinent de React Native et déterminez comment les éléments de Carousel ciblés doivent exposer leur contenu tout en préservant la navigation par incrémentation/décrémentation ; le travail est terminé lorsque chaque élément ciblé peut être lu et parcouru de manière accessible sur les deux plateformes.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Is there an existing issue for this?
  • I have searched the existing issues
Code of Conduct
  • I agree to follow this project's Code of Conduct
Question

Hello, love your project! Although I can't find the way to VoiceOver items inside the Carousel. It captures the entire carousel and says that user has to swipe up or down to navigate through the carousel but in my opinion it would be nice to read the content of the focused item. Something like this:


import { Carousel } from '@react-native-ama/extras';
import { Text } from '@react-native-ama/react-native';
import { View } from 'react-native';

const Component = () => {
  const data = [
    { header: 'Title 1', text: 'Text 1' },
    { header: 'Title 2', text: 'Text 2' },
    { header: 'Title 3', text: 'Text 3' },
  ];
  const flatListRef = React.useRef<FlatList<(typeof data)[number]>>(null);

  const renderItem: ListRenderItem<(typeof data)[number]> = ({ item }) => {
    return (
      <View>
        <Text accessibilityRole="header">item.header<Text />
        <Text accessibilityRole="summary">item.text<Text />
      <View />
    );
  };

  return (
    <FlatList
      ref={flatListRef}
      data={data}
      renderItem={renderItem}
      accessible={true}
      accessibilityLabel="Carousel"
      accessibilityRole="adjustable"
      accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
      onAccessibilityAction={(event: AccessibilityActionEvent) => {
        const value = event.nativeEvent.actionName === 'increment' ? 1 : -1;
        const newIndex = carouselIndexForScreenReader.current + value;

        carouselIndexForScreenReader.current = clamp(newIndex, 0, data.length - 1);
        flatListRef.current?.scrollToIndex({
          index: carouselIndexForScreenReader.current,
        });
      }}
    />
  );
};
Langage dominant
TypeScript
Étoiles
295
Forks
22
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de FormidableLabs/react-native-ama

Toutes les issues de FormidableLabs/react-native-ama

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.