Summary
As noted in the parent task, TypeaheadSearch results on wikidata.org may contain text in different languages (for label, description and alias). We need to ensure that:
- Each piece of text is wrapped in an element with the lang attribute set to the language code of the text, for a seamless experience with screen readers
- Text directionality is handled in a way that provides a consistent and readable user experience
UX considerations
See the comments on this task; particularly those from @Mooeypoo and @Ladsgroup (RTL language speakers) and @Sarai-WMDE (designer for this component) for details on what's ideal, expected, and practical. Baseline implementation will be to respect the UI direction for all menu items (to avoid a zig-zag effect on the overall alignment), then wrap each text piece in a <bdi> tag (to automatically render the text in the appropriate direction without influencing or being influenced by adjacent text or the UI direction).
Technical details
The wbsearchentities API already provided the lang attribute of the thing that matched the search query via the match property (e.g. if an alias of an item matched the query, the alias and its language were provided). It has recently been updated (see T104344) to include a display property with the lang of the label and description as well. A sample item returned by the API with a matching alias looks like this:
{
"id": "Q2389931",
"title": "Q2389931",
"pageid": 2308845,
"display": {
"label": {
"value": "Arius arenarius",
"language": "en"
},
"description": {
"value": "species of fish",
"language": "en"
}
},
"repository": "wikidata",
"url": "//www.wikidata.org/wiki/Q2389931",
"concepturi": "http://www.wikidata.org/entity/Q2389931",
"label": "Arius arenarius",
"description": "species of fish",
"match": {
"type": "alias",
"language": "en",
"text": "Sand catfish"
},
"aliases": [
"Sand catfish"
]
}The dir attribute would need to be looked up—WMDE has done this in termbox via a custom directive.
Special thanks to @Michael for clearly outlining this approach in previous discussions!
Acceptance criteria
- Add a match property to SearchResult so a matching alias can be included in a search result if one exists
- Update SearchResult type to include optional language data for label, match, and description
- Update the MenuItem component to support appending a match string to the label so we can render matching aliases
- Update the MenuItem component to support adding lang attributes and <bdi> wrappers for label, match, and description
- Update the Wikidata TypeaheadSearch demo on the Codex docs site to demonstrate these new features. This can serve as a simplified example of the eventual implementation of TypeaheadSearch on wikidata.org.
