mi6 / mi6/ic-ui-kit

Incorrect clear button colour on dark mode focus in ic-select

Open
#4,364 0 comments 0 reactions 0 assignees View on GitHub
a11y good first issue
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary of the bug
When using an ic-select component with a clear button in dark mode, the colour of the button appears incorrectly on focus. It currently appears dark but should appear white to contrast the focus colour.

### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Use an ic-select with a clear button in dark mode and select an item
2. Tab to focus on the clear button
3. See the error

### 📸 Screenshots or code
[Stackblitz](https://stackblitz.com/edit/uir8x8gp?file=index.html)

Image

### 🧐 Expected behaviour
The button should appear light to contrast the focus colour, like with ic-search-bar:

Image

### 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given an ic-select component using a clear button in dark mode
When clear button is in focus
Then clear button should appear white to contrast the background

### 🚨 Urgency (low, medium or high)
Low

Contributor guide

Open the contributing guide

Research direction

Start with the ic-select component and reproduce the issue using the linked StackBlitz: enable its clear button, select an item, switch to dark mode, and tab to the clear button. Compare its focused appearance with ic-search-bar; done means the clear button appears white and contrasts with the focus colour in dark mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.