FormidableLabs / FormidableLabs/react-native-ama

VoiceOver/TalkBack items inside Carousel/Flatlist

Ouverte
#321 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
295
Forks
22
Merge moyen
20 min
PR mergées (30 j)
2

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Code of Conduct

- [x] 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:

```markdown

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>(null);

const renderItem: ListRenderItem<(typeof data)[number]> = ({ item }) => {
return (

item.header
item.text

);
};

return (
{
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,
});
}}
/>
);
};
```

Guide de contribution

Ouvrir le guide de contribution

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.

Évaluation

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

Recevez les nouvelles issues par e-mail

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