DependencyTrack / DependencyTrack/frontend
Tabindex="0" on non-interactive scrollbar elements
- 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.