epam / epam/UUI

[Focus state]: issues with displaying focus

Open
#2,024 0 comments 0 reactions 0 assignees View on GitHub
A11y bug
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.
Screenshot 2024-02-27 at 14 05 05

## 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).
Screenshot 2024-02-27 at 15 53 44
Screenshot 2024-02-27 at 14 19 53
Screenshot 2024-02-28 at 15 35 08

PickerInput:

image

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.