search

CityOfBoston / Iterators

Repo to host files and manage issue tracking and QA tetsing.
0 stars 0 forks source link

Keyboard, Keyboard and Mouse Focus are different #124

Open david-iterators opened 4 years ago

david-iterators commented 4 years ago

Screengrab/videos (insert file names here) Keyboard, Keyboard and Mouse Focus are different.mp4

Link https://d8-stg.boston.gov

Node # (if known) 21

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > macOS > Safari

Trusted Tester Test Keyboard Focus

Brief Description Keyboard Focus interferes with the Mouse Focus

Steps to reproduce 1) 00:00, Go to link 2) 00:05, Use the Tab key to enter the main content of page. Note that the keyboard focus is visible. 3) 00:06, Move the mouse to the same element that has the keyboard focus a) BUG: Note that the focus disappears when the mouse is hovered over the element with the keyboard focus. 4) 00:12, Use the keyboard to move to the Common Resources section on page 5) 00:14, Move the mouse to the same element that has the keyboard focus a) BUG: Note that the focus disappears when the mouse is hovered over the element with the keyboard focus. 6) 00:19, Use the keyboard to the move to the Guide section a) BUG: The keyboard focus is a light blue boarder. Moving the mouse to the same location will highlight the element with a picture related to the guide. 7) 00:27, Use the keyboard to move to the Latest News section 8) 00:31, Move the mouse to the same element that has the keyboard focus a) BUG: Note that the focus changes to a blue highlight when the mouse is hovered over the element with the keyboard focus. 9) 00:38, BUG: The same issue is observed on the Featured Videos section 10) 00:43, BUG: The same issue is observed on the BOS: 311 Service Requests section 11) 00:50, BUG: The same issue is observed on the Event Details section

Desired Result Focus is visible using mouse or keyboard navigation

Actual Result Focus conflicts between mouse and keyboard Keyboard, Keyboard and Mouse Focus are different.zip

subaha-cob commented 4 years ago

I still have a few focus issues. but added focus of 75% of hover elements. Work in Progress.

subaha-cob commented 4 years ago

I am stuck trying to debug a few things here. But gotten it up to 85% done.

subaha-cob commented 4 years ago

Please at https://d8-uat.boston.gov/

andrebtlima commented 4 years ago

@subaha-cob looks like the bug related to the Guides is fixed, i.e. the keyboard focus not revealing the image on the card, but the rest of the bugs noted by David are still issues.

subaha-cob commented 4 years ago

@andrebtlima they all look good from my end. See images below:

Screen Shot 2020-08-25 at 3 13 19 PM Screen Shot 2020-08-25 at 3 13 36 PM

image

subaha-cob commented 4 years ago
Screen Shot 2020-08-25 at 3 14 33 PM Screen Shot 2020-08-25 at 3 15 01 PM Screen Shot 2020-08-25 at 3 15 09 PM Screen Shot 2020-08-25 at 3 15 21 PM Screen Shot 2020-08-25 at 3 15 35 PM
andrebtlima commented 4 years ago

Huh interesting. @subaha-cob when I have the keyboard focus on an element and i then hover the mouse over that element, the keyboard focus still disappears.

subaha-cob commented 4 years ago

@andrebtlima what do you mean? It will disappear when you hover because it was meant to accept one interaction at a time. But if after you remove the mouse hover and the focus is no longer there, then it is an issue.

andrebtlima commented 4 years ago

Maybe I've misunderstood what @david-iterators was pointing out in his original description of the issue. @david-iterators feel free to advise or I can just move this ticket in to the Tested column and @david-iterators you can just retest to confirm that this is working properly.

subaha-cob commented 3 years ago

@jill-iterators this is on the live site. So please test there unless I say otherwise. thanks.

david-iterators commented 3 years ago

Hi @subaha-cob and @mmcgowanBOS This is a subtle issue and we have found it on a variety of websites that we have tested. We have written up a more detailed summary and also have an updated bug report for you to review. Please let us know if you have any questions regarding this extra information. We can have a teleconference if that would be helpful to clarify any of the information. Keyboard and Mouse Focus Events.pdf Keyboard and Mouse Focus Events, 00, Treasury.gov.zip Keyboard and Mouse Focus Events, 01, Hover, Focus, Active CSS.pdf Keyboard and Mouse Focus Events, 02, Focus on Focus.pdf Keyboard and Mouse Focus Events, 03, Yale.pdf Keyboard and Mouse Events, Bug.pdf

subaha-cob commented 3 years ago

@david-iterators we have a meeting at 2pm. Let us use the time to chat about this ticket and others. Thanks!

