FormidableLabs / FormidableLabs/react-native-ama

VoiceOver/TalkBack items inside Carousel/Flatlist

Abierto
#321 4 comentarios 0 reacciones 0 asignados Ver en GitHub
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.