Menu: label as HTML (escape false) is rendered in aria-label property of the menuitem

[alaindeurveilher]

Describe the bug

When the label of a MenuItem is defined as HTML string, the same html is currently used as the value for the aria-label property.
Currently, MenuItem does not have an explicit ariaLabel property, but it's implicitely filled with [attr.aria-label]="label(item.label)" which in the case of html content with the use of escape: false does not provide the intended markups, and makes testing difficult to query the element.

Environment

Windows

Reproducer

No response

Angular version

17.3.0

PrimeNG version

17.13.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Chrome

Steps to reproduce the behavior

items: MenuItem[] = [
  {
    label: `
      <div class="flex align-items-center">
        <i class="pi pi-home"></i>
        <span>Home</span>
      </div>`,
    escape: false,
    routerLink="/",
  },
];

The rendered HTML is something like:

<li role="menuitem" class="p-element p-menuitem"  aria-label="
    <div class=&quot;flex align-items-center&quot;>
      <i class=&quot;pi pi-home&quot;></i>
      <span>Home</span>
    </div>">
  <div class="p-menuitem-content">
    <a  ng-reflect-router-link="/" href="http://localhost:4200/">
      <span class="p-menuitem-text">
        <div class="flex align-items-center">
          <i class="pi pi-home"></i>
          <span>Home</span>
        </div>
      </span>
    </div>
</li>

Expected behavior

The aria-label property of the role menuitem element should be a plain text.

[jayee]

Yes, this behaviour is totally wrong.