aria-label for native button element inside ic-button does not get updated if value changes
@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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.