As part of the work to support Custom translation suggestions (T113257), users can define their areas of interest in order to get relevant suggestions. While the initial support for topic selection allows users to select one (T368422) or more (T369268) topics from a list. This ticket is focused on the support for users to search for a specific filter to apply.
Searching allows for users to find topic areas across a much wider topic space. They should be able to search for:
- Any of the items present in the "Adjust suggestions" menu (i.e., users can search for the "Videogames" option as a quick way to select this filter with no need for browsing).
- Any Wikidata topic to get similar suggestions to it.
- Lists of topics as part of group translation activities such as campaigns and wiki projects. This will be supported as part of the corresponding ticket about group translation support.
The core steps of the search process are illustrated below:
- Initial. A Search input component is used with a "Search topics or collections" placeholder.
- Focused. The focused state will follow the usual behaviour in the Search input component (e.g., the input focus will result into the virtual keyboard showing on mobile).
- Search results. Once the user provides some input, the elements below the Search input will be replaced by the search results. Some considerations:
- Clearing the search:
- Clear option ("x" icon) appears when text is present
- Clearing returns to previous state
- Implemented using the "end icon" property of Text input element -Loading.
- Result structure:
- The result items. The results will be displayed using the Menu item element.
- Flat list structure without group headers
- Visual differentiation through icons and metadata
- Result appear in order of relevance(article, topic, collections)
- Result types and presentation:
- Wikipedia/Wikidata articles:
- Thumbnail when available
- Title: Article name, 1 line, If more, truncate.
- Secondary text: 1 line article description. If more, truncate.
- Topic areas:
- Search icon.
- Title: Topic name, 1 line, If more, truncate.
- Secondary text: "Topic • Browse articles
- Collections:
- Article group icon(icon name - cdxIconArticles)
- Title: Collection name, 1 line, If more, truncate.
- Secondary text: "Collections • [X] articles
- Wikipedia/Wikidata articles:
- Clearing the search:
Derived Requirement
Enable users to search for translation suggestion filters by integrating a search component into the "Adjust suggestions" interface. The search functionality must allow users to locate:
- Specific topics (e.g., “Videogames”) from the predefined list
- Wikidata-based topics
- Collections (e.g., campaign or wiki project article groups)
The search should return relevant results with visual cues (icons, titles, descriptions), support clearing input, and follow accessibility and UI consistency standards.
Test Steps
Test Case 1: Ensure search input is visible with correct placeholder
- Navigate to the Translation Dashboard.
- Click "Adjust suggestions".
- ✅❓❌⬜ AC1: Confirm that a search input field is visible with the placeholder text *"Search topics or collections"*.
Test Case 2: Verify keyboard focus behavior on mobile
- On a mobile device or emulator, tap the search input field.
- ✅❓❌⬜ AC2: Confirm that the virtual keyboard appears and the input is focused.
Test Case 3: Validate search results display for known topics
- Enter a topic name (e.g., *Videogames*) in the search input.
- ✅❓❌⬜ AC3: Confirm that a result appears for the topic, with a search icon, topic title (1 line max), and secondary text “Topic • Browse articles”.
Test Case 4: Validate search results display for Wikidata article
- Enter a known article name (e.g., *Albert Einstein*) in the search input.
- ✅❓❌⬜ AC4: Confirm that the result includes a thumbnail (if available), article title, and a 1-line description.
Test Case 5: Validate search results display for collections
- Enter a collection name (e.g., *Women in STEM*) in the search input.
- ✅❓❌⬜ AC5: Confirm that the result includes an article group icon, the collection name, and a secondary text like “Collections • \[X] articles”.
Test Case 6: Ensure results are sorted by relevance
- Search for a keyword common to multiple types (e.g., *Science*).
- ✅❓❌⬜ AC6: Confirm that the most relevant item types (e.g., articles, then topics, then collections) appear in that order.
Test Case 7: Validate clear functionality in the input field
- Type any text into the search input.
- Click the "x" icon that appears on the right.
- ✅❓❌⬜ AC7: Confirm that the input is cleared and the UI returns to the pre-search state.
Test Case 8: Verify truncation behavior for long titles/descriptions
- Search for an item with a long name and description.
- ✅❓❌⬜ AC8: Confirm that titles and descriptions are truncated to a single line with ellipsis if needed.
Test Case 9: Confirm visual consistency across result types
- Search for a mixed keyword (e.g., *History*) with multiple result types.
- ✅❓❌⬜ AC9: Confirm each result type (topic, article, collection) uses its corresponding icon and visual structure.
Test Case 10: Validate accessibility standards
- Use keyboard navigation (Tab, Enter) to focus on the search input and navigate results.
- ✅❓❌⬜ AC10: Confirm that all elements are reachable and actionable via keyboard.
QA Results - Test Wiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T369595#10882136 |
| 2 | ✅ | T369595#10882136 |
| 3 | ✅ | T369595#10882136 |
| 4 | ✅ | T369595#10882136 |
| 5 | ✅ | T369595#10882136 |
| 6 | ✅ | T369595#10882136 |
| 7 | ✅ | T369595#10882136 |
| 8 | ✅ | T369595#10920148 |
| 9 | ✅ | T369595#10882136 |
| 10 | ❌ | T369595#11015282 |
