feat(typeahead): improved accessibility #582

[samshay]

should close #582

PR Checklist

Before creating new PR, please take a look at checklist below to make sure that you've done everything that needs to be done before we can merge it.

• read and followed the CONTRIBUTING.md guide.
• built and tested the changes locally.
• added/updated tests ( no test for typeahead)
• added/updated API documentation.
• added/updated demos ( not necessary )

To add accessibility to typeahead, i copy the same modification of ng-bootstrap :
ng-bootstrap/ng-bootstrap@e1fa7a4#diff-2b05df9eab924379f039993fae7b433e

I test this with NVDA and it can voice correctly now.

Reference issue : #582

[codecov]

Codecov Report

Merging #5547 into development will increase coverage by 0.05%.
The diff coverage is 73.91%.

@@               Coverage Diff               @@
##           development    #5547      +/-   ##
===============================================
+ Coverage        73.58%   73.64%   +0.05%     
===============================================
  Files              323      323              
  Lines            11647    11664      +17     
  Branches          2481     2481              
===============================================
+ Hits              8571     8590      +19     
+ Misses            1968     1966       -2     
  Partials          1108     1108

Impacted Files	Coverage Δ
src/typeahead/typeahead.directive.ts	80.43% <60%> (+0.5%)	⬆️
src/typeahead/typeahead-container.component.ts	76.11% <84.61%> (+1.4%)	⬆️
src/datepicker/bs-datepicker.component.ts	69.84% <0%> (+1.58%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b405057...826f1aa. Read the comment docs.

[samshay]

What's the status of merging pull requests to this repo? I see there are more waiting.

[valorkin]

looks solid, thanks a lot for this great contribution!

[samshay]

Ok, thanks, it's possible to do this with dropdowns, collapse because the code is not into the component, and the aria attribute can be add in client html code.
But for typeahead, the code (html) is inside the component, how add aria attribute in the code generated by the component (or directive ), look my pull request ?

In my advise, it's not possible ?
But I may be wrong, in any case I don't know how to do it ...
@dmitry-zhemchugov ???

[dmitry-zhemchugov]

Tested. Ready to megre

[daniloff200]

Finally, we did it!
Woohoo! 😄 🍷 🍾

[samshay]

Thanks to @dmitry-zhemchugov @IraErshova @daniloff200 and @valorkin

[dharitdesai]

@dmitry-zhemchugov @IraErshova @daniloff200 @valorkin @samshay
there is an issue in here,

ngx-bootstrap/src/typeahead/typeahead.directive.ts

Line 39 in 2c6a1f8

'[attr.aria-autocomplete]': 'list'

that list is not defined.
if you try to build your project by using this using AoT compiler, it throws error in build like this
ERROR: src/location/location.html(16,9): : Directive TypeaheadDirective, Property 'list' does not exist on type 'TypeaheadDirective'.
I can throw a PR if you guys want to