Как я могу убедиться, что порядок табуляции для html-элементов всегда будет одинаковым, независимо от обновления страницы или перехода на страницу?

Проект, над которым я работаю, использует AngularJS и использует плагин UI-Router для управления всеми изменениями состояния/страницы.

Когда я перехожу на определенную страницу, нажимая кнопку на главной странице приложения, порядок табуляции этой страницы начинается с нижнего колонтитула. Однако, когда я обновляю ту же страницу, порядок вкладок правильно начинается вверху страницы. Я заметил, что когда я перехожу на страницу с помощью кнопки с главной страницы и нажимаю на верхнюю часть страницы, прежде чем начинать вкладку, порядок вкладок работает правильно.

Я попытался добавить tabIndex="0" к ссылкам на основной панели навигации, однако это не имело никакого значения. Как я уже сказал, порядок вкладок на странице работает отлично, когда я обновляю страницу. Это только испорчено, когда я перехожу на страницу из какой-то другой части сайта.

Есть ли способ убедиться, что порядок вкладок будет вести себя точно так же, независимо от того, обновлю ли я страницу или перейду ли я на страницу с другой страницы сайта?


angularjs accessibility angular-ui-router tabindex section508
person user2407334    schedule 28.06.2016    source источник
comment
У вас есть образец URL? Есть вероятность, что кнопка на главной странице приложения является ссылкой на якорь (возможно, на #footer или что-то подобное)? В любом случае, tabindex не будет делать того, чего, как я думаю, вы хотите добиться; это просто делает элемент фокусируемым.   -  person aardrian    schedule 28.06.2016
comment
Нужно больше контекста. Пожалуйста, опубликуйте пример кода.   -  person John Halbert    schedule 28.06.2016

Ответы (1)


arrow_upward
2
arrow_downward

При изменении состояния или при инициализации контроллера и после рендеринга DOM установите фокус на первый элемент управления, который соответствует вашим критериям.

Содержащий вид:

  <body ng-app="myApp">
    <div id="tabContent" ui-view></div>
  </body>

Javascript:

var rootElementName='tabContent';
$timeout(function () {
                var formElements = $('#' + rootElementId)
                                     .find('select[disabled!="disabled"],input[disabled!="disabled"],textarea[disabled!="disabled"]');
                if(formElements && formElements.length > 0) {
                    formElements[0].focus();
                    return true;
                    } else {
                    return false;
                    }
            }, 0);

* Вы можете сделать это в сервисе или директиве. ИЛИ вы можете привязать его к onEnter или событию $viewContentLoaded.

Я включил идентификатор, чтобы вы могли нацеливать элементы управления на определенную часть страницы, и в этом примере основное внимание будет уделено первому элементу управления select, input или textarea, который не отключен.

person n daniel    schedule 28.06.2016
comment
Большое спасибо! - person user2407334; 28.06.2016