SKOS XL popup on concept page

[osma]

Reasons for creating this PR

See #1714. This PR implements a popup display for SKOS XL information for

1. the concept prefLabel heading
2. properties with literal values
3. the "terms in other languages" section.

The popup is implemented in pure CSS. There are also Cypress tests to verify that the popup is triggered when clicking the icons for all three cases.

The Cypress test file concept.cy.js was starting to become too unwieldy, so I split off some of the tests into a separate concept-full-vs-partial.cy.js file. The PR also contains a minor typo fix for the concept page template.

Link to relevant issue(s), if any

• Closes SKOS XL functionality for Skosmos 3 concept page #1714

Description of the changes in this PR

• popup displays for the SKOS XL information (all 3 cases listed above)
• cypress tests for the popup (all 3 cases)
• split off some tests from concept.cy.js to concept-full-vs-partial.cy.js for easier maintenance and faster test cycles
• typo fix for the download link (not related to other stuff in the PR, but I included it here because it's so small)

Here are a couple of examples showing what this looks like:

Known problems or uncertainties in this PR

• accessibility could be better; for example, screen readers should be informed about the popup when it opens

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)

[joelit]

Looks good and works somewhat as expected.

With mouse, the popup becomes visible with a mouse over, and it becomes hidden with a mouse out. The popup can locked in place by clicking the button so that it remains visible after mouse out. I'd expect like to see the popup becoming hidden with another click on the button. However, it seem this cannot be done with pure CSS buttons.

With touch screen (my laptop), the current functionality is: click on the button and the popup becomes visible, click on the button again and nothging happens, but click away and the popup becomes hidden.

My suggestions:

• change the button to input type="checkbox" that is toggleable while remaining pure CSS
• have a JS event listener to the button that toggles the visibility on and off
• disregard this notion all together, as I'm not sure it's worth the effort

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.91%. Comparing base (84b37b4) to head (8f2add1).
Report is 8 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #1718   +/-   ##
=========================================
  Coverage     70.91%   70.91%           
  Complexity     1651     1651           
=========================================
  Files            33       33           
  Lines          4332     4332           
=========================================
  Hits           3072     3072           
  Misses         1260     1260           

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

[osma]

I added the remaining two cases of SKOS XL popups as well as Cypress tests for them.
I also split off some of the tests from concept.cy.js into a separate file.

See the updated description in the OP. Now ready for review.

Accessibility could probably be improved further, ideas welcome!

[joelit]

Looks pretty good! I could think of some clear improvements to accessibility, as requested.
Also a small addition to the cypress tests (example included in the review comments).

[sonarcloud]

Quality Gate failed

Failed conditions
31.2% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[osma]

I implemented the proposed changes (generating the id's was a bit painful!). Also, I made the clickable area around the info icons a bit larger to make it easier to hit them e.g. on touchscreen devices.

[joelit]

LGTM! Everything looks fine in WAVE, too. I added a very minor fix to CSS.

[joelit]

I would add a compensation for the border in the margin like so:

Suggested change

	border-radius: 0;
	border-radius: 0;
	margin: -4px;

So that the text doesn't jitter when the button is pushed (Chromium, not sure how it would be with other browsers).