[UnniKohonen]

Reasons for creating this PR

Tooltips for the icons on search result pages and for the property labels on vocab home and concept pages are not accessible by keyboard usage. This PR makes them keyboard focusable which allows viewing them without a mouse.

Link to relevant issue(s), if any

• Closes [Accessibility], WCAG 1.1.1 The icons on the Search Results page do not have alt texts and they are uncler to many users #1967
• Problem 2 described in [Accessibility], WCAG 2.1.1. The concept page tooltips are not keyboard accessible and are read two times with screen readers. #1984

Description of the changes in this PR

• Make tooltips visible on focus in addition to hover
• Make the elements containing tooltips keyboard focusable

Known problems or uncertainties in this PR

I was not able to test tooltips on vocab home page as no vocab in Finto has these overrides.

This PR does not address any issues with skos-xl labels or copy button tooltips.

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.
✅ Project coverage is 70.98%. Comparing base (3d045a0) to head (a24e5ed).

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2137   +/-   ##
=========================================
  Coverage     70.98%   70.98%           
  Complexity     1723     1723           
=========================================
  Files            34       34           
  Lines          4480     4480           
=========================================
  Hits           3180     3180           
  Misses         1300     1300           

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[joelit]

For Vocab info and Concept card this looks good. For Search results, I cannot keyboard navigate the search result information in a way that would make my screen reader read the additional information text content lines for each search result. The way the keyboard navigation behaves in this PR, only the icons are navigable/screen-readable.

One fix would be to place the tabindex="0" inside the li-element instead of the <span class="tooltip-icon">.
Like so: <li class="list-group-item" tabindex="0">
This way the keyboard navigation and the screen reader makes more sense to me (but I'm no expert in the subject).

[joelit]

On further inspection, I'd say let's go with this PR as it is. Different screen readers give different results, and getting the tooltip visibe with keyboard navigation is also an important improvement.