2020 11 05 Highlighting Addresses Does Not Work Correctly.mp4

[jill-iterators]

Screengrab/videos (insert file names here) 2020 11 05 Highlighting Addresses Does Not Work Correctly.mp4

Link https://www.boston.gov/my-neighborhood?p2

Node # (if known)

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 10.15.7 > Chrome 86.0

Trusted Tester Test

Brief Description While using the tab feature to scroll the address list more than one option stays highlighted.

Steps to reproduce 1) 00:00, Open the link in a private browser window and then return. 2) 00:08, Enter 10 Commonwealth into Search field for addresses 3) 00:11, Potential addresses load below the search field containing the Commonwealth address 4) 00:15, Using the tab button, tab to the Search field icon and then tab again to the first address in the results. 5) 00:16, Note that as tester continues to press the tab button to the next address in the search list, a previous address stays highlighted. This is a accessibility bug and a functional bug because there should not be two highlighted options and tester does not know where the cursor is. a) Video continues to further highlight this behavior several more times.

Desired Result • Able to tab through the addresses provided from a search and see only one highlighted option at a time and not lose focus.

Actual Result • Unable to tab through options without losing focus as more than one option is highlighted at a time. 2020 11 05 Highlight Addresses Does Not Work Correctly.docx.zip

[reillyzlab]

I inconsistently was able to replicate this, but was able to do so part of the time.

Think this might be happening because the mouse curser hovers over one address while simultaneously getting the hover on tab.

But, a developer should look into this and see if they have any additional insight/if there is anything we can do.

[subaha-cob]

@jill-iterators I cannot reproduce this. Can you add a video so i can see what it is you are looking at. Thanks.

[david-iterators]

2020 11 05 Highlighting Addresses Does Not Work Correctly.mp4.zip

Here is the video that corresponds to the bug report. Please let us know if you have other questions.

[subaha-cob]

@david-iterators maybe I am not getting it, the only reason i see from your video that is making one than one option highlighted is that the mouse was over it. Can you please retest this using only your keyboard, but this time make sure the mouse is completely outside the window. Please send another video when you are done. Thanks.

[david-iterators]

Hi @subaha-cob . Yes, that is correct. If the mouse is hovering over an item then the keyboard highlighting shows 2 items in focus. This was happening on other pages as well. I do not recall how this was resolved previously. For example, if a keyboard event occurs then perhaps deactivate the hover focus. The goal would be to clarify which item has focus so that if the user presses the Enter key then they know which item will be activated.

[subaha-cob]

@david-iterators thanks for the clarification. I don't recall doing this for the other pages.

[subaha-cob]

@reillyzlab This is going to be another site wide implementation.

[subaha-cob]

This is too broad. I will focus only on the MNL page for now. They can open new tickets for the rest of the website.

[subaha-cob]

@david-iterators @jill-iterators UAT is now up with MNL tickets. https://d8-uat.boston.gov/

Try testing with this addresses only:

50 Milk St #2050 Boston, 02108 192 Dudley St Roxbury, 02119 27 Tyler St Boston, 02111 1 State St Ste 1500 Boston, 02108

[ollie-iterators]

This bug has been fixed