Я использую 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.