fix(button): sync aria attributes between host and native button - #31264
fix(button): sync aria attributes between host and native button#31264Zac-Smucker-Bryan wants to merge 7 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
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Thanks for reworking this! The helper approach is the right direction and a lot better than adding a @watch per attribute. Left a handful of comments inline.
The two I'd want sorted before this goes in: the watcher gets torn down on disconnectedCallback but never recreated, so aria sync breaks the first time the button moves in the DOM, and covering the other button-like components (ion-item/ion-card at least) from my earlier review. The rest are nits.
…pt to helper Change disconnect to destroy to match other ionic conventions Update onChange to accept null values Add support for removeAttribute, including if null values triggered
…ttributes to connectedCallback Import helper to ion-item and ion-card move inheritedAriaAttributes to connectedCallback in these components to preserve helper call order
Update tests for ion-button with annotations Add tests for removeAttribute and attribute sync to ion-button, ion-card, and ion-item
Zac-Smucker-Bryan
changed the title
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. Additionally, the same dynamic is happening with other button like elements, includingion-cardandion-item.What is the new behavior?
The native
buttoninsideion-buttonupdates with the aria attributes if it changes onion-button. Changes include:removeAttributeis called. This lets the helper notify components when an inherited ARIA attribute is explicitly removed, since once the helper has stripped the host attribute, a laterremoveAttribute()is a DOM no-op and produces noMutationRecord.ariaAttributesso it could be imported for use in testsariaAttributesaria-disabledsince it is managed inrender()separatelyprivate ariaWatcher?: AttributeWatcher;to class ButtonconnectedCallback()this.inheritedAttributestoconnectedCallback()ariaWatcherandwatchForAriaAttributeChanges, replicating functionality of the watch block, but for all aria attributesaria-disableditem.tsx,this.inheritedAttributestoconnectedCallback()ariaWatcherandwatchForAriaAttributeChanges, replicating functionality of the watch block, only applying toaria-labelcurrentlyitem.e2e.test, add tests to ensure:card.tsx,this.inheritedAttributestoconnectedCallback()ariaWatcherandwatchForAriaAttributeChanges, replicating functionality of the watch block, only applying toaria-labelcurrentlycard.e2e.test, add tests to ensure:Does this introduce a breaking change?