1682420 - No focus ring when clicking on meatball menu and then navigating with keyboard

Status: VERIFIED FIXED

(Firefox :: about:logins, defect, P2)

Description

[Tim Giles [:tgiles]]

When clicking on the meatball menu in about:logins there is no focus ring indicator on the menu itself. After clicking on the menu, a user is able to use the keyboard to navigate the menu but there is no focus ring around the active element in the menu.

STR:

1. Navigate to about:logins
2. Click on the meatball menu
3. Observe there is no focus indicator around the menu
4. Use the down arrow key and then hit the Enter key
5. Notice that a dialog appears (for me on Windows, it's the Import from another browser dialog, but will vary on other OS if I recall correctly)

Expected result:
1. Focus ring appears around menu button on click edit: menu always closes on click, therefore this is incorrect
2. Focus ring appears around the active menu item when navigating with keyboard

Comment 1

[Tim Giles [:tgiles]]

Attachment: Bug 1682420 - Fix focus ring on meatball menu in about:logins when using mixed forms of input. r=sfoster

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/db194a5f51ef
Fix focus ring on meatball menu in about:logins when using mixed forms of input. r=sfoster

Comment 3

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

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

Comment 4

[Cosmin Muntean [:cmuntean], Ecosystem QA]

I have verified this issue on the latest Nightly 86.0a1 (Build ID 20210119091250) on Windows 10 x64, macOS 10.15.6 and Linux Mint 20.

• After clicking on the menu, the focus is visible around the active element in the menu while using the "Down" or "UP" keys.

However, while verifying this I have noticed that on macOS the menu button has a focus indicator around it after it was clicked. But it seems that the focus is not visible on Windows 10 x64 and Linux Mint 20 x64.
Also, if the menu is opened and then the menu button is clicked, the menu is closing on Windows and Linux. However, the menu remains displayed on macOS.

From what I understand from comment 0, there should be a focus around the menu button after it's clicked, and the menu should not be closed if the button is clicked again. So it seems that on macOS we have the correct behavior.
Tim, can you please confirm if I understood correctly? If yes, I will log a new issue for Windows and Linux.

Meanwhile, I will mark this bug as verified - fixed since now the focus ring appears around the active menu item when navigating with the keyboard and will log a new one for the described behaviors if it's the case.

Comment 5

[Tim Giles [:tgiles]]

(In reply to Cosmin Muntean [:cmuntean], Ecosystem QA from comment #4)

However, while verifying this I have noticed that on macOS the menu button has a focus indicator around it after it was clicked. But it seems that the focus is not visible on Windows 10 x64 and Linux Mint 20 x64.

Personally, I would expect a focus indicator around the button when it is clicked, but that doesn't appear to be the case for buttons in about:preferences so I'm not sure how we want to handle this.

Also, if the menu is opened and then the menu button is clicked, the menu is closing on Windows and Linux. However, the menu remains displayed on macOS.
From what I understand from comment 0, there should be a focus around the menu button after it's clicked, and the menu should not be closed if the button is clicked again. So it seems that on macOS we have the correct behavior.

I think I worded the behavior incorrectly in comment 0, the menu should close if the user clicks on the menu button when the menu is open. The macOS behavior you observed is incorrect...so we will need a bug for why the menu refuses to close for macOS. Clicking off elsewhere on the screen will cause the menu to close fortunately, so there is a workaround...but clicking the menu button when the menu is open should hide it.

Let me know if you need any other info from me about this bug

Comment 6

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Personally, I would expect a focus indicator around the button when it is clicked, but that doesn't appear to be the case for buttons in about:preferences so I'm not sure how we want to handle this.

I did some investigations and I have noticed that if you are on "about:logins" page and click on the Awesome bar, then click directly the menu button, the focus is displayed around the button. The button is also focused, if the browser is not in focus and you click directly on the menu button.
However, probably we can involve someone from the UX team and see if they have an opinion on this.

Let me know if you need any other info from me about this bug

Thanks for providing more information, I think I have everything I need. I have already logged this issue for macOS in Bug 1687913.