fix(button): sync aria description between host and native button - #31264
fix(button): sync aria description between host and native button#31264Zac-Smucker-Bryan wants to merge 4 commits into
Conversation
Adds @watch('aria-description') to button.tsx before onAriaChanged
Set aria description and both buttons should match. Update aria description on host button, and both buttons should still match.
|
@Zac-Smucker-Bryan is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Thanks for this PR!
I talked to the team about this PR and, while it does look solid and solve the issue's title problem, there's a bit more to it than this.
There's actually 2 remaining issues in the original issue that won't be resolved by this PR:
- Many other aria attributes not being copied
- Other components that can act like buttons not getting this fix (this was a comment on the issue, but should still be addressed)
The first one I've created an internal follow-up ticket to address because it's much more involved than this solution and something we'll need to review on how to do well. We can't just add 50 @Watchs and call it good.
The second one I'd prefer if we address in this PR
codeCraft-Ritik
left a comment
codeCraft-Ritik
left a comment
There was a problem hiding this comment.
Great fix! Synchronizing dynamic aria-description updates with the native button improves accessibility while keeping the component behavior consistent. The accompanying test provides good confidence in the change.
Previously, ARIA attributes inherited from the host were only captured once at componentWillLoad. Attributes set or changed after initial load (e.g. by ion-input-password-toggle updating aria-label/aria-pressed as visibility toggles) were not reflected onto the native button, causing screen readers to announce stale values unless a watch decorator was used for each attribute. Adds watchAttributes/watchForAriaAttributeChanges to helpers.ts, which use a MutationObserver to keep inherited ARIA attributes in sync for the lifetime of the component. Replaces the previous per-attribute @watch decorators with this more general mechanism. Update Button.tsx to reflect this and use these new helpers. Add tests to test syncing all attributes. Fixes ionic-team#30626
3 participants
Issue number: resolves #30626
What is the current behavior?
The native
buttoninsideion-buttonis not being updated with the aria-attributes if it changes onion-buttonafter initial render, includingaria-description.What is the new behavior?
The native
buttoninsideion-buttonupdates with the aria attributes if it changes onion-button. Changes include:ariaAttributesso it could be imported for use in testsariaAttributesaria-disabledsince it is managed inrender()separatelyprivate ariaWatcher?: AttributeWatcher;to class ButtoncomponentWillLoad()ariaWatcherandwatchForAriaAttributeChanges, replicating functionality of the watch block, but for all aria attributesaria-disabledDoes this introduce a breaking change?