mi6 / mi6/ic-ui-kit

Ic-Button/Ic-Toggle-Button - aria labels not getting removed when relevant element in slot is removed

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

Description

## Summary of the bug
When adding an element to a slot and then removing it, the aria label does not return to its previous state. Instead the aria label will keep adding to itself every time the element in the slot is added.

Issue also extends to Ic-Button and more components are worth investigating

## 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to page: [This stackblitz](https://stackblitz.com/edit/stackblitz-starters-qixhnw?file=src%2FApp.tsx)
2. Open browser devtools and inspect the toggle button and look at the aria-label
3. Toggle the show/hide content button on/off repeatedly
4. Ignore if the badge/icon does not update, since this is covered by another issue
5. Notice aria label contains repeating information

## 🖥 📱 Device
- OS versions: MacOS, Windows
- Browser versions: Firefox, Chrome
- Occurs in storybooks/stackblitz examples

## 🧐 Expected behaviour
The aria label should not contain information about elements that are no longer rendered

## 📝 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-button element with a conditionally rendered element in a slot
*When* The element is conditionally rendered on/off
*Then* The aria label should return to what it was originally

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the linked StackBlitz and inspect the Ic-Toggle-Button and Ic-Button slot-handling behavior while repeatedly showing and hiding the slotted element. Trace how the aria-label is updated and verify that removing the element restores the original label without repeated information.

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.