Allow to configure "aria-label" values inside components (ie. <Modal />)

[kcmr]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Summary

I'm using the <Modal> component and I would like to be able to customize the close button label (aria-label attribute) for other languages appart from english. Right now, the close button label is hardcoded to Close.

I've seen that there are multiple components where the aria-label attribute is hardcoded to english, so I think it would be a good idea to make it customizable.

If you have any ideas on how to implement this, I'd be happy to help with a contribution.

[vaidikpatil5]

can i try

[vaidikpatil5]

Here are four approaches to make the aria-label customizable for different languages:

1.Props-based translation: Pass the translated label as a prop to the ModalHeader component. This is simple and flexible for small projects without needing external libraries.

2.Global context for translations: Create a global context to manage translations and wrap the app or relevant components with a TranslationProvider. This centralizes translation logic and is easy to expand for larger projects.

3.Hardcoded object-based translations: Use a hardcoded object to map language codes to translations. It's lightweight but limited in scalability, suitable for small, simple projects.

4. React-i18next: Use the react-i18next library for robust localization. It provides a hook (useTranslation) to easily fetch translations and switch languages dynamically. Ideal for projects needing comprehensive localization support.

what spproch should i take @rluders , can u plz guide

[KBeDevel]

I'm not sure if this is another issue, but Dropdown component prop types allow "aria-label", but this is not included in the trigger button rendering nor in the dropdown menu box.

For example:

<Dropdown
  arrowIcon={false}
  aria-label="Alerts"
  size="sm"
  color="gray"
  inline
  label={...}
  dismissOnClick={false}
>
  ...
</Dropdown>

<button
  id=":rs:"
  class="flex items-center"
  type="button"
  aria-expanded="false"
  aria-haspopup="menu"
  style=""
  aria-controls=":rr:"
  data-floating-ui-inert=""
>
  <div
    style="..."
    data-testid="flowbite-dropdown"
    aria-expanded="true"
    tabindex="-1"
    class="z-10 w-fit divide-y divide-gray-100 ..."
    id=":rr:"
    role="menu"
    aria-labelledby=":rs:"
    aria-orientation="vertical"
  >
    <ul class="py-1 focus:outline-none" tabindex="-1">
        ...
    </ul>
  </div>
</button>