Brief Description
Keyboard focus is not always visible
Steps to reproduce
1) See the first video: 2020 03 23, Node 21, Keyboard Focus 1.mp4
a) 00:05, Hover the mouse over the first tile in Common Resources. Notice that the link is highlighted in solid blue.
b) 00:08 – 00:15 Press the tab key or the shift-tab key to move the focus with the keyboard. Notice that the focus is shown with a blue border instead of a highlighting in solid blue. Also, the first tile is still highlighted in solid blue.
2) See the second video: 2020 03 23, Node 21, Keyboard Focus 2.mp4
a) 00:02, Hover the mouse over the first guide. Notice that the link is highlighted by revealing the image related to the guide.
b) 00:03 – 00:10 Press the tab key or the shift-tab key to move the focus with the keyboard.
i) Notice that the focus using the mouse shows a picture, while focus using the keyboard shows a blue border. Also two tiles can show a highlight at the same time.
3) See the third video: 2020 03 23, Node 21, Keyboard Focus 3.mp4
a) 00:03, Tab to show the focus on Street Cleaning
b) 00:05, Move the mouse to this same tile: Bug: Note that the highlight is no longer shown.
c) 00:07, Move the mouse to the Trash and Cycling section.
d) 00:08, Tab to this field and the highlight is no longer shown.
Desired Result
User can determine the focus when using either the keyboard or mouse and the focus is consistent.
Actual Result
The focus using either the keyboard or the mouse can result in 2 items with focus and the method of showing the focus is different.
Screengrab/videos (insert file names here) 2020 03 23, Node 21, Keyboard Focus 2020 03 23, Node 21, Keyboard Focus.zip 1.mp4 2020 03 23, Node 21, Keyboard Focus 2.mp4 2020 03 23, Node 21, Keyboard Focus 3.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 4) Keyboard and Focus
Brief Description Keyboard focus is not always visible
Steps to reproduce 1) See the first video: 2020 03 23, Node 21, Keyboard Focus 1.mp4 a) 00:05, Hover the mouse over the first tile in Common Resources. Notice that the link is highlighted in solid blue. b) 00:08 – 00:15 Press the tab key or the shift-tab key to move the focus with the keyboard. Notice that the focus is shown with a blue border instead of a highlighting in solid blue. Also, the first tile is still highlighted in solid blue. 2) See the second video: 2020 03 23, Node 21, Keyboard Focus 2.mp4 a) 00:02, Hover the mouse over the first guide. Notice that the link is highlighted by revealing the image related to the guide. b) 00:03 – 00:10 Press the tab key or the shift-tab key to move the focus with the keyboard.
i) Notice that the focus using the mouse shows a picture, while focus using the keyboard shows a blue border. Also two tiles can show a highlight at the same time. 3) See the third video: 2020 03 23, Node 21, Keyboard Focus 3.mp4 a) 00:03, Tab to show the focus on Street Cleaning b) 00:05, Move the mouse to this same tile: Bug: Note that the highlight is no longer shown. c) 00:07, Move the mouse to the Trash and Cycling section. d) 00:08, Tab to this field and the highlight is no longer shown.
Desired Result User can determine the focus when using either the keyboard or mouse and the focus is consistent.
Actual Result The focus using either the keyboard or the mouse can result in 2 items with focus and the method of showing the focus is different.