Issue1889 vocab search a11y fixes

[joelit]

Reasons for creating this PR

Link to relevant issue(s), if any

• Closes Vocabulary Search Bar: Add keyboard support for accessibility #1889

Description of the changes in this PR

This PR should be based upon PR #2004 as it improves the keyboard navigation on top of the previous accessibility improvements.

Known problems or uncertainties in this PR

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)

[qltysh]

6 new issues

Tool	Category	Rule	Count
qlty	Structure	Function with high complexity (count = 5): mounted	3
qlty	Structure	Function with many returns (count = 38): startGlobalSearchApp	2
qlty	Structure	High total complexity (count = 55)	1

[qltysh]

Function with high complexity (count = 5): mounted [qlty:function-complexity]

[qltysh]

Function with high complexity (count = 5): langMenuKeydownHandler [qlty:function-complexity]

[qltysh]

Function with high complexity (count = 13): onLangMenuKeydown [qlty:function-complexity]

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.07%. Comparing base (17083ca) to head (18e472c).
⚠️ Report is 24 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2017   +/-   ##
=========================================
  Coverage     70.07%   70.07%           
  Complexity     1703     1703           
=========================================
  Files            34       34           
  Lines          4484     4484           
=========================================
  Hits           3142     3142           
  Misses         1342     1342           

☔ View full report in Codecov by Sentry.
📢 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]

Rebased to issue1889-vocab-search-a11y-fixes and force pushed.

[UnniKohonen]

Keyboard navigation seems to work correctly for the most part and screen reader messages seem to be correct.

There were a couple of issues I noticed:

Both global and vocab search have a problem in firefox where if tab is pressed when focused on dropdown options, focus moves to the next field and then immediately back. This causes the screen reader to read both aria labels. It seems like this issue was not present previously so it should be maybe fixed. In chrome, tab moves focus to the next dropdown option which is probably fine.

Dropdown chevrons have moved in the wrong position. These rules should be included for the .chevron class to fix the problem:

right: 1rem;
top: 50%;
transform: translate(0, -50%);

and for .dropdown-toggle:

padding-right: 2.5rem

Vocab search language dropdown hover and focus effects have also changed. If this is not intentional, they should be fixed (it seems to be at least partially because language selection list no longer has the language-list id).

There is also a failing cypress test in vocab search page but it probably doesn't originate from this PR.

[joelit]

Keyboard navigation seems to work correctly for the most part and screen reader messages seem to be correct.

There were a couple of issues I noticed:

Both global and vocab search have a problem in firefox where if tab is pressed when focused on dropdown options, focus moves to the next field and then immediately back. This causes the screen reader to read both aria labels. It seems like this issue was not present previously so it should be maybe fixed. In chrome, tab moves focus to the next dropdown option which is probably fine.

I cannot reproduce this behavior in Firefox or Chrome. I get the expected bahavior where tab moves the focus to the next menu, as intended.

Dropdown chevrons have moved in the wrong position. These rules should be included for the .chevron class to fix the problem:

right: 1rem;
top: 50%;
transform: translate(0, -50%);

and for .dropdown-toggle:

padding-right: 2.5rem

Thanks! Fixed as suggested.

Vocab search language dropdown hover and focus effects have also changed. If this is not intentional, they should be fixed (it seems to be at least partially because language selection list no longer has the language-list id).

That was not intentional. Thanks for spotting it (I wish we had tests for CSS too). Fixed.

There is also a failing cypress test in vocab search page but it probably doesn't originate from this PR.