Я использую Typeahead/Bloodhound для создания списка из содержимого базы данных. Я хотел бы, чтобы подсказки кровавой ловушки читались на экране, когда подсвечивались. Я добавил несколько арийских ролей в элементы, пытаясь получить содержимое, прочитанное из программы чтения с экрана. Однако при подсвечивании экранный экран отключается. Если я добавляю фокус к элементу, то модальное окно blodhound закрывается, что не будет работать.

Что я до сих пор:

 var myTypeahead = $('.supersearch').typeahead({
        highlight: true,
        autoselect: true
      },
      {
        name: 'search-content',
        displayKey: 'title',
        source: content.ttAdapter(),
        templates:{
          header: '<h3 class="typeaheadTitle">Filtering Content...</h3>',
          empty: [
                '<div class="noResults">',
                'No Results',
                '</div>'
              ].join('\n'),
          suggestion: Handlebars.compile('<div class="searchListItem"><a href="{{link}}" class="searchLink" aria-label="{{title}}">{{title}}</a></div>')
        }
      });


      myTypeahead.on('typeahead:cursorchanged', function($e, datum){
        $(this).html(datum["value"]);
        var focused = $( document.activeElement )
        var submenuHighlight = focused.parent().find('.tt-cursor .searchListItem a');
        console.log(submenuHighlight.text());
      });



      // Add aria dialog role
      $('.tt-dataset-search-content').attr({
        'role': 'dialog',
        'aria-live': 'assertive',
        'aria-relevant':'additions'
      });

Что добавляет роли метки арии в список вывода и контейнер, при неудачной попытке уведомить читателя о том, что этот список изменяется динамически. Я также слушаю курсор, поэтому я могу выделить элемент, который мне нужен, озвучен (консоль .log проверяет это), но я не знаю, как сообщить читателю прочитать текущий элемент с классом tt-cursor.

Вот результат HTML:

<div class="tt-dataset-search-content" role="dialog" aria-live="rude" aria-relevant="additions">
  <h3 class="typeaheadTitle">Filtering Content...</h3>
  <span class="tt-suggestions" style="display: block;">
    <div class="tt-suggestion tt-cursor">
      <div class="searchListItem" style="white-space: normal;">
         <a href="/about" class="searchLink" aria-label="About"><strong class="tt-highlight">A</strong>bout</a>
      </div>
    </div>
    <div class="tt-suggestion">
      <div class="searchListItem" style="white-space: normal;">
         <a href="Things" class="searchLink" aria-label="Things">THings</a>
      </div>
   </div>

Все читатели говорят мне, когда сосредоточены на элементе ввода, это поле поиска.

Обновляем

Добавлена ​​скрипка: http://jsfiddle.net/m9a4sg52/

хотя я не думаю, что это настройка 1-1, так как результаты typeahead генерируются после загрузки DOM.