mi6 / mi6/ic-ui-kit

aria-label for native button element inside ic-button does not get updated if value changes

Open
#1,110 1 comment 0 reactions 1 assignee View on GitHub

@ad9242 is already working on this.

Since Oct 20, 2023.

Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary of the bug
If you set an aria-label on an ic-button and then subsequently change the value, the native button element inside does not get update with the new value, causing screen readers to read the wrong value.

## 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. set the aria-label attribute on an ic-button
2. later change the attribute to another value
3. inspect the element in browser dev tool
4. the aria label is still set to the original value

## 📸 Screenshots or code

## 🖥 📱 Device
All

## 🧐 Expected behaviour
The aria-label should be updated

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

*Given* an aria label is updated on an ic-button component
*When* a user focus the button with a screen reader enabled
*Then* the updated label should be read by the screen reader

We should also enhance the a11y tests to make sure this is tested.

## Additional info
For aria-describedby, a mutation observer was added to watch when the value changes. A similar approach may be possible to resolve this

Alternatively, moving to stencil 4.3.0 may allow us to make use of watching native HTML attributes: https://github.com/ionic-team/stencil/pull/4760

This is needed for DatePicker component.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.