[WtC-M3] [QB] Replace WiKit ToggleButton component by Codex's
Open, Needs TriagePublic
Actions

Assigned To

Authored By

	• Sarai-WMDE
	Apr 9 2024, 4:18 PM

Description

Problem

The Query Builder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as Button. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the official Wikimedia design system. The utilization of WiKit components is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.

Solution

We have to replace the WiKit ToggleButton by the Codex equivalent: the single value version of the CdxToggleButtonGroup (See demo). This will take us a step closer to switching to the new design system and deprecating the old.

Acceptance criteria

All WiKit ToggleButton elements used in Query Builder are replaced by their Codex equivalent

Details

	Subject	Repo	Branch	Lines /-
	Replace WiKit ToggleButton component by Codex's	wikidata/query-builder	master	70 -83

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T327532 [EPIC] [WtC] Migrate WiKit-built products to Codex
Open	None	T327680 [WtC] [EPIC] Migrate Query Builder to Codex
Open	None	T359842 [WtC-M3] [QB] [EPIC] Replace WiKit components by available Codex components
Open	HasanAkgun_WMDE	T362183 [WtC-M3] [QB] Replace WiKit ToggleButton component by Codex's

Event Timeline

• Sarai-WMDE created this task.Apr 9 2024, 4:18 PM

• Sarai-WMDE mentioned this in T359842: [WtC-M3] [QB] [EPIC] Replace WiKit components by available Codex components.

Arian_Bozorg moved this task from Incoming to UX Backlog on the Wikidata Dev Team board.Apr 23 2024, 1:11 PM

Arian_Bozorg renamed this task from [SW] [WtC-M3] [QB] Replace WiKit ToggleButton component by Codex's to [WtC-M3] [QB] Replace WiKit ToggleButton component by Codex's.Jun 5 2024, 11:18 AM

Arian_Bozorg moved this task from UX Backlog to Unified QT Backlog on the Wikidata Dev Team board.Jun 5 2024, 11:44 AM

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

Arian_Bozorg moved this task from Unified QT Backlog to Quality Tools "Sprint" on the Wikidata Dev Team board.Aug 6 2024, 8:10 AM

Arian_Bozorg edited projects, added Wikidata Dev Team (Quality Tools "Sprint"); removed Wikidata Dev Team.

HasanAkgun_WMDE claimed this task.Oct 1 2024, 10:44 AM

HasanAkgun_WMDE moved this task from Backlog to Doing on the Wikidata Dev Team (Quality Tools "Sprint") board.

HasanAkgun_WMDE moved this task from Doing to Peer Review on the Wikidata Dev Team (Quality Tools "Sprint") board.Oct 1 2024, 1:52 PM

Change #1077026 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

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

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

gerritbot added a project: Patch-For-Review.Oct 9 2024, 12:48 PM

@Charlie_WMDE you can check replacement UI here: https://1077026--clicky-sparqly.netlify.app/

hey @HasanAkgun_WMDE thanks for the ping. Everything looks great except for one little thing I noticed.

In voice over, the second button is being called a button not a toggle button like the first one. I checked in the codex demo, and it seems like each of the buttons in a togglebuttongroup should be presented as a toggle button by the voiceover.

Let me know if you need a better description of the problem.

In T362183#10217224, @Charlie_WMDE wrote:

hey @HasanAkgun_WMDE thanks for the ping. Everything looks great except for one little thing I noticed.

In voice over, the second button is being called a button not a toggle button like the first one. I checked in the codex demo, and it seems like each of the buttons in a togglebuttongroup should be presented as a toggle button by the voiceover.

Let me know if you need a better description of the problem.

Thank you so much for the feedback @Charlie_WMDE ! I was able to reproduce the issue, and it's because of migration build of Vue we use, it doesn't render aria attributes correctly but it will work properly when we migrate to Vue 3. What do you think we should do?

Change #1077026 merged by jenkins-bot: