1780585 - Enhanced focused states on PiP controls

Status: RESOLVED FIXED

(Toolkit :: Picture-in-Picture, enhancement, P2)

Description

[Ania]

Attachment: enhanced focused state.png

User story

As a user who relies on a keyboard/magnifier/screen reader or some combination of these, I would like the PiP buttons to give me maximum context for how I can use them.

Acceptance Criteria

1. Firefox Design System focused state outline is displayed when a button is brought into focus (e.g. via a Tab key).

2. Hover states that include button label and keyboard shortcut (as per this ticket or the spec) are also displayed in the focus state.

3. Accessible labels and aria-labels are available for each PiP control.

Comment 1

[Ania]

Attachment: Screen Shot 2022-07-20 at 11.37.20 AM.png

Comment 2

[Ania]

Asa, James, I wanted to confirm if we should announce the keyboard shortcuts, not just the labels, on focused states too?

Comment 3

[James Teh [:Jamie]]

(In reply to Ania from comment #2)

Asa, James, I wanted to confirm if we should announce the keyboard shortcuts, not just the labels, on focused states too?

Note that I'm blind, so I can't see the design spec.

I assume the keyboard shortcuts aren't displayed except when the control is hovered or focused?
Are they displayed as a tooltip or does the control expand somehow?

Rather than including the keyboard shortcut in the aria-label, I think it's probably best that we put the keyboard shortcut in aria-keyshortcuts instead. This allows the keyboard shortcuts to be semantically separated from the label. The answers to the above questions might impact my thinking here, though.

The problem is that right now, Gecko doesn't support aria-keyshortcuts very well; see bug 1467382. That's something the a11y team will need to fix. I don't think this work needs to be blocked on that, but users won't be able to benefit from the PiP fix until the a11y engine bug is fixed.

Comment 4

[Janvi Bajoria [:janvi01]]

Attachment: Bug 1780585 - Enhanced focused states on PiP controls r=kpatenio,niklas

Comment 5

[kpatenio]

(In reply to James Teh [:Jamie] from comment #3)

(In reply to Ania from comment #2)

Asa, James, I wanted to confirm if we should announce the keyboard shortcuts, not just the labels, on focused states too?

Note that I'm blind, so I can't see the design spec.

I assume the keyboard shortcuts aren't displayed except when the control is hovered or focused?
Are they displayed as a tooltip or does the control expand somehow?

Rather than including the keyboard shortcut in the aria-label, I think it's probably best that we put the keyboard shortcut in aria-keyshortcuts instead. This allows the keyboard shortcuts to be semantically separated from the label. The answers to the above questions might impact my thinking here, though.

The problem is that right now, Gecko doesn't support aria-keyshortcuts very well; see bug 1467382. That's something the a11y team will need to fix. I don't think this work needs to be blocked on that, but users won't be able to benefit from the PiP fix until the a11y engine bug is fixed.

Hi James,

Ania is on PTO right now, but I'm helping mentor this ticket that a contributor from the Outreachy program is working on. To answer your questions: based on how the Picture in Picture window works right now, the keyboard shortcut for a button is displayed through a tooltip when hovered on, but not when focused. Currently, we are using the title attribute to display the shortcuts on hover (hence why it does not appear on focus).

Despite not being well supported by Gecko yet, are you still suggesting that we use aria-keyshortcuts? Or do you recommend that we leave the aria-labels as they are until a fix is provided? I just want to make sure I'm understanding your comment correctly.

Comment 6

[Ania]

Hi James,
My apologies for the late reply here.

I assume the keyboard shortcuts aren't displayed except when the control is hovered or focused?

Yes, the shortcuts are displayed in the tooltip visible on hover in Nightly and we have planned to display them in the same way on focus.

The tooltip string format for most buttons is "Action (platform-specific shortcut)", e.g. "Close (⌘W)" on macOS. One outlier-ish case is a full-screen button, its tooltip string is "Fullscreen (double-click)", so the shortcut is descriptive rather than a key combination.

Based on this, do you think it's ok to put the descriptive part of the of the tooltip text into the aria-label, and wait for the aria-keyshortcuts to become available to put the keyboard shortcut part there?

Comment 7

[Ania]

Hi Janvi!
Picture-in-Picture team is now returning to working on full PiP controls, and we hoped to work on this specific ticket in the next couple of weeks.
I wanted to check in with you if you are interested in continuing work on this within this time frame?
Alternatively, we can take over this work, and you can be a non-blocking reviewer to see how the work you started evolves and makes it into release.

Please let me and Katherine know what would be your preference!
Thank you!
Ania

Comment 8

[Janvi Bajoria [:janvi01]]

Hi Ania,
Thanks, I am glad you are taking my consent. I am quite interested in working on this patch within this time frame. Also, I would like to take more PIP bugs as per my time availability in the coming time.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/034c05a9599c
Enhanced focused states on PiP controls r=kpatenio,niklas,flod

Comment 10

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/034c05a9599c