Change Details

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 be able to display each of these things with the appropriate `lang` and `dir` attributes. 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" ] } ``` We will need to look up the language's direction in order to set the `dir` attribute. WMDE has done this in termbox via a [[ https://github.com/wikimedia/wikibase-termbox/blob/master/src/directives/inlanguage.ts | custom directive ]]. Special thanks to @Michael for clearly outlining this approach in previous discussions! ### Acceptance criteria [] Update `SearchResult` type to accommodate both plain strings and `{ value: string; language: string }` type objects for `label` and `description` [] Add a `match` property to `SearchResult` so a matching alias can be included in a search result if one exists [] Update the MenuItem component to support both plain strings and strings with language attributes for label and description [] Update the MenuItem component to support appending a `match` string to the label so we can render matching aliases [] If a `lang` attribute exists for a text node, include it and the corresponding `dir` attribute in the markup [] Update the [[ https://doc.wikimedia.org/codex/main/components/typeahead-search.html#demos | 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.

### 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: 1. 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 2. 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 [[ https://github.com/wikimedia/wikibase-termbox/blob/master/src/directives/inlanguage.ts | custom directive ]]. Special thanks to @Michael for clearly outlining this approach in previous discussions! ### Acceptance criteria [x] Add a `match` property to `SearchResult` so a matching alias can be included in a search result if one exists [x] Update `SearchResult` type to include optional language data for label, match, and description [x] Update the MenuItem component to support appending a `match` string to the label so we can render matching aliases [x] Update the MenuItem component to support adding `lang` attributes and `<bdi>` wrappers for label, match, and description [x] Update the [[ https://doc.wikimedia.org/codex/main/components/typeahead-search.html#demos | 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.

### 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: 1. 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 2. 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), We need to be able to display each of these things with the appropriate `lang` and `dir` attributes.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" ] } ``` We will need to look up the language's direction in orderThe `dir` attribute would need to set the `dir` attribute. be looked up—WMDE has done this in termbox via a [[ https://github.com/wikimedia/wikibase-termbox/blob/master/src/directives/inlanguage.ts | custom directive ]]. Special thanks to @Michael for clearly outlining this approach in previous discussions! ### Acceptance criteria [] Update `SearchResult` type to accommodate both plain strings and `{ value: string; language: string }` type objects for `label` and `description` [x] Add a `match` property to `SearchResult` so a matching alias can be included in a search result if one exists [x] Update the MenuItem component to support both plain strings and strings withte `SearchResult` type to include optional language attributesdata for label, match, and description [x] Update the MenuItem component to support appending a `match` string to the label so we can render matching aliases [] If ax] Update the MenuItem component to support adding `lang` attribute exists and `<bdi>` wrappers for a text nodelabel, match, include it and the corresponding `dir` attribute in the markupdescription [x] Update the [[ https://doc.wikimedia.org/codex/main/components/typeahead-search.html#demos | 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.