Typeahead e screenreaders

Question

Sto usando Typeahead/Bloodhound per generare un elenco dal contenuto di un database. Vorrei che i suggerimenti del segugio venissero letti dallo screen reader quando evidenziato. Ho aggiunto alcuni ruoli di aria agli elementi nel tentativo di leggere il contenuto dallo screen reader. Tuttavia, quando evidenziato, lo screen reader è silenzioso. Se aggiungo lo stato attivo all'elemento, la finestra modale di Blodhound si chiude, il che non funzionerà.

Quello che ho finora:

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' 
     }); 

che aggiunge ruoli di etichette aria alla lista di output e il contenitore, in un tentativo fallito di avvertire il lettore che questo elenco cambia in modo dinamico. Sto anche ascoltando il cursorchanged, così posso isolare l'elemento che ho bisogno di esprimere (il console.log lo verifica), ma non so come dire al lettore di leggere l'elemento corrente con la classe tt-cursor.

Ecco l'output 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> 

Tutto il lettore mi dice quando focalizzata sul elemento di input è che è un campo di ricerca.

aggiornamento

Aggiunto un violino: http://jsfiddle.net/m9a4sg52/

anche se non penso che questo è un setup 1-1, in quanto i risultati typeahead vengono generati dopo il caricamento del DOM.

Answer 1

Assegnare il titolo a elementi highligted potrebbe essere d'aiuto.

myTypeahead.on('typeahead:cursorchanged', function($e, datum) { 

    console.log($e); 
    $(".tt-cursor").attr("title", datum); 

    /* 
    $(this).html(datum["value"]); 
    var focused = $(document.activeElement) 
    var submenuHighlight = focused.parent().find('.tt-cursor .searchListItem a'); 
    console.log(submenuHighlight.text()); 
    */ 
}); 

Oppure, perché non aggiungere template personalizzati poi dare title per uno dei this elements che supportano attributo title.