AutoComplete: aria-hidden="true" on close chip console causes error

[bobby-driggs]

Describe the bug

Using the AutoComplete component, I noticed we have some aria errors. I also noticed this exists on the primevue website:

Reproducer

https://primevue.org/autocomplete/

PrimeVue version

4.0.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Brave 1.68.131 (Chromium: 127.0.6533.73)

Steps to reproduce the behavior

Use AutoComplete component w/ multiple option, and see console errors when selecting multiple items

Expected behavior

No Aria errors

[Chrysochrome]

I’ve encountered this issue frequently in the Menu component. Clicking on any menu item triggers this error in the console, including in ContextMenu, Dock, Menu, Menubar, etc. The problem also exists on the PrimeVue website.

Reproducer

https://primevue.org/menubar/

[tugcekucukoglu]

I cannot replicate the problem. Am I missing something?
Extensions can cause these errors.

[hiddenyak]

With no extensions enabled, I get this bug on the PrimeVue website, interacting with any menu component exactly like Chrysochrome describes, on both Chrome and Edge but not Firefox.

Chrome Version 127.0.6533.89 (Official Build) (64-bit)
Edge Version 127.0.2651.74 (Official Build) (64-bit)
Firefox 128.0.3

[GerGotha]

I have had similar issues with the Menu components. Strangely enough, for me it only occured as soon as I selected any element with the devtools element picker and interacted with a menu after doing so.
Tried with Firefox, Chrome and Edge.

[Aspyryan]

Can reproduce this as well on Edge (Version 127.0.2651.86). I also got this problem with primevue 3.52

[eneeio-nm]

I get the console error from Menu items:

From what I can tell is it's complaining about this example:

I'm using PrimeVue 4.0.4.

[eneeio-nm]

@tugcekucukoglu - I've created an example of this happening on Stackblitz, hopefully the issue can be fixed now.

[LanFeusT23]

@tugcekucukoglu This seems to be a Chrome update, I've seen several other packages have that error now but it doesn't show on Firefox.

For example: ant-design/ant-design#50170

[Coops0]

A temporary fix I have found to work for myself

const vFixAriaBug = {
  mounted(el: HTMLElement) {
    el.ariaHidden = null;
  },
  updated(el: HTMLElement) {
    el.ariaHidden = null;
  }
};

Then usable by

<template>
  <Menubar v-fix-aria-bug>
    <template>
        <router-link ...>
          <a v-fix-aria-bug ...>
        </router-link>
    </template>
  </Menubar>
</template>

[peacefulseeker]

For those, using primevue v3 Menu, as a temp fix,
you can pass pt prop with action(itemLink in past) attribute override.

Source for menu item(with action a tag) https://github.com/primefaces/primevue/blob/v3/components/lib/menu/Menuitem.vue

const accountMenuItems = ref([
    {
      label: () => `label`,
      command: () => router.push({ name: 'route' }),
    },
 ...
]);

<Menu
  @focus="onFocus"
  @blur="onBlur"
  :model="accountMenuItems"
  :pt="{
    // fixes https://github.com/primefaces/primevue/issues/6141
    action: {
      ariaHidden: false,
    },
  }"
  :popup="true" />

At least, the warning has gone in Chrome 127+

[reiven93]

If anyone is using SplitButton you can also PT the attr to the tiered menu item:

<SplitButton class="ml-1" :model="itemsSubMenu" :pt="{ pcMenu: { itemLink: { ariaHidden: false } } }"> </SplitButton>

[tugcekucukoglu]

Still cannot replicate AutoComplete issue. I could see that there is a problem with anchor tags. Please follow this issue for menus: #6269

[bonniegrubbs]

To replicate, see the Primevue example here

I think the issue is from this