2

我正在开发一个具有项目列表的移动应用程序，每个项目都包含切换按钮。打开辅助功能（配音）模式后，将启用对这些列表项的关注，但双击该项目不会打开/关闭切换按钮。

这是我正在使用的代码示例。它会读取内容，但不会触发 on-tap 或 ng-click 方法。

下面的代码专注于该项目，但当它被双击时，切换不会打开/关闭。在 iOS 和 Android 上观察到相同的行为。有任何想法吗？

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>

在控制器中：

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

4

2 回答 2

1

这是一个让它工作的小技巧。

在您的 SASS 中，导入 Ionic 后，您需要覆盖切换组件的指针事件属性：

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

请注意，除非您在项目级别手动处理该事件，否则这会使切换不会对单击事件做出反应，例如：

<ion-toggle role="checkbox" aria-checked="{{isChecked}}" ng-model="isChecked" ng-click="isChecked=!isChecked">Toggle item</ion-toggle>
于 2016-06-03T17:31:43.260 回答
0

屏幕阅读器会拦截手势和键盘事件等事件。您可以使用正确的角色来允许屏幕阅读器将适当的事件传递给您的 JavaScript 事件处理程序。

另外，请注意，当屏幕阅读器打开时，手势会发生变化。在 iOS 上单击变为双击，双击变为三次。请参阅http://axslab.com/articles/ios-voiceover-gestures-and-keyboard-commands.php

类似的变化也发生在 Android 上。

话虽这么说，那一小段代码有很多问题：

  1. 如果tabindex为 -1，则对于仅使用键盘的用户将无法获得焦点，因此并非所有用户都可以访问。您需要确保tabindex设置为 0
  2. 您所描述的行为更类似于 acheckbox或radio角色，而不是option. 您可能应该使用该checkbox角色。
  3. an 的父级option必须是一个listbox角色，可以在规范http://www.w3.org/TR/wai-aria/roles#option中清楚地看到，如果你确实listbox与 结合使用option，你需要设置aria-multiselectable为true

在任何情况下，当您实现这些角色之一时，您必须维护适当的aria-*状态属性，然后您必须使用与设备无关的事件处理程序。您可能必须将ngAriang-click与ngAria结合使用才能获得所需的行为。确保您仅使用键盘而不使用屏幕阅读器（在 Android 上）以及使用键盘和屏幕阅读器（在 iOS 和 Android 上）以及触摸和屏幕阅读器（在 iOS 和 Android 上）进行测试。

于 2015-11-16T14:08:00.620 回答