1799215 - Cancel, Copy, and Download buttons in the Screenshots overlay are not focusable (component)

Status: VERIFIED FIXED

(Firefox :: Screenshots, defect, P2)

Description

[Tim Giles [:tgiles]]

We don't currently have a way to take a screenshot by keyboard only, so there would be no way to reach these buttons currently anyway without using the mouse...but we should treat these buttons like the Save visible/Save full page buttons and thus they should be focusable.

STR:

• Set screenshots.browser.component.enabled to true
• Navigate to https://bugzilla.mozilla.org/home (or any webpage)
• Use keyboard shortcut (Ctrl + Shift + S on Windows, not sure on Mac or Linux) to take a screenshot
• Use mouse to take a screenshot of some element on the page
• Attempt to Tab navigate (or use F6 to navigate around) to the Cancel, Copy, and Download buttons

Expected:

• I'm able to reach these buttons via keyboard

Actual:

• I am unable to reach these buttons via keyboard

Comment 1

[:Gijs (he/him)]

This WFM on macOS, fwiw.

Comment 2

[Tim Giles [:tgiles]]

Hmm, this issue doesn't appear on macOS for me either. I'm able to reproduce this issue on Windows and Ubuntu though.

Comment 3

[Sam Foster [:sfoster] (he/him)]

These controls are keyboard-accessible when using the extension. If you keep hitting TAB, you do eventually focus the the "Download" button, but there is almost no visible focus state so its hard to see. So this would represent a regression if we flip the pref to ship the component implementation.

Comment 4

[Sam Foster [:sfoster] (he/him)]

As it stands, I'm not able to reach the overlay content at all from the keyboard. For context, when you activate Screenshots it does 2 things: It shows a popup toolbar on the top/right with "Save visible page" and "Save full page" buttons. And an overlay is placed over the current document with controls and interactions to select a particular element or arbitrary rectangle on the page to capture. Once that region is identified, we show a toolbar on the overlay with copy/download/cancel buttons. This overlay toolbar - and all the controls in the overlay - seem to be completely inaccessible currently when using the screenshots.browser.component.enabled = true implementation.

The overlay is implemented using an anonymous content document, using the same technique as devtools' highlighters.

Comment 5

[Niklas Baumgardner [:niklas]]

Attachment: Bug 1799215 - Screenshots overlay buttons should have focus states. r=sfoster,cmkm

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9856fa27ddb1
Screenshots overlay buttons should have focus states. r=cmkm

Comment 7

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/9856fa27ddb1

Comment 8

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-01-25 Nightly build on Windows 10.
Verified as fixed on Firefox 111.0b4(build ID: 20230221190142) and Nightly 112.0a1(build ID: 20230222214030) on Windows 10, Ubuntu 22, macOS 12.