Change #1049221 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):

[wikidata/query-builder@master] Replace WiKit's Dropdown component by Codex's Select

https://gerrit.wikimedia.org/r/1049221

@Sarai-WMDE you can check the replacement meets the UX expectations here: https://1049221--clicky-sparqly.netlify.app/

There is an issue with the accessibility tests failing because the aria-expanded attribute is not rendered in the DOM when the value is false. I have found this issue: https://github.com/vuejs/vue/issues/11053 and I have tried the suggested solutions of setting the aria-expanded initial value to null but the value is coming from the <CdxMenu> embedded in the <CdxSelect>.

The examples in the CdxSelect docs render aria-expanded='false' so this might be a side effect of us using the vueCompat version and not vue3. Also the examples in the docs are using the latest version of codex (at the time of writing this it is 1.8.0) and the patch is using version 1.0.1, but Sarai and I have looked at the changelog and the code and nothing related to aria-expanded has been changed recently. So I have the hope that the version change will magically fix the issue ✨

This task will require design validation. Please ping Charlie Kritschmar whenever the ticket is ready to be reviewed. Thank you!

Change #1049221 merged by jenkins-bot:

[wikidata/query-builder@master] Replace WiKit's Dropdown component by Codex's Select

https://gerrit.wikimedia.org/r/1049221

The component is looking and behaving correctly on Safari v17.3, Firefox v128 and Chrome v126. Internationalization and accessibility checks done ✅

There's only a layout problem: the missing label makes the Select to be misaligned with the rest of the query condition fields.

I wonder if we should either:

• Apply a local fix (e.g. an upper margin), or
• Add a label to the value type select: Labels are in general recommended for accessibility reasons.
It's going to be hard to find a label that is not distracting or confusing, given that this element acts as a connector.

Let's wait to hear @Charlie_WMDE's opinion once she's able to help. Thank you!

Hey all, sorry for the late reply.

I would opt for an upper margin here as I agree with Sarai's reasoning that a label would likely be confusing for this type of element. I'm having a hard time figuring out how many pixels of hehight difference we need to correct for. It looks to me like 4px but please double check yourself to make sure the elements align horizontally. Thank you!