Search Field - "Add a fund or an ETF"

[amberderosa]

Summary

Brief description of the issue. Please list any specific steps.

Example:

1. Go to https://investor.vanguard.com/etf/profile/performance/voo
2. Go to the add a fund or ETF search field.

Expected result

What did you expect to happen? The user should be able to use the arrow key to navigate through the search list items. This is working in IE and JAWS. It is not working in Chrome and JAWS.

Actual result

What actually did happen? Upon using the arrow key, user is not able to navigate through the search list items, In Chrome and JAWS.

Example

A test case that demonstrates the issue - Go to page - https://investor.vanguard.com/etf/profile/performance/voo get to the "Add a fund or ETF" Search field Type - VF Tab Use Arrow keys to navigate through the search suggest

Additional Information

JAWS version and build number

JAWS Version 18.0.1835

Operating System and version

Windows 10

Browser and version:

Chrome - Version 68.0.3440.75 (Official Build) (64-bit)

[menovak]

hi amberderosa,

Is this the same 'Search' field as Issue #183? If not, please include a screen shot as I'm not seeing/finding an "add fund"...

Thanks Mark

[menovak]

hi amberderosa,

Never mind my earlier comment, I've found the "Add a fund or ETF" Search field". Thanks

Mark

[menovak]

hi amberderosa,

I reviewed the "Add a fund or ETF" Search field using both IE11 and Chrome 75 running JAWS 2019.1904 and found the following:

1 - if I type 'VF' and pause, eventually a list of items (I think 34) appeared 2 - the list of items which appear are each <a> (links) within an unordered list structure 3 - pressing TAB key places focus on the next 'active' element in the DOM, which in this case is the first item in the list, and you will hear a 'low beep' which indicates JAWS has changed to Virtual PC On mode and JAWS will announce the first item 4 - from here, you can either TAB thru the list (as each <a>) will take focus, or arrow up/down the list as JAWS is in Virtual PC On (or browse) mode

Note, had the "unordered list structure" not been the very next item in the DOM, this entire navigation into the list would not function.

General accessibility issues found: 1 - the "Add a fund or ETF" Search field uses placeholder text ONLY as a label 2 - the "Add a fund or ETF" Search field is just an <input type="text" ...> field, there are no semantics alerting the screen reader user to the associated drop down list (aria-expanded, aria-controls,aria-activedescendant, etc.) 3 - without some semantics to alert the screen reader user that a list will or did appear, a screen reader user may not even discover the list or worse, maybe confused when/how the list appears.

Regards, Mark, TPG Engineer