Align focus style on dropdowns

Board switcher on Issue Boards still has outline instead of just colored background

/cc @winh

@cperessini am I assuming right that we should have no outline on dropdown items?

The screenshot from the description 404s for some reason (I think we should investigate why), so here is a new one:

I'm labelling as regression because it may have been caused by the dropdown redesign in 10.0.

I reproduced on gitlab.com (10.0.1-ee, 9c3a3ca6) and current master (93044dec).

added Discussion issue boards regression reproduced on GitLab.com labels

changed milestone to %10.0

changed the description

image had gitlab-ce in the path (where i had drafted it). Fixed url

I'm not seeing this on hover, but I can recreate it by focusing on the element with TAB. For buttons and links we don't override the outline on focus.

The contrast of #eee against #fff is only 1.16. We don't have clear guidance on accessibility but I think the browser outline can be of help here. What do you think @sarrahvesselov?

Edit: To make it clear, I'm talking about focus state. I don't think we should have the outline on focus.

Edit: To make it clear, I'm talking about focus state. I don't think we should have the outline on focus.

I'm sorry @cperessini, this actually made me more confused

So, you are saying that we do not want the outline on 'Focus' but that you think it may be helpful to have the outline when users 'Hover', am I right?

Currently, I cannot replicate this on 'Hover', only by using tab to 'Focus' on the dropdown item. I tried using both Safari and Chrome on Mac. Can you confirm this is the case @psimyn? If so, we should change the description.

I meant to say 'I don't think we should have the outline on hover'. Sorry for the confusion @sarrahvesselov!

I believe some users with accessibility needs use the TAB key to cycle through the elements in a page because they rely on the browser outline to tell them which element is being selected. I thought I read that somewhere, but I'm not sure if that is actually the case. It may just be a false notion that's formed in my head.

No worries @cperessini!

I believe some users with accessibility needs use the TAB key to cycle through the elements in a page because they rely on the browser outline to tell them which element is being selected.

You are absolutely correct, here is a link to accessibility documentation: https://webaim.org/techniques/keyboard/

Sounds like as long as we cannot replicate the outline on 'Hover' then we do not have an issue and can close this one.

Most other dropdowns don't have the outline on focus. We are still a bit inconsistent though, e.g.

I think there is supposed to be a distinction between Select and Dropdown items. Select items can not be tabbed to (you use up/down arrows). Dropdown items are links/buttons and can be tabbed to (but only have tabindex when dropdown is open)

added UX label

Most other dropdowns don't have the outline on focus.

If this is the case, should this issue then be "Align focus style of dropdowns"? We should be consistent in our styling.

added UX debt and removed regression labels

Is there a way to have just one highlighted row which:

• Doesn't have a browser outline if you use the Up and Down arrow keys
• Has a browser outline if you use the TAB key
• Can seamlessly switch from one behavior to the other depending on which key you press next?

changed title from hover style on issue board switcher dropdown to Align focus style on dropdowns