DependencyTrack / DependencyTrack/frontend

Tabindex="0" on non-interactive scrollbar elements

Open
#1,595 0 comments 0 reactions 0 assignees View on GitHub
defect in triage
Dominant language
Vue
Stars
171
Forks
250
Avg merge
10h 56m
Merged PRs (30d)
84

Description

### Current Behavior

Non-interactive scrollbar elements (.ps__scrollbar-x and .ps__scrollbar-y) are focusable via keyboard navigation due to tabindex="0" being applied.

These elements are invisible and do not provide any functionality, but still receive focus when navigating using the Tab key. Screen readers may announce these elements as "blank".

### Steps to Reproduce

1. Login to the application.
2. Press the Tab key repeatedly to navigate through interactive elements.
3. After focusing the "Administration" button, focus moves to invisible elements near the bottom-left of the page.

### Expected Behavior

Only interactive and visible elements should receive keyboard focus.

Non-interactive scrollbar elements should not be included in the tab order, and no blank or invisible focus stops should occur during keyboard navigation.

### Dependency-Track Frontend Version

4.x

### Browser

Microsoft Edge

### Browser Version

149.0.4022.52 (Official build) (64-bit)

### Operating System

Windows

### Checklist

- [x] I have read and understand the [contributing guidelines](https://github.com/DependencyTrack/dependency-track/blob/main/CONTRIBUTING.md#filing-issues)
- [x] I have checked the [existing issues](https://github.com/DependencyTrack/frontend/issues) for whether this defect was already reported

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.