Comment obtenir React-Native pour annoncer un message d'accessibilité spécifique via AccessibiliyManager?

Question

Comment aborderiez-vous l'annonce d'un message d'accessibilité via TalkBack sur Android (ou équivalent iOS)? Est-ce possible avec la version ReactNative existante? Je ne trouve tout simplement pas d'informations et cela semble assez limité, surtout pour les clients Android (par exemple, "bouton", "bouton radio coché/décoché" sont les deux seuls états que je peux voir pour toutes les vues.)

c'est possible ootb, ou ai-je besoin de créer un pont qui expose cela de natif?

Answer 1

J'ai fini par créer un module d'accessibilité (juste pour Android actuellement, devra mettre en œuvre la même fonctionnalité sur iOS plus tard). étapes:

Créé AccessibilityModule.java:

public class AccessibilityModule extends ReactContextBaseJavaModule { 

    private final ReactApplicationContext mContext; 

    public AccessibilityModule(ReactApplicationContext reactContext) { 
     super(reactContext); 
     mContext = reactContext; 
    } 

    @Override 
    public String getName() { 
     return "A11yModule"; 
    } 

    @ReactMethod 
    void announce(String message) { 
     final AccessibilityManager a11yManager = (AccessibilityManager) mContext.getSystemService(Context.ACCESSIBILITY_SERVICE); 
     if (a11yManager == null || !a11yManager.isEnabled()) { 
      return; 
     } 

     final int eventType = AccessibilityEventCompat.TYPE_ANNOUNCEMENT; 
     final AccessibilityEvent event = AccessibilityEvent.obtain(eventType); 
     event.getText().add(message); 
     event.setClassName(AccessibilityModule.class.getName()); 
     event.setPackageName(mContext.getPackageName()); 

     a11yManager.sendAccessibilityEvent(event); 
    } 
} 

Ensuite, dans ma classe ReactPackage, je me inscrire le module:

@Override 
public List<NativeModule> createNativeModules(
     ReactApplicationContext reactContext) { 
    List<NativeModule> modules = new ArrayList<>(); 

    modules.add(new AccessibilityModule(reactContext)); 

    return modules; 
} 

Ensuite, NativeModules à l'importation et l'utiliser en javascript:

import { NativeModules } from 'react-native' 
const A11yModule = NativeModules.A11yModule; // this matches getName() 
A11yModule.announce("Hello World"); 

Answer 2

@DustinB Vous pouvez utiliser cette bibliothèque je l'ai écrit:

https://github.com/MaxToyberman/react-native-accessibility

suivre les étapes suivantes:

1) NPM installer réagir-accessibilité native --save

2) réagir lien natif réagir-native accessibilité

3) {import announceForAccessibility} de 'réagir-accessibilité native'

4) announceForAccessibility ('Certains messages seront annoncés')