在 ng-view 中加载新路由时，制表符 (tabindex) 定位到错误的元素

Question

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

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

这会造成非常糟糕的可用性，用户在更改路线时必须跳过 ~5 link 秒才能定位到主要的所需元素。这在我们的应用程序中尤其糟糕，因为我们有一个跨越多个 routes/views.

的表单向导

我认为这可能是最近开始的，可能是在从早期版本升级到 1.4.8 之后。有没有人对此有经验 and/or 关于如何解决它的建议？

每当 ng-view 呈现新路线时，活动的 tabindex 位置应恢复为 0。

Answer 1

我的解决方案是将默认焦点设置在表单中所需的元素上。你可以试试'ng-autofocus'。

Answer 2

我在这篇关于 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 因此每个视图都有一个我们可以定位的 md-content 元素（但您可以定位任何元素）。当用户点击 tab 时，下一个 tabindex 位置将是视图中 tabindex="1".

的元素

这样做的好处是我们没有 select 第一个表单域，因此移动设备键盘不会立即出现（这会导致移动设备屏幕的一半在用户面前被覆盖甚至可以看到页面上的内容）。

在 ng-view 中加载新路由时，制表符 (tabindex) 定位到错误的元素

Tabbing (tabindex) targeting wrong element when new route loaded in ng-view

javascript

angularjs

angular-material