Dropdowns display focus border after opening

[gbdesign2023]

Description

The representation of the active language in the drop-down menu is confusing, as the first language is outlined and displayed in bright white. The active language, on the other hand, is displayed in an inconspicuous color. I have also noticed that the first element in a drop-down menu is always displayed with a blue border.

Expected behavior
A neutral representation without preselection would be more logical, as is the case with Kirby 3.

Screenshots

Kirby 4: Active language (EN) in the drop-down menu

Kirby 4: drop-down menu

Kirby 3: drop-down menu

Your setup

Kirby 4 RC1 starterkit

Your system

• MacBook
• macOS 14.1
• Browser: Chrome 118

[lukasbestle]

I guess this is because the dropdown pulls the keyboard focus when it is opened. When the dropdown was opened with the keyboard this makes sense, but maybe we could avoid that behavior for mouse navigation.

[distantnative]

I honestly think it's a bigger accessibility advantage of v4 over v3 that it more consistently shows the current focus.

[bastianallgeier]

I agree with Nico. I see this as a huge improvement.

[nilshoerrmann]

I think the problematic point is not the focus ring which is a great improvement but that the active state is unclear in comparison: the focus ring is way bolder than the active state. This issue should not be closed in my eyes because this is a real usability issue when editing a site with two languages.

[distantnative]

But isn't the way stronger indicator for the current language that the whole button says it?

[gbdesign2023]

I think the problematic point is not the focus ring which is a great improvement but that the active state is unclear in comparison: the focus ring is way bolder than the active state. This issue should not be closed in my eyes because this is a real usability issue when editing a site with two languages.

That was exactly my intention in reporting this anomaly here. Since I don't use keyboard navigation, the visual highlighting was confusing for me at that moment. I could not associate the framing with keyboard navigation. Accessibility is a useful function for all those who see added value in it. However, an advantage is not generally an advantage for everyone. As a compromise, the option to enable/disable this feature in Config.php would be desirable.

[nilshoerrmann]

But isn't the way stronger indicator for the current language that the whole button says it?

@distantnative, looking at this screenshot I cannot tell which language is currently selected:

Visually, I'd say the active language is German which is also currently focussed. From using Kirby I know it's English but that's not what I see.

[gbdesign2023]

If accessibility is an important argument, wouldn't the use of colors be an additional argument? There are many people who cannot perceive colors properly. The bright blue has no signal effect here, but the frame does.

I created a custom-panel.css for the panel:

And I designed the language selection in the frontend like this:

[afbora]

I agree with author and Nils. Especially language dropdown focus behavior very confusing.

[nilshoerrmann]

I think a selection indicator that's not color based might help here because the color makes the active item step back visually. Example how Linear and other do this with a checkmark:

https://linear.app/blog/invisible-details

[nilshoerrmann]

Similar example from Height for reference: https://height.app/blog/guide-to-build-context-menus#delay

[gbdesign2023]

You can even find a comparable example here on Github. In the keyboard navigation, only the background color changes, without additional framing.