jquery - Typeahead and screenreaders -

-

i using typeahead/bloodhound generate list content of database. bloodhound suggestions read screenreader when highlighted. have added few aria roles elements in attempt content read screen reader. however, when highlighted, screenreader silent. if add focus element, blodhound modal window closes, not work.

what have far:

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

which adds aria label roles output list , container, in failed attempt notify reader list changes dynamically. listening cursorchanged, can isolate element need voiced (the console.log verifies this), not know how tell reader read current item tt-cursor class.

here html output:

<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>

all reader tells me when focused on input element is search field.

update

added fiddle: http://jsfiddle.net/m9a4sg52/

although dont think 1-1 setup, typeahead results generated after dom loads.

giving title highligted element might help.

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());   */ });

or why not adding custom template give title attribute 1 of this elements support title attribute.


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more