Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Dropdown): aria labels not passed to dropdown menu #2707

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+8 −1
Open

fix(Dropdown): aria labels not passed to dropdown menu #2707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad8534b
fix(Dropdown): aria labels not passed to dropdown menu
rivka-ungar Jan 8, 2025
b7f0e22
update snapshots
rivka-ungar Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,10 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if
</div>
</div>
<div
aria-label="Dropdown menu"
class="dropdownMenuWrapper withoutAnimation css-6yg65t-menu"
id="dropdown-menu-list-id"
role="listbox"
>
<div
class=" css-bknh9q-Component"
Expand Down Expand Up @@ -781,7 +784,10 @@ exports[`Dropdown renders correctly snapshot driver should use virtualization if
</div>
</div>
<div
aria-label="Dropdown menu"
class="dropdownMenuWrapper withoutAnimation css-6yg65t-menu"
id="dropdown-menu-list-id"
role="listbox"
>
<div
class=""
Expand Down
3 changes: 2 additions & 1 deletion packages/core/src/components/Dropdown/components/menu/menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const Menu = ({ children, Renderer, selectProps, dropdownMenuWrapperClassName, i
...props,
innerProps: {
...props.innerProps,
onScroll: props.onScroll,
id,
role: "listbox",
"aria-label": ariaLabel
Expand All @@ -30,7 +31,7 @@ const Menu = ({ children, Renderer, selectProps, dropdownMenuWrapperClassName, i
return (
<components.Menu
{...props}
innerProps={{ ...props.innerProps, onScroll: props.onScroll }}
innerProps={{ ...rendererProps.innerProps }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is breaking, isn't it?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait, who is ...props.innerProps? it seem like this attr doesn't even exist on props of menu

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would it be breaking? Now there is a bug that the props.innerProps + scroll is passed but the id, role and aria-label are being ignored, so I just added them

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but is props.innerProps even a thing? where does it come from?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and if it is a thing, and it can contain id, role, aria-label, it means it's breaking since it overrides this change now always override those 3.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It comes from line 12, where the additional props are set

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but the Menu component never gets a prop called inlineProps

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh it's a "react-select" prop which is automatically passed, I see now
we need to make sure inlineProps never includes one of those three
if it does, even in edge scenarios, it is kind of breaking

Copy link
Contributor

@YossiSaadi YossiSaadi Jan 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seem like it does contain it
https://react-select.com/props#replacing-components

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it under our control? is it always not containing it in current scenario? or consumers can somehow pass something to our Dropdown causing it to pass innerProps with different role, id, and aria-label?

className={cx(
styles.dropdownMenuWrapper,
{
Expand Down
Loading