[MainMenu]: page crashes when WAVE accessibility browser extension is enabled

[vasilii-kovalev]

Description

When enabling WAVE browser extension, the page crashes, when MainMenu component is present.

Steps to Reproduce

1. Install the WAVE extension
2. Go to any UUI documentation page
3. Enable the extension and observe the results
4. Reload the page
5. Remove MainMenu component from the DOM via DevTools (XPath: /html/body/div/div[1]/header/nav)
6. Enable the extension and observe the results

Actual result

Step 3:

Step 6:

Expected result

The page is rendered correctly with inserted labels on steps 3 and 6.

Environment

• UUI version: latest
• Browser name: Google Chrome v.131.0.6778.205
• Operating System: Windows 10 64-bit

[vasilii-kovalev]

Please, add "A11y" label, if necessary.

[AlekseyManetov]

Fixed. The issue occurred because the Wave extension modifies the DOM structure when enabled, adding its own nodes for errors and other information. In this case, Wave added nodes for an "Empty button" error inside the MainMenu. Since the MainMenu uses the AdaptivePanel to measure and layout items, this 'unexpected invasion' caused the error.

I resolved the issue by adding an aria-label attribute to the icon button to fix the "Empty button" error. If you encounter a similar issue in your app, ensure that all MainMenu buttons have either a caption or an aria-label attribute.

[vasilii-kovalev]

Thank you! It does work for GlobalMenu, MainMenuButton and MainMenuIcon components, but it doesn't work for MainMenuAvatar, because it doesn't accept rawProps or attributes as component's props. Currently, I set aria-label via ref like this:

const avatarRef = useRef<HTMLButtonElement | null>(null);

useEffect(
  () => {
    avatarRef.current?.setAttribute(
      "aria-label",
      "User avatar",
    );
  },
  [],
);

// ...

<MainMenuAvatar
  ref={avatarRef}
  // Other props
/>

To simplify this case, it would be great to add rawProps support to it, or allow passing button element's attributes as props.

[AlekseyManetov]

To simplify this case, it would be great to add rawProps support to it, or allow passing button element's attributes as props.

Thanks, we already noticed this case too. We will add that fix in next release.