Skip to content

Commit 3265c5e

Browse files
tyler-danetyler-dane
committed
refactor(SelectView): update button role for accessibility compliance
- Changed the button role in SelectView tests from "combobox" to "button" to align with the updated component structure. - Adjusted the role in the SelectView component from "listbox" to "menu" for improved accessibility. - Ensured all related tests reflect these changes, enhancing the overall clarity and maintainability of the code.
1 parent d85dbb6 commit 3265c5e

File tree

2 files changed

+30
-30
lines changed

2 files changed

+30
-30
lines changed

‎packages/web/src/components/SelectView/SelectView.test.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe("SelectView", () => {
4949
it("renders button with current view label for Week view", () => {
5050
renderWithRouter(<SelectView />, ROOT_ROUTES.ROOT);
5151

52-
const button = screen.getByRole("combobox");
52+
const button = screen.getByRole("button");
5353
expect(button).toBeInTheDocument();
5454
expect(button).toHaveTextContent("Week");
5555
expect(button).toHaveAttribute("aria-expanded", "false");
@@ -58,23 +58,23 @@ describe("SelectView", () => {
5858
it("renders button with current view label for Now view", () => {
5959
renderWithRouter(<SelectView />, ROOT_ROUTES.NOW);
6060

61-
const button = screen.getByRole("combobox");
61+
const button = screen.getByRole("button");
6262
expect(button).toBeInTheDocument();
6363
expect(button).toHaveTextContent("Now");
6464
});
6565

6666
it("renders button with current view label for Day view", () => {
6767
renderWithRouter(<SelectView />, ROOT_ROUTES.DAY);
6868

69-
const button = screen.getByRole("combobox");
69+
const button = screen.getByRole("button");
7070
expect(button).toBeInTheDocument();
7171
expect(button).toHaveTextContent("Day");
7272
});
7373

7474
it("renders button with current view label for Day view with date param", () => {
7575
renderWithRouter(<SelectView />, `${ROOT_ROUTES.DAY}/2024-01-15`);
7676

77-
const button = screen.getByRole("combobox");
77+
const button = screen.getByRole("button");
7878
expect(button).toBeInTheDocument();
7979
expect(button).toHaveTextContent("Day");
8080
});
@@ -83,7 +83,7 @@ describe("SelectView", () => {
8383
const user = userEvent.setup();
8484
renderWithRouter(<SelectView />);
8585

86-
const button = screen.getByRole("combobox");
86+
const button = screen.getByRole("button");
8787
await act(async () => {
8888
user.click(button);
8989
});
@@ -116,35 +116,35 @@ describe("SelectView", () => {
116116
it("detects Now view when on /now route", () => {
117117
renderWithRouter(<SelectView />, ROOT_ROUTES.NOW);
118118

119-
const button = screen.getByRole("combobox");
119+
const button = screen.getByRole("button");
120120
expect(button).toHaveTextContent("Now");
121121
});
122122

123123
it("detects Day view when on /day route", () => {
124124
renderWithRouter(<SelectView />, ROOT_ROUTES.DAY);
125125

126-
const button = screen.getByRole("combobox");
126+
const button = screen.getByRole("button");
127127
expect(button).toHaveTextContent("Day");
128128
});
129129

130130
it("detects Day view when on /day/:date route", () => {
131131
renderWithRouter(<SelectView />, `${ROOT_ROUTES.DAY}/2024-01-15`);
132132

133-
const button = screen.getByRole("combobox");
133+
const button = screen.getByRole("button");
134134
expect(button).toHaveTextContent("Day");
135135
});
136136

137137
it("detects Week view when on / route", () => {
138138
renderWithRouter(<SelectView />, ROOT_ROUTES.ROOT);
139139

140-
const button = screen.getByRole("combobox");
140+
const button = screen.getByRole("button");
141141
expect(button).toHaveTextContent("Week");
142142
});
143143

144144
it("defaults to Week view for unknown routes", () => {
145145
renderWithRouter(<SelectView />, "/unknown-route");
146146

147-
const button = screen.getByRole("combobox");
147+
const button = screen.getByRole("button");
148148
expect(button).toHaveTextContent("Week");
149149
});
150150
});
@@ -154,7 +154,7 @@ describe("SelectView", () => {
154154
const user = userEvent.setup();
155155
renderWithRouter(<SelectView />);
156156

157-
const button = screen.getByRole("combobox");
157+
const button = screen.getByRole("button");
158158
expect(button).toHaveAttribute("aria-expanded", "false");
159159

160160
await act(async () => {
@@ -171,7 +171,7 @@ describe("SelectView", () => {
171171
const user = userEvent.setup();
172172
renderWithRouter(<SelectView />);
173173

174-
const button = screen.getByRole("combobox");
174+
const button = screen.getByRole("button");
175175
await act(async () => {
176176
await user.click(button);
177177
});
@@ -195,7 +195,7 @@ describe("SelectView", () => {
195195
const user = userEvent.setup();
196196
renderWithRouter(<SelectView />);
197197

198-
const button = screen.getByRole("combobox");
198+
const button = screen.getByRole("button");
199199
await act(async () => {
200200
await user.click(button);
201201
});
@@ -222,7 +222,7 @@ describe("SelectView", () => {
222222
const user = userEvent.setup();
223223
renderWithRouter(<SelectView />, ROOT_ROUTES.NOW);
224224

225-
const button = screen.getByRole("combobox");
225+
const button = screen.getByRole("button");
226226
await act(async () => {
227227
user.click(button);
228228
});
@@ -244,7 +244,7 @@ describe("SelectView", () => {
244244
const user = userEvent.setup();
245245
renderWithRouter(<SelectView />);
246246

247-
const button = screen.getByRole("combobox");
247+
const button = screen.getByRole("button");
248248
await act(async () => {
249249
user.click(button);
250250
});
@@ -265,7 +265,7 @@ describe("SelectView", () => {
265265
const user = userEvent.setup();
266266
renderWithRouter(<SelectView />);
267267

268-
const button = screen.getByRole("combobox");
268+
const button = screen.getByRole("button");
269269
await act(async () => {
270270
user.click(button);
271271
});
@@ -290,7 +290,7 @@ describe("SelectView", () => {
290290
const user = userEvent.setup();
291291
renderWithRouter(<SelectView />);
292292

293-
const button = screen.getByRole("combobox");
293+
const button = screen.getByRole("button");
294294
await act(async () => {
295295
user.click(button);
296296
});
@@ -315,7 +315,7 @@ describe("SelectView", () => {
315315
const user = userEvent.setup();
316316
renderWithRouter(<SelectView />);
317317

318-
const button = screen.getByRole("combobox");
318+
const button = screen.getByRole("button");
319319
await act(async () => {
320320
user.click(button);
321321
});
@@ -340,7 +340,7 @@ describe("SelectView", () => {
340340
const user = userEvent.setup();
341341
renderWithRouter(<SelectView />);
342342

343-
const button = screen.getByRole("combobox");
343+
const button = screen.getByRole("button");
344344
await act(async () => {
345345
user.click(button);
346346
});
@@ -366,7 +366,7 @@ describe("SelectView", () => {
366366
const user = userEvent.setup();
367367
renderWithRouter(<SelectView />);
368368

369-
const button = screen.getByRole("combobox");
369+
const button = screen.getByRole("button");
370370
await act(async () => {
371371
user.click(button);
372372
});
@@ -384,7 +384,7 @@ describe("SelectView", () => {
384384
const user = userEvent.setup();
385385
renderWithRouter(<SelectView />);
386386

387-
const button = screen.getByRole("combobox");
387+
const button = screen.getByRole("button");
388388
await act(async () => {
389389
user.click(button);
390390
});
@@ -402,7 +402,7 @@ describe("SelectView", () => {
402402
const user = userEvent.setup();
403403
renderWithRouter(<SelectView />);
404404

405-
const button = screen.getByRole("combobox");
405+
const button = screen.getByRole("button");
406406
await act(async () => {
407407
user.click(button);
408408
});
@@ -422,7 +422,7 @@ describe("SelectView", () => {
422422
const user = userEvent.setup();
423423
renderWithRouter(<SelectView />, ROOT_ROUTES.ROOT);
424424

425-
const button = screen.getByRole("combobox");
425+
const button = screen.getByRole("button");
426426
await act(async () => {
427427
await user.click(button);
428428
});
@@ -451,7 +451,7 @@ describe("SelectView", () => {
451451
const user = userEvent.setup();
452452
renderWithRouter(<SelectView />, ROOT_ROUTES.NOW);
453453

454-
const button = screen.getByRole("combobox");
454+
const button = screen.getByRole("button");
455455
await act(async () => {
456456
await user.click(button);
457457
});
@@ -480,7 +480,7 @@ describe("SelectView", () => {
480480
const user = userEvent.setup();
481481
renderWithRouter(<SelectView />, ROOT_ROUTES.ROOT);
482482

483-
const button = screen.getByRole("combobox");
483+
const button = screen.getByRole("button");
484484
await act(async () => {
485485
await user.click(button);
486486
});
@@ -526,7 +526,7 @@ describe("SelectView", () => {
526526
const user = userEvent.setup();
527527
renderWithRouter(<SelectView />, ROOT_ROUTES.ROOT);
528528

529-
const button = screen.getByRole("combobox");
529+
const button = screen.getByRole("button");
530530
await act(async () => {
531531
await user.click(button);
532532
});
@@ -558,7 +558,7 @@ describe("SelectView", () => {
558558
const user = userEvent.setup();
559559
renderWithRouter(<SelectView />, ROOT_ROUTES.DAY);
560560

561-
const button = screen.getByRole("combobox");
561+
const button = screen.getByRole("button");
562562
await act(async () => {
563563
await user.click(button);
564564
});
@@ -591,7 +591,7 @@ describe("SelectView", () => {
591591
const user = userEvent.setup();
592592
renderWithRouter(<SelectView />, ROOT_ROUTES.ROOT);
593593

594-
const button = screen.getByRole("combobox");
594+
const button = screen.getByRole("button");
595595
await act(async () => {
596596
await user.click(button);
597597
});
@@ -619,7 +619,7 @@ describe("SelectView", () => {
619619
const user = userEvent.setup();
620620
renderWithRouter(<SelectView />, ROOT_ROUTES.NOW);
621621

622-
const button = screen.getByRole("combobox");
622+
const button = screen.getByRole("button");
623623
await act(async () => {
624624
await user.click(button);
625625
});

‎packages/web/src/components/SelectView/SelectView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const SelectView = ({
7272

7373
const click = useClick(context);
7474
const dismiss = useDismiss(context);
75-
const role = useRole(context, { role: "listbox" });
75+
const role = useRole(context, { role: "menu" });
7676

7777
const listNavigation = useListNavigation(context, {
7878
listRef,

0 commit comments

Comments
 (0)