FormidableLabs / FormidableLabs/react-native-ama
VoiceOver/TalkBack items inside Carousel/Flatlist
- 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