Add translations for tab-alpha.js and vocab-search.js (#1722)

[miguelvaara]

Review guidelines

Visually observable changes in the browser are primarily related to parts generated by the following files:

• resource/js/tab-alpha.js
• resource/js/vocab-search.js

Test the user interface:

• Go: [our Skosmos root]/yso/fi/
• Type "pork" into the vocabulary search bar and observe the different concept types.
• Type "gdfgdgfgf" into the vocabulary search bar and observe the No results text.
• Click on a letter in the alphabetical list and observe the Loading more items text.

Note:

• The msgs variable has been removed from the SKOSMOS object.
• The issue in the alphabetical list's Cypress test was caused by a timeout. For some reason in my development environment data transfer from the triple store to the frontend was so slow that an "amazingly" long wait time was required. The question remains as to how this "issue" should be properly addressed.

Reasons for creating this PR

Improves frontend translation functionalityies.

Link to relevant issue(s), if any

#1722

• Closes Sub of #1712: Add translations for front-end components #1722

Description of the changes in this PR

Added similar features as in the previous Vue-related translation implementations.

Known problems or uncertainties in this PR

What if we explore the ways to implement the translation functionality using JavaScript's promise features. By doing so, translations could be loaded in a lazy manner, meaning that if translations need to be awaited, the translation key would briefly appear to the user (likely some milliseconds), but as soon as the translations are ready, the key would be replaced with the actual translation.

This is a very common way to implement similar functionalities. The current implementation works but it has a weakness: if additional dependencies will be needed later that also need to be awaited before the page loads, they must be added to the same functionality (risk of excessive complexity).

Therefore, using the async -> await -> response -> .then -> .catch structure could be considered.

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.90%. Comparing base (5c6ff5a) to head (c2e3351).
Report is 88 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #1723      +/-   ##
============================================
- Coverage     73.13%   70.90%   -2.24%     
+ Complexity     1958     1650     -308     
============================================
  Files            33       33              
  Lines          4769     4330     -439     
============================================
- Hits           3488     3070     -418     
+ Misses         1281     1260      -21     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.