mi6 / mi6/ic-ui-kit

[ic-loading-indicator] - Review styling of loading indicator in high contrast mode and of light variants

Open
#2,320 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
The current styling of light variant ic-loading-indicator and in high contrast mode should be reviewed.

## 💬 Description
Currently, only the filled portion of the radial loading indicators is visible in high contrast mode. This is particularly a problem when there is no label and the progress is at 0. The same problem exists when the light variant is used.

High contrast:
![image](https://github.com/user-attachments/assets/dd232e6e-c854-4dab-b88d-95ae671df7ec)

Light variant:
![image](https://github.com/user-attachments/assets/4bbe2757-6a7f-44e8-a30a-7bfd96a0715e)

The linear loading indicators have an outline, so there is no issue with the display in high contrast mode:
![image](https://github.com/user-attachments/assets/f5c60cab-5a4f-41af-ae45-5c2cada4602a)

A solution may be to add an outline.

Contributor guide

Open the contributing guide

Research direction

Start at the ic-loading-indicator component entry point and inspect how the radial indicator renders in high contrast mode and with the light variant. Compare its styling with the linear indicator, then verify that the unfilled portion remains visible at zero progress without a label in both affected cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.