mi6 / mi6/ic-ui-kit

Clicking disabled options in an ic-select causes double focus indicator

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

Description

### Summary of the bug

When you click on disabled options in an ic-select, both the menu and the input box show a focus indicator. Only the input box should show the focus indicator.

### 🪜 How to reproduce

1. Go to the [select with disabled options story](https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-select-single--disabled-options) and open the select.
2. Click on the disabled option.
3. See that a focus indicator appears on the menu while there's also one on the input box.

### 📸 Screenshots or code

Image

### 🧐 Expected behaviour

The menu should not show a focus indicator at all.

### Additional info

Check that the fix works for all three select variants.

Make sure the fix does not change the behaviour of the search bar focus indicator (see [search bar with options story](https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-search-bar--with-options), clear the value and type in "ca" to see a disabled option).

Contributor guide

Open the contributing guide

Research direction

Start with the select with disabled options story and reproduce the duplicate focus indicators. Compare all three select variants, then check the search bar with options story to ensure its disabled-option focus behavior is unchanged. Done means only the input shows focus after clicking a disabled select option, while the search bar still behaves as before.

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
Quiet
Clarity
Mostly clear
Newbie friendliness
66/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.