Skip to content

Commit

Permalink
fix: avoid "list" role elements in Listbox
Browse files Browse the repository at this point in the history
  • Loading branch information
Robbert committed Dec 24, 2024
1 parent 1c16253 commit 0480fe1
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/twenty-bees-train.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@utrecht/listbox-react": patch
---

Fix Listbox to only render "listbox" and "option" roles, and no "list" role from the `<ul>`.
14 changes: 14 additions & 0 deletions packages/components-react/listbox-react/src/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@ describe('Listbox', () => {
expect(listbox).toBeInTheDocument();
});

it('renders no list role element', () => {
render(<Listbox />);

let list;

try {
list = screen.getByRole('list');
} catch (e) {
expect(e).toBeDefined();
}

expect(list).not.toBeDefined();
});

it('renders a design system BEM block class name', () => {
const { container } = render(<Listbox />);

Expand Down
4 changes: 3 additions & 1 deletion packages/components-react/listbox-react/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ export const Listbox = forwardRef(
{...restProps}
ref={ref}
>
<ul className="utrecht-listbox__list">{children}</ul>
<ul className="utrecht-listbox__list" role="none">
{children}
</ul>
</div>
),
);
Expand Down

0 comments on commit 0480fe1

Please sign in to comment.