Poseidon / Freya: ARIA problems horizontal menu

[djmj]

Google Lighthouse at "https://pagespeed.web.dev/" (lighthouse 12.0 afaik) is reporting following problems in horizontal menu of Poseidon / Freya with mobile testing:

Name cannot be detected

1. li: Elements with role="menuitem" have no accessible name.
2. a: Links must have discernible text
3. Separator should have role="separator"

I dont get the errors 1 and 2 with lighthouse in chrome dev tools which is version 12.8.

I think the Icon should have aria-hidden="true" aswell.

Reproducer Poseidon

 <po:menu pt:role="menubar">
	<p:submenu label="File" icon="pi pi-file">
		 <p:menuitem value="Edit" icon="pi pi-pencil"/>
		<p:divider />
		 <p:menuitem value="delete" icon="pi pi-trash"/>
	</p:submenu>
	<p:menuitem value="New" icon="pi pi-plus"/>
</po:menu>

p:menubar comparison

My observations comparing the theme menus to basic primefaces <p:menubar> which does report problems in lighthouse 12.0 or 12.8.

• Icon has aria-hidden="true"
• li: elements have role="none" therefore
• a: elements have role="menuitem"

[tandraschko]

i added aria-hidden to icons and the separator role -> https://primefaces-freya-8p24k.ondigitalocean.app/

about the rest, no idea TBH
even lighthouse doesnt like some roles of the current showcase (menu or menubar)

[djmj]

Yeah i think this will solve this reporting issue but the whole ARIA thing is confusing for me:

Testing https://primefaces-freya-8p24k.ondigitalocean.app/ today with chrome dev tool "lighthouse 12.8.2" mobile today it reports the error message is now on <li role="menuitem" instead of "<a"

:D Maybe google does not know themselves what to do changing the tests each version.

[tandraschko]

No Idea 😅

[tandraschko]

added the ariaLabel for now

if you have further improvements, please reopen

[djmj]

Thank you. Will this also be available in poseidon theme?

[tandraschko]

I added it to all templates

[cagataycivici]

Please provide a PR to the menubar component and our team will review.

[djmj]

You mean me? I dont have access to source code of freya / poseidon menu.