Skip to content
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

Merged
merged 1 commit into from
Feb 26, 2024

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Feb 26, 2024

Resolves

When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and aria-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

🏚️ Before 🏡 After
image image

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

@ShGKme ShGKme added bug Something isn't working 3. to review Waiting for reviews feature: popover Related to the popovermenu component accessibility Making sure we design for the widest range of people possible, including those who have disabilities labels Feb 26, 2024
@ShGKme ShGKme added this to the 8.7.2 milestone Feb 26, 2024
@ShGKme ShGKme self-assigned this Feb 26, 2024
Comment on lines +394 to 401
/**
* 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')
Copy link
Contributor Author

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.

Comment on lines +297 to +300
const triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')
for (const el of triggerElements) {
el.removeAttribute('aria-describedby')
}
Copy link
Contributor Author

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.

@ShGKme ShGKme force-pushed the fix/nc-popover--remove-aria-describedby branch from afbea40 to 585a6a5 Compare February 26, 2024 09:30
Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter left a 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.

Copy link
Contributor

@susnux susnux left a 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

@susnux
Copy link
Contributor

susnux commented Feb 26, 2024

PR conflicts

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme force-pushed the fix/nc-popover--remove-aria-describedby branch from 585a6a5 to f0628ca Compare February 26, 2024 14:36
@ShGKme ShGKme merged commit 55644fc into master Feb 26, 2024
18 checks passed
@ShGKme ShGKme deleted the fix/nc-popover--remove-aria-describedby branch February 26, 2024 14:38
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 26, 2024

/backport to next

@Antreesy Antreesy mentioned this pull request Feb 29, 2024
@ShGKme ShGKme mentioned this pull request Feb 29, 2024
@ShGKme ShGKme modified the milestones: 8.7.2, 8.8.0 Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities bug Something isn't working feature: popover Related to the popovermenu component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants