1548917 - [Accessibility] Focus state refinements

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P1)

Description

[Wolasi :wolasi]

Attachment: Clipped focus state outline around image

Let's fix the following

• Clipping of the focus state blue outline around images, see cards and Top Sites tiles
• Focus state and hover state should be applied to the same element to prevent awkward transition when clicking on an item.

Spec
https://www.figma.com/file/0xZkmT86rSXbGRB4eIvrn0ts/New-Tab-Spec-for-Fx-v68?node-id=383%3A1

Comment 1

[Gavin Suntop [:gvn] (they/them)]

Attachment: Screen Shot 2019-05-09 at 4.17.28 PM.png

Comment 2

[Wolasi :wolasi]

This isn't looking as expected, so let's just nix the inner dark blue outline. See updated spec for reference https://www.figma.com/file/0xZkmT86rSXbGRB4eIvrn0ts/New-Tab-Spec-for-Fx-v68?node-id=383%3A1

Comment 3

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5020

Comment 4

[Gavin Suntop [:gvn] (they/them)]

Attachment: Screen Shot 2019-05-10 at 1.59.25 PM.png

Comment 5

[Ed Lee :Mardak]

Attachment: focus, focus+hover, hover

Is there an expected behavior for focus and hover at the same time? (Or maybe it just doesn't really matter.)

Comment 6

[Wolasi :wolasi]

:gvn update outline looks good

:Mardak The issue is that the focus and hover effects are being applied to different elements hence the middle scenario in your mock up. :gvn this is the final issue for this bug.

Comment 7

[Ed Lee :Mardak]

Do you also want a screenshot of the focus for dark theme?

Comment 8

[Gavin Suntop [:gvn] (they/them)]

Dark theme uses the same styling, but I can put up a screenshot if wanted.

I'll move this into code review now...

Comment 9

[Wolasi :wolasi]

Dark theme shouldn't use the same color, check the spec. It should be rgba(69, 161, 255, 0.4)
Also what about the overlapping of the active and hover states, that still hasn't been addressed.

Comment 10

[Gavin Suntop [:gvn] (they/them)]

Ok, unmoving into code review.

Comment 11

[Gavin Suntop [:gvn] (they/them)]

So...what do you want for the overlapping of the active and hover states? Just the hover style...or something different?

Comment 12

[Gavin Suntop [:gvn] (they/them)]

^

Comment 13

[Wolasi :wolasi]

If the hover and focus effect are applied to the same element there won't be an overlap

Comment 14

[Gavin Suntop [:gvn] (they/them)]

I understand. Do you want the hover state to override the focus state when you hover on a focused item?

Comment 15

[Ed Lee :Mardak]

Something I noticed testing on latest nightly is the standard link focusing behavior after you click it. E.g., cmd-click to open a link in a new tab and switching back to about:newtab shows the focus ring or alternatively if you click and drag a link (and drop anywhere in the page to not actually navigate). This is just changing the styling of focus, so I'm guessing the persisted blue ring after a mouse interaction is expected ?

Comment 16

[Wolasi :wolasi]

Do you have screenshots for these scenarios?

Comment 17

[Gavin Suntop [:gvn] (they/them)]

Yeah, Ed put some up above: https://bugzilla.mozilla.org/show_bug.cgi?id=1548917#c5

I can change to whatever behavior/appearance is desired for hovered, focused, and hovered over focused. Just need to know what that is specifically. Thanks!

Comment 18

[Gavin Suntop [:gvn] (they/them)]

Attachment: 1. hover 2. focus (light theme)

(note: now hover on focus looks just like regular hover)

Comment 19

[Gavin Suntop [:gvn] (they/them)]

Attachment: 1. hover 2. focus (dark theme)

(note: now hover on focus looks just like regular hover)

Comment 20

[Wolasi :wolasi]

Hover on focus looks good to me.

Comment 21

[Gavin Suntop [:gvn] (they/them)]

Ok cool will move back into code review!

Comment 22

[Wolasi :wolasi]

Comment on attachment 9064900 [details]
1. hover 2. focus (light theme)

💪

Comment 23

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/f78634b8bff9

Comment 24

[Wolasi :wolasi]

Attachment: Wrong focus state color for Top Site tile in dark mode

Focus state color for Top Site tile is not to spec for Dark Theme. Should be rgba(69, 161, 255, 0.4) like for the cards.

Comment 25

[Ciprian Muresan [:cmuresan], Ecosystem QA]

@gvn, did we end up removing the inner dark blue outline? I'm still seeing it on all platforms when focusing cards. I don't see it when I focus Top Sites.

Comment 26

[Gavin Suntop [:gvn] (they/them)]

@wolasi, we'll need to open a new BZ ticket for further tweaks since code was landed for this ticket already. Thx!

Comment 27

[Ciprian Muresan [:cmuresan], Ecosystem QA]

Resetting the ni? for comment 25.

Comment 28

[Gavin Suntop [:gvn] (they/them)]

@Ciprian – Should match current design spec: https://www.figma.com/file/0xZkmT86rSXbGRB4eIvrn0ts/New-Tab-Spec-for-Fx-v68?node-id=383%3A1

Comment 29

[Wolasi :wolasi]

Here's the new ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1552932

Comment 30

[Ciprian Muresan [:cmuresan], Ecosystem QA]

I have verified that the focus state's appearance is like the ones in the design dock on Nightly 68.0a1 (Build ID 20190519213707) and the latest Nightly 69.0a1 (Build ID 20190522152821) on Windows 10, macOS 10.14, and Arch Linux 4.14.3.