-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(NcPopover): remove invalid aria-describedby #5304
Conversation
/** | ||
* Triggered after the tooltip was visually displayed. | ||
* | ||
* This is different from the 'show' and 'apply-show' which | ||
* run earlier than this where there is no guarantee that the | ||
* tooltip is already visible and in the DOM. | ||
*/ | ||
this.$emit('after-show') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved the comment so it works as event documentation for styleguidist.
const triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]') | ||
for (const el of triggerElements) { | ||
el.removeAttribute('aria-describedby') | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In Vue 2 triggerElements
is always only one root element, but in Vue 3 there could be multiple nodes. Using querySelectorAll
for Vue 3 compatibility.
afbea40
to
585a6a5
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great solution which is a bit hacky but prevents a new fork.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems to work fine
PR conflicts |
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
585a6a5
to
f0628ca
Compare
/backport to next |
Resolves
When the popover is shown,
floating-vue
mutates the root elements of the trigger addingdata-popper-shown
andaria-describedby
attributes.aria-describedby
is not correct here. All the popover content should not describe the trigger button.See: https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734
Unfortunately, because
floating-vue
directly mutates the button via DOM API, it is not possible to remove the attribute in a Vue way without the same DOM mutation...🖼️ Screenshots
🏁 Checklist
next
requested with a Vue 3 upgrade