Copy to clipboard functionality for concept page

[osma]

Reasons for creating this PR

Implement copy to clipboard functionality, which is one of the required features for the concept page (#1484).

Link to relevant issue(s), if any

• part of Epic: Concept Page #1484
• Closes New copy-to-clipboard component for Skosmos 3.0 #1504
• Closes Alt text for the copy to clipboard buttons #926

Description of the changes in this PR

• add a vanilla JS function copyToClipboard
• use the copyToClipboard method for the prefLabel and URI on the concept page
• add translations (fi, sv, en) for the "Copy to clipboard" alt text used for the copy buttons
• remove the copy to clipboard icons from the search results page (this was probably a misunderstanding during layout design)
• add Cypress tests for copy to clipboard functionality

Known problems or uncertainties in this PR

• the Cypress tests that access the clipboard may fail when run interactively (npx cypress open) if the Cypress window isn't focused (for example when working in an IDE) due to browser security policy; they always work when run headless (npx cypress run) and under CI

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)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (83fd8a1) 70.54% compared to head (f5ee24c) 70.54%.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #1590   +/-   ##
=========================================
  Coverage     70.54%   70.54%           
  Complexity     1644     1644           
=========================================
  Files            32       32           
  Lines          4315     4315           
=========================================
  Hits           3044     3044           
  Misses         1271     1271           

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

[osma]

Rebased on current main since PR #1585 was merged.

[osma]

TODO:

• fix: buttons don't work after partial page load
• clicking on prefLabel or URI should select it
• copy button next to a long prefLabel should stay on the same line if possible

[osma]

SonarCloud complains about duplicated code in Cypress tests. Well, duh, tests are repetitive...

[joelit]

This line fills me with dread. We should make sure all event handlers are re-registered collectively. Partial page loading as a specific test case hasn't been used as of yet. Should we have an issue about it?

[osma]

I agree that this is a more general issue, but currently we don't have that many event handlers and AFAICT only the concept-mappings component needs to re-register its event handler after a partial page load, and it already does that.

[joelit]

The things you learn..! -__-

[osma]

😁 Ideally the test would just be skipped when this happens. Not sure if that's easy to implement.

[joelit]

I would really want to see a hightlight for the copy button when used by keyboard.

Test case:

• Go to http://localhost/Skosmos/yso/fi/page/p23406
• Select "Uudet ja poistetut" form the side bar for ease switchng through interavtive elements
• Use tab to switch through active elements
• After the breadcrumb, (and if using shift+tab, before the broader concept link) the point where the preferred label with copy-to-clipboard button is active, there is no visual hint like visible border to indicate this
• When you press enter while the copy-button is actice, the relevant element is highlighted and the copy works as expected

[joelit]

Keyboard navigation needs a highlight hint, otherwise it looks good

[sonarqubecloud]

Quality Gate failed

Failed conditions

28.2% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

[joelit]

Tested, and it works for me - we can ask for a graphic designer's opinion later.