Problem
The main focus of the migration to Codex was to replace WiKit tokens and components in use within the Query Builder interface and serve the goal of deprecating the legacy design system. From a design perspective, a fully conservative approach was adopted in order to streamline the migration: no visual changes were applied to adjust the tool's UI to Codex's design guidelines or fix UI/UX issues. For that reason, some small UI debt has been accumulated that we should address once the migration is concluded.
Solution
We'll apply small improvements to the Query Builder UI that are aligned with Codex recommendations:
- Fix copy of query subtitle: The current .query-subtitle displays the text "Find all items..." (in EN). Using ellipsis might be disorienting, specially for screen reader users. Using a complete sentence instead would also makes the copy more translatable. The recommendation is to opt for a clearer option like "Find all items that match the following conditions:"
2. Indent “and/or” toggle when it’s included within a condition group: When the connector “OR” is selected, conditions are grouped and wrapped together in the same module. The “and/or” toggle should be indented and aligned with the condition fields for easthetic reasons and to reinforce their grouping inside the condition wrapper.
- Add “+” icon to “Add condition” button: Adding the icon would reinforce meaning and ensure quick recognition (see Codex's Using links and buttons guidelines).
- Adjust the copy of settings checkboxes: 4.1. “Limit the number of results to” isn't an optimal formulation for translation or accessibility. We could use instead "Maximum number of results". 4.2. The copy “Show IDs instead of labels” is slightly misleading, since what the option does is removing the itemLabel column from the results table. Instead, we could indicate "Show only Item QIDs (may prevent timeout)".
- Reduce spacing between limit checkbox and input when the latter wraps into a new line: Since Codex's checkboxes' labels don't break, the limit input moves below the checkbox when space is limited. The gap between the two elements doesn't help support their connection and it thus should be reduced to 0.5rem (var(----dimension-layout-xxsmall))
6. Reorder “Copy link to query” and “Run query” buttons. According to the Form construction guidelines: “Actions should be aligned to the start of the form with the most primary action positioned to the end within that group”.
- Replace sharable link composition by single button (T360997): The current text+button is not fully optimal in terms of accessibility (see linked subtask for details)
Acceptance criteria
- The listed improvements are applied to the Query Builder's UI