[BUG] - Can't customise classes in DropdownItem <span></span> wrapper

[elanclarkson]

NextUI Version

2.1.16

Describe the bug

<DropdownItem> seems to render with an inner <span> element, which does not appear to have a working slot for customisation. I have tried using the wrapper slot to no avail. This wouldn't be such a problem if the span didn't have classes which contradict the styling I am trying to achieve. It has a font-small class but I want the font to be font-medium.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Add <DropdownItem>.
2. Attempt to style inner span wrapper with a slot (e.g. classNames={{ wrapper: "font-medium" }}).

Expected behavior

I expect the <span> to have the "font-medium" class, it does not.

Screenshots or Videos

No response

Operating System Version

MacOS

Browser

Chrome

[robertgoacher]

I found this too, not just with the wrapper but all slots of the DropdownItem.

[daan-ef2]

Any news on this? Its also not accessible. If you use a link inside the dropdownItem as child, it isnt tabbable for screenreaders.

[Amberroseweeks]

I am also running into this issue. The dropdown menu creates a keyboard trap because there is a focus scope applied to the span element. While this could be helpful for modals, this is not accessible for a menu or popover because the sighted keyboard user will not be able to tab out of the menu. While the ESC key works for closing the menu, that is not a common pattern especially for accessibility. https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

[nehmykola]

You can customise DropdownItem in the DropdownMenu itemClasses prop

[hasan-trata-ai]

You can customise DropdownItem in the DropdownMenu itemClasses prop

Hey I don't think we don't have a prop named itemClasses to pass