Change styles for focused Select

[JuliaKirschenheuter]

☑️ Resolves

• Fix [BITV]: Contrast of focused select is not enough  nextcloud/server#41217

🖼️ Screenshots

🏚️ Before

🏡 After

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[raimund-schluessler]

This introduces a (thin) line between the input and the options, which was not there before:

And for the NcSelectTags component, the border/outline seems to be offset on the right:

[marcoambrosini]

Nice, a couple more things:

There seems to be a border misalignment in one of your screenshots:

Can we remove all box shadows from the select options container?

Thanks :)

[JuliaKirschenheuter]

And for the NcSelectTags component, the border/outline seems to be offset on the right:

Dear @raimund-schluessler

unfortunately i can't reproduce it:

could you please try again?

@marcoambrosini could you please help me a bit to find box-shadow styles?

[raimund-schluessler]

And for the NcSelectTags component, the border/outline seems to be offset on the right:

Dear @raimund-schluessler

unfortunately i can't reproduce it

could you please try again?

It seems to be fixed. I don't see it anymore either. However, the border at the bottom is still blue when the select is opened to the top. See this screenshot from the docs:

[JuliaKirschenheuter]

@raimund-schluessler styles of my local styleguide instance are broken ;( I guess i've fixed an issue, could you please re-review? Thanks a lot!

[raimund-schluessler]

@raimund-schluessler styles of my local styleguide instance are broken ;( I guess i've fixed an issue, could you please re-review? Thanks a lot!

The border is fixed now. 👍

[raimund-schluessler]

@JuliaKirschenheuter Sorry, I just saw there is another box-shadow when the dropdown opens to the top. This line would also need to go:

nextcloud-vue/src/components/NcSelect/NcSelect.vue

Line 1173 in bf0f43f

box-shadow: 0px -1px 1px 0px var(--color-box-shadow) !important;

And could you please rebase your branch so that it includes all latest changes from master? I think there were some recent adjustments of NcSelect and it would be good to test them with your changes before merging.

[raimund-schluessler]

This outline adds a not so nice gap between the select toggle and the dropdown-menu. But I am not sure we can fix this.

More obvious with adjusted outline color

@susnux Any idea here?

[JuliaKirschenheuter]

well, without this outline it looks odd too like from your video:

After.mp4

I think it is better to keep outline. And all other improvements we can do after a11y certification

[raimund-schluessler]

well, without this outline it looks odd too like from your video:

That's unfortunately true. One could fix it with an additional container around the dropdown and some CSS including a margin-top: -2px;, but that would require adjusting @nextcloud/vue-select which is out out scope here.

[susnux]

I think the vertical position of the drop down needs to be changed. But not sure this is possible without changing the vue-select

[raimund-schluessler]

I think the vertical position of the drop down needs to be changed. But not sure this is possible without changing the vue-select

I tested this (manually). It won't help, since both elements, the trigger and the dropdown, have an outline.

[JuliaKirschenheuter]

=(
could we merge this pr and improve left things in next future?

[JuliaKirschenheuter]

ok, i will merge it now, got enough approves