Usability: Fix keyboard navigation in application carousel

[Cathy0123456789]

Checklist

General

• I tested all changes and their related features with all corresponding user types.
• I chose a title conforming to the naming conventions for pull requests.

Client

• I strictly followed the client coding and design guidelines.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I documented the TypeScript code using JSDoc style.

Motivation and Context

Closes #2026

Description

This pull request improves keyboard navigation in the ApplicationCarouselComponent by ensuring arrow key navigation does not interfere with user input in editable elements or when modifier keys are pressed. It also adds comprehensive tests to verify these behaviors.

Steps for Testing

Prerequisites:

1. Log in to TUMApply as professor
2. Go to Recruitment - Review
3. At the bottom, enter something in the comment field
4. Navigate with the left and right arrow on your keyboard, see that it navigates the cursor and applications don't switch

Review Progress

Code Review

• Code Review 1

Manual Tests

• Test 1

Test Coverage

Warning: Client tests failed. Coverage could not be fully measured. Please check the workflow logs.

Last updated: 2026-03-08 14:42:38 UTC

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

📊 Client Test Coverage Too Low

🔍 View coverage locally:

npm run test:ci
open build/test-results/lcov-report/index.html

🌐 View coverage from GitHub:
Download the "coverage-report-client" artifact from this workflow run.

[github-actions]

📊 Client Test Coverage Too Low

🔍 View coverage locally:

npm run test:ci
open build/test-results/lcov-report/index.html

🌐 View coverage from GitHub:
Download the "coverage-report-client" artifact from this workflow run.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

📊 Client Test Coverage Too Low

🔍 View coverage locally:

npm run test:ci
open build/test-results/lcov-report/index.html

🌐 View coverage from GitHub:
Download the "coverage-report-client" artifact from this workflow run.

[github-actions]

@Cathy0123456789 Test coverage has been automatically updated in the PR description.

[github-actions]

📊 Client Test Coverage Too Low

🔍 View coverage locally:

npm run test:ci
open build/test-results/lcov-report/index.html

🌐 View coverage from GitHub:
Download the "coverage-report-client" artifact from this workflow run.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.

[github-actions]

@Cathy0123456789 Test coverage could not be fully measured because some tests failed. Please check the workflow logs for details.