Epic: Global Search Bar

[joelit]

Description of the enhancement

Skosmos 3.0 needs a new search bar component using Vue

1. General functionality

• 1.1 Twig-templates, Bootstrap-layout and CSS
• 1.2 Search field can be emptied by clicking X
• 1.3 Search can be executed with a chosen content language, or with all languages (cypress tests for this)
• 1.4 Dropdown menu styling should match design expectations (Bootstrap, if possible)
  • 1.4.1 Dropdown menu scroll bar can be styled to colour scheme?
  • 1.4.2 Menu item highlight elements should be designed according to unified scheme
• 1.5 Once user has stopped typing after 300 ms, submit the search
• 1.5.1 Process the search results into a stored object that facilitates caching and interrupting
• 1.6 Append an asterix after the search term, if the search term does not contain an asterix at some point
• 1.7 Once the search results are calculated, dispaly the dropdown menu
• 1.7.1 If there are no results, show the dropdown with no results -message
• 1.7.2 If the user writes more text in addition to previously given input, show the result of the latest input
• 1.8 Hide the dropdown list, if the user:
  • 1.8.1 Clears the text box from the clear-button
  • 1.8.2 Deletes the contentents of the input field
  • 1.8.3 Clicks on somewhere outside of the search result dropdown
• 1.9 Defined behaviour when no vocabularies are chosen (should we disable the search?)

2. Language options

• 2.1 Changing the search language changes the content language (Do we want this behavior?)
  • 2.1.1 Defined behaviour when all languages are chosen
  • 2.1.2 Defined behaviour when no languages are chosen (should we disable the search?)
• 2.2 Contents for the language menu are defined in the SKOSMOS JS-object (cypress tests for this)
• 2.3 All UI text is in English (in the form of translation message IDs) (Message IDs TBD)
• 2.5 The translation component provides the translated UI messages (cypress tests for this)
• 2.6 Language option should perform the autocomplete search in chosen language
  • 2.6.1 If the autocomplete search is performed in all languages, display the foreign language hits with the language in parenthesis

3. Autocomplete

• 3.1 Matches prefLabes (cypress tests for this)
• 3.2 Matches altLabels (cypress tests for this)
  • 3.2.1 AltLabels should be in cursive
• 3.3 Matches hiddenLabels (cypress tests for this)
  • 3.3.1 HiddenLabel hits that are duplicate results to other labels are filtered out with search parameter
• 3.4 Matches notation codes (cypress tests for this)
  • 3.4.1 The notation code can be hidden with a configuration parameter
  • 3.4.2 The configuration for this is read from the vocabulary config (cypress tests for this)
• 3.5 Shows the concept types (cypress tests for this)
• 3.6 Additional information for each search result can be shown according to vocab config
• 3.6.2 Additional information for SKOS-XL labels (e.g. for culture-sentitive labels) need to be shown in the dropdown results (Visible info icon attached to term in search bar drop down list #1572 )
• 3.7 The matching part of the text is highlighted for each search result (cypress tests for this)
• 3.8 Autocomplete should fire if there is at least two characters in the input string
• 3.9 Caching
  • 3.9.1 When a search result is recieved, it is cached with the search string to a dictionary
  • 3.9.2 When a multipage result is recieved, it should be flagged as not-to-filter further
    • 3.9.2.1 Alternative option would be to load the rest of the pages of the result in asynchronous manner
  • 3.9.3 When more characters are added to a search string (no delay), apply a new filter to the raw result data
  • 3.9.4 When characters are erased from the search string (no delay), apply a new filter to the raw result data

4. Accessibility

• 4.2 HTML-content shown in other languages are tagged with lang-attribute
• 4.3 Language menu, search field, autocomplete list and search button are structured together
• 4.4 Screen reader needs to be tested
• 4.5 HTML element structure should be semantically meaningful for the menus (e.g. Bootstrap list-group)
• 4.1 Search bar can be operated with keyboard, which key can be used for each sub-element
  • 4.1.1 Vocabularies can be chosen with keyboard
  • 4.1.2 Language can be chosen with keyboard
  • 4.1.3 Search input field can be operated with keyboard (and enter goes to search result page)
  • 4.1.4 Autocomplete list can be operated with keyboard (and enter goes to the chosen search result)
  • 4.1.5 Clear button can be operated with keyboard
  • 4.1.6 Search button can be operated with keyboard

5. Additional menus

• 5.1 The maximum length of the language dropdown and the autocomplete list is limited to set element height (in rems)
• 5.2 Lists longer than the maximum element height get a scroll bar
• 5.3 'Search tips' menu in similar manner to Skosmos 2.x
• 5.4 Should there be an indication with the total number of search results displayed shomewhere when the dropdown menu is shown?