Activer les événements de clic ou de clic pour basculer les boutons dans ionique dans Accessibilité

Question

Je travaille sur une application mobile qui a une liste d'éléments, chacun contenant des boutons bascule. Lorsque le mode Accessibilité (Voix off) est activé, la mise au point sur ces éléments de liste est activée, mais le double appui sur l'élément n'active pas le bouton bascule.

Voici l'exemple de code que j'utilise. Il lit le contenu, mais les méthodes on-tap ou ng-click ne sont pas déclenchées.

Le code ci-dessous fait la mise au point sur l'élément, mais lorsqu'il est tapoté deux fois, le bouton ne se met pas en MARCHE/ARRÊT. Le même comportement est observé sur iOS et Android. Des idées?

HTML

<ion-list> 
    <ion-toggle role="option" toggle-class="toggle-balanced" ng-repeat=“item in items" tabindex="-1" ng-model="item.isToggleOn" ng-change=“item.isToggleOn" on-tap=“updateSettings(item)" aria-label=“Item description,, Double Tap to toggle setting." > 
     <div class="pref-item-text-wrap” >Item description</div> 
    </ion-toggle> 
</ion-list> 

Dans le contrôleur:

$scope.updateSettings = function (item) { console.log("In update settings"); }

Answer 1

Events like gestures and keyboard events are intercepted by screen readers. Vous pouvez utiliser les rôles corrects pour permettre au lecteur d'écran de transmettre l'événement approprié à vos gestionnaires d'événements JavaScript.

Notez également que lorsque le lecteur d'écran est activé, les gestes changent. Un tapotement unique devient un double-clic sur iOS et un double-tapage devient un tapotement triple. Voir http://axslab.com/articles/ios-voiceover-gestures-and-keyboard-commands.php

Des changements similaires se produisent sur Android.

Cela étant dit, vous avez beaucoup de choses mal avec ce petit bout de code:

1. Si le tabindex est -1, il ne sera pas focalisable pour un utilisateur du clavier uniquement et est donc pas accessible par tous les utilisateurs. Vous devez vous assurer que le tabindex est défini sur 0
2. Le comportement que vous décrivez s'apparente davantage à un rôle checkbox ou radio qu'à un option. Vous devriez probablement utiliser le rôle checkbox.
3. Le parent d'un option doit être un rôle listbox comme on peut le voir clairement dans les spécifications http://www.w3.org/TR/wai-aria/roles#option, si vous utilisez listbox en combinaison avec option, vous devez définir aria-multiselectable à true

Dans tous les cas, Lorsque vous implémentez l'un de ces rôles, vous devez gérer les propriétés d'état aria-* appropriées, puis vous devez utiliser un gestionnaire d'événements indépendant du périphérique. Vous devrez peut-être utiliser le ng-click en combinaison avec ngAria pour obtenir le comportement requis. Assurez-vous de tester avec un clavier uniquement et sans lecteur d'écran (sur Android) et avec un clavier et un lecteur d'écran (sur iOS et Android) ainsi que le toucher et un lecteur d'écran (sur iOS et Android).

Answer 2

Heres un petit hack pour le faire fonctionner.

En vous SASS, après l'importation ionique, vous devez remplacer la propriété pointer-events de la composante bascule:

// accessible toggles 
.item-toggle { 
    pointer-events: all; 
    .toggle { 
    pointer-events: none; 
    } 
} 

S'il vous plaît noter que ce qui rend la bascule réagit pas à cliquer sur les événements, sauf si vous gérez cet événement manuellement au niveau de l'objet, par exemple:

<ion-toggle role="checkbox" aria-checked="{{isChecked}}" ng-model="isChecked" ng-click="isChecked=!isChecked">Toggle item</ion-toggle>