1106932 - Make the Hello button available to keyboard users

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P2)

Description

[Marco Zehe (:MarcoZ)]

Currently, the Hello button to start a WebRTC phone call is not accessible via the keyboard. There is only a button in the tool bar, but there is no menu equivalent in the classic menu or a keyboard shortcut, or if there is a keyboard shortcut, it is not discoverable.

Comment 1

[:Gijs (he/him)]

Maire, can this be prioritized? For sec508 and various other reasons we shouldn't really ship major features without keyboard a11y...

Comment 3

[Mike de Boer [:mikedeboer]]

We should
1) Add a menu item to the 'Tools' main menu (this location is my personal suggestion)
2) Add a direct keyboard shortcut to open the Loop panel, just like we have one for the Menu Panel.

There's a bit of discussion necessary about which shortcut to use and what the menu item label should read.

Comment 4

[:Gijs (he/him)]

(In reply to Mike de Boer [:mikedeboer] from comment #3)
> We should
> 1) Add a menu item to the 'Tools' main menu (this location is my personal
> suggestion)
> 2) Add a direct keyboard shortcut to open the Loop panel, just like we have
> one for the Menu Panel.

There isn't a shortcut for the menu panel anymore, that was backed out.

> There's a bit of discussion necessary about which shortcut to use and what
> the menu item label should read.

Comment 5

[Matej Novak [:matej]]

I'll look to Sevaan for UX best practices in this case, but here are some options for what it could say:

Start a conversation

Open Hello

Start Hello

New Hello window

New Hello conversation

New video conversation

Comment 6

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Mike are you suggesting to add just a menu item to open the Hello panel, or actually mirroring some of the functionality in a sub-menu.

I'd prefer the former, but the Hello panel itself is not very keyboard-friendly itself.

Comment 7

[Mike de Boer [:mikedeboer]]

