Sidebar hierarchy and groups tab keyboard navigation

[UnniKohonen]

Reasons for creating this PR

Hierarchy and groups tabs in the sidebar are not currently keyboard navigable. This PR adds keyboard navigation and screen reader semantics to both tabs.

Link to relevant issue(s), if any

• Closes [Accessibility], recommended to fix: Using the concept lists with the keyboard is heavy and unusable. #1982
• Closes [Accessibility], WCAG 4.1.2. The semantics of the tree items on the Hierarchy and Groups tabs are inadequate #1981

Description of the changes in this PR

• Add keyboard navigation to hierarchy and group trees (based on interactions defined here)
  • Arrow up/down are used to navigate between visible list items
  • Arrow right on a closed item opens it
  • Arrow right on an open item moves focus to first child
  • Arrow left on an open item closes it
  • Arrow left on a closed item closes its parent and moves focus to the parent
  • Enter/Space opens concept page and moves focus to concept page heading
  • Home/End move focus to first/last item
• Give hierarchy/groups lists role tree and links role treeitem
• Add aria-selected and aria-expanded attributes to links
• Make hierarchy buttons non-focusable and invisible to screen readers and remove aria-labels
• Cypress tests for both Vue components

Known problems or uncertainties in this PR

• Not all accessibility features defined here are implemented
  • Selection is only made with Space/Enter and not when moving between items
  • Type-ahead is not implemented
  • No aria-level, aria-setsize and aria-posinset attributes are used
  • Screen reader gets no indication when children are loaded

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]

19 new issues

Tool	Category	Rule	Count
qlty	Structure	Function with high complexity (count = 5): loadChildren	9
qlty	Duplication	Found 24 lines of similar code in 2 locations (mass = 78)	8
qlty	Structure	Function with many returns (count = 12): startGroupsApp	2

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.42%. Comparing base (e986760) to head (6a5b0cd).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #2024   +/-   ##
=========================================
  Coverage     70.42%   70.42%           
  Complexity     1703     1703           
=========================================
  Files            34       34           
  Lines          4436     4436           
=========================================
  Hits           3124     3124           
  Misses         1312     1312           

☔ 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.

[Copilot]

Pull request overview

This PR improves sidebar accessibility by adding ARIA tree semantics and keyboard navigation for the Hierarchy and Groups tabs, supported by Cypress coverage.

Changes:

• Adds roving tabindex and arrow/Home/End/Space keyboard handling for hierarchy and group trees.
• Adds ARIA tree/treeitem/group attributes and removes focusability from visual expand buttons.
• Adds Cypress tests for keyboard navigation in both sidebar tabs.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
resource/js/tab-hierarchy.js	Adds tree semantics and keyboard navigation for hierarchy concepts.
resource/js/tab-groups.js	Adds tree semantics and keyboard navigation for group/member trees.
tests/cypress/template/sidebar-hierarchy.cy.js	Updates ARIA expectations and adds hierarchy keyboard navigation tests.
tests/cypress/template/sidebar-groups.cy.js	Updates ARIA expectations and adds groups keyboard navigation tests.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[osma]

I tested this briefly in both Firefox and Chromium and also looked at the implementation, though not in great detail.

I think that the keyboard navigation in the hierarchy and groups feels very intuitive and natural. I'm not an expert on the details of the ARIA recommendations, but this is certainly a big step forward for accessibility!

SonarCloud pointed out that the use of counter++ within a sub-expression is bad practice, I think that could be fixed.

Other than that, LGTM!