javascript - 在 ng-view 中加载新路由时，选项卡 (tabindex) 定位到错误的元素

Question

我在 Angular (1.4.8) 中有一个 SPA，使用 Angular-route (1.4.8) 和 Angular-Material(以防有任何区别)。

每当用户单击链接并重定向到新路线时，下一个选项卡位置应该是 ng-view 中带有 tabindex="1" (或 0、-1)的元素。相反，当加载新路线时，下一个选项卡位置是应用程序的 Logo 和标题菜单[出现在 ng-view 之外]。

这会造成非常糟糕的可用性，每当用户更改路线时，他们都必须跳过约 5 个链接才能定位主要所需元素。这在我们的应用程序中尤其糟糕，因为我们有一个跨越多个路由/ View 的表单向导。

我认为这可能是最近开始的，可能是从早期版本升级到 1.4.8 时开始的。有人有这方面的经验和/或关于如何解决它的建议吗？

每当 ng-view 渲染新路线时，事件 tabindex 位置应恢复为 0。

Answer 1

我在这篇关于 ARIA 和 AngularJS 的文章中发现了一个解决方案，我最终实现了:Single page applications, AngularJS and accessibility .

app.run(function setupRouteChangeHandlers ($rootScope) {
  var bodyElement;

  $rootScope.$on('$viewContentLoaded', setupTabIndexFocus);

  ////////////

  function setupTabIndexFocus () {
    if (!bodyElement) bodyElement = $('body');
    bodyElement.find('md-content').attr('tabIndex', -1).focus();
  }
});

我们使用 Angular-Material，因此每个 View 都有一个我们可以定位的 md-content 元素(但您可以定位任何元素)。当用户点击 tab 时，下一个 tabindex 位置将是 View 中 tabindex="1" 的元素。

这样做的好处是我们不选择第一个表单字段，因此移动设备键盘不会立即出现(这会导致在用户看到屏幕上的内容之前，移动设备屏幕的一半被覆盖)页)。