[Focus state]: issues with displaying focus
- Dominant language
- TypeScript
- Stars
- 247
- Forks
- 78
- Avg merge
- 14h 27m
- Merged PRs (30d)
- 15
Description
## Case №1
## Description
In some places the focus frame is not entirely visible
## Steps to Reproduce
1. Open [Filtered Table](https://uui.epam.com/demo?id=filteredTable&page=1&pageSize=40&presetId=-1) demo.
2. Navigate to 'Configure columns' button using `Tab` key.
## Actual result
The focus frame is cut off.
## Expected result
The entire frame must be visible.
## Note
The same situation with **Alert** (X icon, size = 36), **Link button**, **Advanced Tables** (Collapse/expand All).
PickerInput:
## Case №2
## Description
Focus is not visible for some components when navigating with the keyboard
## Steps to Reproduce
1. Open [Rating](https://uui.epam.com/documents?id=rating&mode=doc&isSkin=null&category=components) component.
2. Navigate to the example using `Tab` key.
## Actual result
User doesn't see focus, but can control the component using arrows.
https://github.com/epam/UUI/assets/57751283/8fccb107-febb-42a9-b0a7-33111d0a11a0
## Expected result
Focus should be visible.
## Note
The same situation with **Slider rating**, **links** on the web pages, **icons** on the Assets page.
https://github.com/epam/UUI/assets/57751283/c003098c-41dd-4d5c-8d42-801b9f87a08a
https://github.com/epam/UUI/assets/57751283/e55699de-4698-4cb4-a0c1-a7da4b3da2cf
https://github.com/epam/UUI/assets/57751283/2af5d71f-a9d0-4f68-b512-a8b4782b0ff9
## Environment
* UUI version: 5.6.1
* Browser name: any
* Operating System: any
Contributor guide
Research direction
Start by reproducing the focus behavior in the Filtered Table and Rating demos with keyboard navigation, then compare Alert, Link button, Advanced Tables, PickerInput, Slider rating, web-page links, and Assets icons. Trace the shared focus rendering and styling used by these components. Done means the focus indicator is fully visible and consistently appears for every listed keyboard-interactive case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100