(In reply to Philipp Sackl [:phlsa] from comment #6)
> Mike are you suggesting to add just a menu item to open the Hello panel, or
> actually mirroring some of the functionality in a sub-menu.
> 
> I'd prefer the former, but the Hello panel itself is not very
> keyboard-friendly itself.

I had to think about this for a bit.
I'd prefer to have some functionality mirrored in a submenu too. This would drive the accessibility of Hello forward in a neat way and make the feature more discoverable too.

We could start off with a single menu item in the Tools menu with one of the labels that Matej provided. Then file a follow-up for the submenu where we decide which items should be in there and how they should work.

Outstanding question for the single-menu-item case: what will happen when the Hello button is in the palette/ not available? Will the item be disabled? If so, how will we communicate that the button needs to move to the toolbar or menu-panel to enable it?

Comment 8

[Sevaan Franks [:sevaan]]

I think Command + Y/Windows Key + Y could be used to open the Hello panel.

This could open the panel and move focus to it. Then the user can keyboard down, first through the Conversations/Contacts tab headers, then through the conversations. Hitting enter opens one and moves focus to the conversation window. If they keep keyboarding down they can hit the "Start a Conversation" button which opens a new room and moves focus there. All this plus a tab order.

Thoughts?

Comment 9

[:Gijs (he/him)]

(In reply to Sevaan Franks [:sevaan] from comment #8)
> I think Command + Y/Windows Key + Y could be used to open the Hello panel.
> 
> This could open the panel and move focus to it. Then the user can keyboard
> down, first through the Conversations/Contacts tab headers, then through the
> conversations. Hitting enter opens one and moves focus to the conversation
> window. If they keep keyboarding down they can hit the "Start a
> Conversation" button which opens a new room and moves focus there. All this
> plus a tab order.
> 
> Thoughts?

Windows key shortcuts are normally reserved for the OS. cmd-y is "redo" on OS X.

Comment 10

[Sevaan Franks [:sevaan]]

Shoot, I knew that. I guess we'll have to switch to a Cmd-Shift type of deal.

Comment 11

[Marco Zehe (:MarcoZ)]

Hi Sevaan, since finding a free keyboard shortcut is a rather difficult task, to move this forward, what about adding it as a menu item to a prominent spot near the top of the Tools menu? If we want to and find a keyboard shortcut in the long run, we can always add it.

Comment 12

[Sevaan Franks [:sevaan]]

(In reply to Marco Zehe (:MarcoZ) from comment #11)
> Hi Sevaan, since finding a free keyboard shortcut is a rather difficult
> task, to move this forward, what about adding it as a menu item to a
> prominent spot near the top of the Tools menu? If we want to and find a
> keyboard shortcut in the long run, we can always add it.

Love it. Let's do that.

Comment 13

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Removing my needinfo since Sevaan has already taken care of it :)

Comment 15

[:Gijs (he/him)]

Shell/Mike, what would it take to get this prioritized? Our a11y team is getting flak from users because they still can't use Hello, and just adding a menuitem to open the panel (probably hiding the menuitem if the button is not in the UI) should be relatively easy to do.

Comment 16

[Dan Mosedale (:dmosedale, :dmose)]

What would we want the menuitem to say?  Seems like "Firefox Hello..." would be the most straightforward, but it's not likely to be very meaningful to people who don't already know what it is.  "Join a Room..." seems like it would have a similar problem.  "Make a Call..." feels wrong.

Sevaan, two questions: does the mechanics of Gijs' suggestion in the previous comment work for you?  If we were to do a menu item, what would you suggest calling it?

Comment 17

[Matej Novak [:matej]]

I would go with something like "Open Firefox Hello…" or "Open Hello…"

"Join a room" seems even more confusing and we don't want to use the word "call" in relation to Hello.

Comment 18

[Sevaan Franks [:sevaan]]

(In reply to Dan Mosedale (:dmose) - needinfo? me for response from comment #16)
> Sevaan, two questions: does the mechanics of Gijs' suggestion in the
> previous comment work for you?  If we were to do a menu item, what would you
> suggest calling it?

Yes. But is opening the panel enough? A user needs to be able to actual open a conversation or start a new one. https://bugzilla.mozilla.org/show_bug.cgi?id=1106932#c8 has an approach that could handle that.

I like "Open Firefox Hello"

Comment 19

[:Gijs (he/him)]

(In reply to Sevaan Franks [:sevaan] from comment #18)
> (In reply to Dan Mosedale (:dmose) - needinfo? me for response from comment
> #16)
> > Sevaan, two questions: does the mechanics of Gijs' suggestion in the
> > previous comment work for you?  If we were to do a menu item, what would you
> > suggest calling it?
> 
> Yes. But is opening the panel enough? A user needs to be able to actual open
> a conversation or start a new one.
> https://bugzilla.mozilla.org/show_bug.cgi?id=1106932#c8 has an approach that
> could handle that.

For sure. I'm told this should already work (more or less), but it could be there is more work to do there. Opening the panel is kind of a baseline requirement though.
 
> I like "Open Firefox Hello"

Ditto. In terms of "it's not very meaningful to people who don't know what it is", I would say that the smilie-face-chat-bubble icon is not really much more meaningful (even if pictures are 1000 words rather than 3). ;-)

Comment 20

[Dan Mosedale (:dmosedale, :dmose)]

(In reply to :Gijs Kruitbosch from comment #19)
> >  
> > I like "Open Firefox Hello"
> 
> Ditto. In terms of "it's not very meaningful to people who don't know what
> it is", I would say that the smilie-face-chat-bubble icon is not really much
> more meaningful (even if pictures are 1000 words rather than 3). ;-)

Right now, the tooltip for the button says "Start a conversation".  Would that work as a menu item, if followed by an ellipsis?  It would both have more clarity, and keep the two pieces of UI speaking the same language...

Comment 21

[Matej Novak [:matej]]

(In reply to Dan Mosedale (:dmose) - needinfo? me for response from comment #20)
> (In reply to :Gijs Kruitbosch from comment #19)
> > >  
> > > I like "Open Firefox Hello"
> > 
> > Ditto. In terms of "it's not very meaningful to people who don't know what
> > it is", I would say that the smilie-face-chat-bubble icon is not really much
> > more meaningful (even if pictures are 1000 words rather than 3). ;-)
> 
> Right now, the tooltip for the button says "Start a conversation".  Would
> that work as a menu item, if followed by an ellipsis?  It would both have
> more clarity, and keep the two pieces of UI speaking the same language...

Yup, that would work, provided it isn't too long.

Comment 22

[Mark Banner (:standard8)]

Updating user story to reflect what's been decided and save searching through. I'm bumping the priority a bit, as I think its reasonable to have this in the next section of work that we do.

Comment 23

[:Gijs (he/him)]

Attachment: MozReview Request: Bug 1106932 - allow opening the loop panel from the menu, focus the panel immediately, r?mikedeboer

Bug 1106932 - allow opening the loop panel from the menu, focus the panel immediately, r?mikedeboer

Comment 24

[:Gijs (he/him)]

This has a remaining issue that focus doesn't go into the panel the first time you open it, which seems to have to do with stuff not being ready yet or whatever. I spent half an hour trying to get that to work and gave up. Someone who knows loop needs to have a look at that.

Once this has landed, obviously work needs to start on actually making the rest of the thing keyboard-accessible. It used to be OK, from what I recall, but now once you start a conversation almost one of the buttons are keyboard-focusable. The conversation list buttons in the main panel which only appear when you hover over the item are also obvious candidates for improvement (making the list focusable and keyboard-navigable and showing the button on focused items in the list would be the sensible solution there).

Comment 25

[Marco Zehe (:MarcoZ)]

This is currently held up by bug 1210548, a hang when trying to focus the panel with F6 after it opens initially and doesn't get focus automatically. That happens even without this patch in a regular Nightly build.

Comment 26

[Mike de Boer [:mikedeboer]]

Comment on attachment 8668604 [details]
MozReview Request: Bug 1106932 - allow opening the loop panel from the menu, focus the panel immediately, r?mikedeboer

https://reviewboard.mozilla.org/r/21009/#review18969

Looks neat! Thanks.

::: browser/base/content/browser-loop.js:148
(Diff revision 1)
>              iframe.contentWindow.addEventListener("loopPanelInitialized", function loopPanelInitialized() {

Ah, yeah, this indenting business has been an eyesore for a while now - thanks for fixing!

Comment 27

[:Gijs (he/him)]

(In reply to Mike de Boer [:mikedeboer] from comment #26)
> Comment on attachment 8668604 [details]
> MozReview Request: Bug 1106932 - allow opening the loop panel from the menu,
> focus the panel immediately, r?mikedeboer
> 
> https://reviewboard.mozilla.org/r/21009/#review18969
> 
> Looks neat! Thanks.
> 
> ::: browser/base/content/browser-loop.js:148
> (Diff revision 1)
> >              iframe.contentWindow.addEventListener("loopPanelInitialized", function loopPanelInitialized() {
> 
> Ah, yeah, this indenting business has been an eyesore for a while now -
> thanks for fixing!

Landed but with a different accesskey (t) because I realized "s" conflicted with "Sync now".


remote:   https://treeherder.mozilla.org/#/jobs?repo=fx-team&revision=58acf8a0176e

Comment 28

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/58acf8a0176e

Comment 29

[Marco Zehe (:MarcoZ)]

Comment on attachment 8668604 [details]
MozReview Request: Bug 1106932 - allow opening the loop panel from the menu, focus the panel immediately, r?mikedeboer

Clearing feedback request since I gave the feedback verbally, and this has landed by now.