1211434 - Make all interactive UI elements (buttons, fields, etc.) in the Hello panel and chat windows tabbable and ensure keyboard focus is visible

Status: RESOLVED INCOMPLETE

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

Description

[:Gijs (he/him)]

I don't know react and so I don't know what to recommend for that in particular (and/or if this is so much work this bug should be a metabug).

In HTML, though, the principles are pretty simple:
1) use semantically correct elements. If it's a button, <button> or <input type="button>, if it's a link, <a href="http..."> -- especially not the other way around, or using <label class="text-link"> or whatnot (which works in XUL under certain conditions, but not in HTML).
2) if you absolutely cannot do this, assign the correct role="whatever" attribute, and set the tabindex attribute to a correct value to ensure the item can be focused with the keyboard
3) add :focus styling, and ensure items are not invisible "unless hovered over" like the current buttons in the conversation list.

I'm happy to answer questions or help with specific issues, but I don't have time to drive the implementation myself here. Mark, can you ensure this gets picked up / prioritized?

Comment 1

[Mark Banner (:standard8)]

We're currently going to be removing a lot of the existing UI, so I think it makes sense to look at this in detail after that, for which a P3 is about reasonable. However, I can make sure we get your points spread around the team.

One comment though:

(In reply to :Gijs Kruitbosch from comment #0)
> 3) add :focus styling, and ensure items are not invisible "unless hovered
> over" like the current buttons in the conversation list.

The UX is currently calling for this effect. Even with the revised UX we're going to have one case of showing an edit menu on hover, and I can't see how it would be sensible to work around in an accessible way if this is the rule - you'd end up with icons all the way down the list, which IMO would just look strange.

If there's a way to maintain this in an accessible style, that'd be good, if not we can bring it up with UX.

Comment 2

[:Gijs (he/him)]

(In reply to Mark Banner (:standard8) from comment #1)
> (In reply to :Gijs Kruitbosch from comment #0)
> > 3) add :focus styling, and ensure items are not invisible "unless hovered
> > over" like the current buttons in the conversation list.
> 
> The UX is currently calling for this effect. Even with the revised UX we're
> going to have one case of showing an edit menu on hover, and I can't see how
> it would be sensible to work around in an accessible way if this is the rule
> - you'd end up with icons all the way down the list, which IMO would just
> look strange.

Well, you need to be able to select different items in the list anyway, right, in order to reopen those conversations? So when the focus is on the list then the selected item in the list should probably have the buttons be visible & tabbable.

Another alternative would be to have a context menu, but that is less discoverable.

Comment 3

[Mark Banner (:standard8)]

Support for Hello/Loop has been discontinued.

https://support.mozilla.org/kb/hello-status

Hence closing the old bugs. Thank you for your support.