FormidableLabs / FormidableLabs/react-native-ama
VoiceOver/TalkBack items inside Carousel/Flatlist
- Lenguaje dominante
- TypeScript
- Estrellas
- 295
- Forks
- 22
- Merge medio
- 20 min
- PR fusionados (30 d)
- 2
Descripción
### 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,
});
}}
/>
);
};
```
Guía de contribución
Línea de trabajo
Empieza reproduciendo el comportamiento de VoiceOver/TalkBack descrito para Carousel y FlatList, usando el ejemplo del issue como punto de partida. Sigue el comportamiento de accesibilidad relevante de React Native y determina cómo deben exponer su contenido los elementos enfocados de Carousel, preservando la navegación de incremento/decremento; se considerará terminado cuando cada elemento enfocado pueda leerse y recorrerse de forma accesible en ambas plataformas.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- accessibility, mobile
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100