aria-label

[Alanm63]

Hi
I am using this NextUI library and Tailwind in a project and am relatively happy with it after many years of using Semantic-React-UI. I have noticed in the developer console I am now getting loads of warnings.----
"An aria-label or aria-labelledby prop is required for accessibility." I don't need to use this. Is there anyway to switch this off as it clutters the console a lot. I can go through every interactive element in my code and add -- for example-- 'aria-label="computer"' and then I don't get the warning... but what a waste of time...
BTW, I understand what Aria is .. Thanks

[AdelFetner]

It'd be preferable to just add those tags, as they improve user experience for users w disabilities or using screen readers

[Alanm63]

Hello AdelFetner
I appreciate that you might think it is preferable but for my use it actually isn't. Is there any way to switch it off ?

[AdelFetner]

I think a possible answer could be to customize the theme to just add it once to all components that pertain your project and forget about it later on development, or creating a custom variant

[Ashesh3]

@AdelFetner How can I customize the theme to add a new attribute? I was hoping to do something similar to:

  plugins: [
    nextui({
      layout: {
        ariaLabel: "NextUI Layout", // Not a valid config key for layout
      },
    }),
  ],

But this does not work, I've looked through the documentation but could not find a way to achieve the same through config. Any suggestions?

[mauriciabad]

I have the same warning, but I have no idea of that elements is that error referring to. How do you know?

[Rhomennik]

Accessibility Issue Resolution
To address the reported accessibility issue, I implemented the following approach in the code:

const originalWarn = console.warn;


console.warn = (...args) => {
  const [firstArg] = args;
  if (
    typeof firstArg === "string" &&
    firstArg.includes(
      "An aria-label or aria-labelledby prop is required for accessibility."
    )
  ) {
    return;
  }

  originalWarn(...args);
};

This solution intercepts accessibility-related warnings and suppresses them, ensuring they are not displayed in the console during application execution. In my case, using Vite, it's important to add this code to the main file to ensure that accessibility warnings do not interfere with development and end-user experience.

I hope this helps!