subaha-cob commented 3 years ago

@david-iterators I have updated UAT with changes for this ticket. Please test on UAT.

subaha-cob commented 3 years ago

Need to fix some legacy color issues for Guides page.

subaha-cob commented 3 years ago

Hi @david-iterators this is now ready to be tested on UAT. Please add any bugs you find here. Thanks.

subaha-cob commented 3 years ago

@david-iterators and @jill-iterators, @ollie-iterators We are waiting on you to verify so that we can move this to production please. Thanks! https://d8-uat.boston.gov/

david-EMS commented 3 years ago

Hi @subaha-cob Thanks for the followup reminder. The UAT site still displays some issues in which the keyboard focus and the mouse focus can conflict with each other. Please see the following updated bug report for a description and screen recording. Thanks

Screengrab/videos (insert file names here) https://www.loom.com/share/67ed49a8d9da44048385d23abf7a48dc

Link https://d8-uat.boston.gov/

Node # (if known)

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 11.3.1 > Chrome 90

Trusted Tester Test Visible Focus

Brief Description Visible Focus is different when the mouse is hovering over the elements then when the element is tabbed to

Steps to reproduce 1) 00:00, Load the URL 2) 00:03, Start tabbing through the page 3) 00:05 – 00:22, Inspecting the differences between hovering over elements with the mouse and tabbing them with the keyboard a) Bug: The rectangle boundary around the element goes away when the mouse hovers over the element

Desired Result • Visible Focus looks the same when the element is tabbed to versus when the element is hovered over with a mouse

Actual Result • Visible Focus looks different when the element is tabbed to versus when the element is hovered over with a mouse o The difference is that the rectangle perimeter area goes away when the mouse hovers over the element and does not show up when the mouse hovers over the element

david-iterators commented 3 years ago

Screengrab/videos (insert file names here) https://www.loom.com/share/ea2bc29e80ec4d5a9cb80d4af1ac10d3

Link https://d8-uat.boston.gov/

Node # (if known)

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 11.4 > Chrome 91

Trusted Tester Test Visible Focus

Brief Description Visible Focus is different when the mouse is hovering over the elements then when the element is tabbed to 
Steps to reproduce 1) 00:00, Load the URL, Start tabbing through the page 2) 00:02, Start tabbing through the page 3) 00:06, Tabbed to the Mayor Kim Janey link. Visible focus is different when the mouse is hovering over the link, because the blue rectangle around the link goes away when the mouse hovers over the link. The blue rectangle only shows when the user tabs over to the link using the keyboard. a) Bug: The rectangle boundary around the element goes away when the mouse hovers over the element 4) 00:19, Tabbed to the “Reopening in Boston” link. Visible focus is different when the mouse is hovering over the link, because the blue rectangle around the link goes away when the mouse hovers over the link. The blue rectangle only shows when the user tabs over to the link using the keyboard. a) Bug: The rectangle boundary around the element goes away when the mouse hovers over the element 5) 00:30, Tabbed to “Add your name to the City census” link in the “Common Resources” section. Visible focus is different when the mouse is hovering over the link, because the blue rectangle around the link goes away when the mouse hovers over the link. The blue rectangle only shows when the user tabs over to the link using the keyboard. 6) 00:42, Tabbed to the “Winter in Boston” link below the “Common Resources” section. Visible focus is different when the mouse is hovering over the link, because the blue rectangle around the link goes away when the mouse hovers over the link. The blue rectangle only shows when the user tabs over to the link using the keyboard. a) Bug: The rectangle boundary around the element goes away when the mouse hovers over the element 7) 00:51, Tabbed to the “City Council resolution supports Common Start legislation” in the “Latest News” section. Visible focus is different when the mouse is hovering over the link, because the blue rectangle around the link goes away when the mouse hovers over the link. The blue rectangle only shows when the user tabs over to the link using the keyboard. a) Bug: The rectangle boundary around the element goes away when the mouse hovers over the element 8) 00:57, Tabbed to the “2021 State of the City documentary” link in the “Featured Videos” section. Visible focus is different when the mouse is hovering over the link, because the blue rectangle around the link goes away when the mouse hovers over the link. The blue rectangle only shows when the user tabs over to the link using the keyboard. a) Bug: The rectangle boundary around the element goes away when the mouse hovers over the element

Desired Result • Visible Focus looks the same when the element is tabbed to versus when the element is hovered over with a mouse

Actual Result • Visible Focus looks different when the element is tabbed to versus when the element is hovered over with a mouse o The difference is that the rectangle perimeter area goes away when the mouse hovers over the element and does not show up when the mouse hovers over the element