Skip to content

Commit c85cc9f

Browse files
git-nandorbalzss
git-nandor
authored and
balzss
committed
feat(ui-tabs): add tabIndex prop to the Panel for WCAG-compliant focus control (defaults to 0 for backward compatibility)
1 parent 73af976 commit c85cc9f

File tree

4 files changed

+162
-25
lines changed

4 files changed

+162
-25
lines changed

‎packages/ui-tabs/src/Tabs/Panel/__tests__/Panel.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,26 @@ describe('<Tabs.Panel />', () => {
4949

5050
expect(tabPanel).toHaveAttribute('role', 'tabpanel')
5151
})
52+
53+
it('should not have tabIndex 0 by default', async () => {
54+
const { container } = render(
55+
<Panel isSelected renderTitle="Panel Title">
56+
Panel contents
57+
</Panel>
58+
)
59+
const tabPanel = container.querySelector('[role="tabpanel"]')
60+
61+
expect(tabPanel).not.toHaveAttribute('tabIndex', '0')
62+
})
63+
64+
it('should allow custom tabIndex', async () => {
65+
const { container } = render(
66+
<Panel isSelected renderTitle="Panel Title" tabIndex={-1}>
67+
Panel contents
68+
</Panel>
69+
)
70+
const tabPanel = container.querySelector('[role="tabpanel"]')
71+
72+
expect(tabPanel).toHaveAttribute('tabIndex', '-1')
73+
})
5274
})

‎packages/ui-tabs/src/Tabs/Panel/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ class Panel extends Component<TabsPanelProps> {
9898
styles,
9999
active,
100100
unmountOnExit,
101+
tabIndex,
101102
...props
102103
} = this.props
103104

@@ -106,10 +107,10 @@ class Panel extends Component<TabsPanelProps> {
106107
{...passthroughProps(props)}
107108
css={styles?.panel}
108109
role="tabpanel"
109-
tabIndex={0}
110110
id={id}
111111
aria-labelledby={labelledBy}
112112
aria-hidden={this.isHidden ? 'true' : undefined}
113+
tabIndex={this.isHidden ? undefined : tabIndex}
113114
ref={this.handleRef}
114115
>
115116
<Transition

‎packages/ui-tabs/src/Tabs/Panel/props.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ type TabsPanelOwnProps = {
6262
* When set to false, the tabPanel only will be hidden, but not dismounted when not active
6363
*/
6464
unmountOnExit?: boolean
65+
/**
66+
* The tabIndex of the tabpanel element. Set to 0 for text-only panels to make them
67+
* accessible to keyboard and screen reader users.
68+
*/
69+
tabIndex?: number
6570
}
6671

6772
type PropKeys = keyof TabsPanelOwnProps
@@ -87,7 +92,8 @@ const allowedProps: AllowedPropKeys = [
8792
'textAlign',
8893
'elementRef',
8994
'active',
90-
'unmountOnExit'
95+
'unmountOnExit',
96+
'tabIndex'
9197
]
9298

9399
export type { TabsPanelProps, TabsPanelStyle }

‎packages/ui-tabs/src/Tabs/README.md‎

Lines changed: 131 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,44 @@ const Example = () => {
2323
>
2424
<Tabs.Panel
2525
id="tabA"
26+
tabIndex={-1}
2627
renderTitle="Tab A"
2728
textAlign="center"
2829
padding="large"
2930
isSelected={selectedIndex === 0}
3031
>
3132
<Button>Focus Me</Button>
3233
</Tabs.Panel>
33-
<Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
34-
{lorem.paragraphs()}
34+
<Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled tabIndex={0}>
35+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
36+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
37+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
38+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
39+
velit esse cillum dolore eu fugiat nulla pariatur.
3540
</Tabs.Panel>
3641
<Tabs.Panel
3742
id="tabC"
3843
renderTitle="Tab C"
3944
isSelected={selectedIndex === 2}
45+
tabIndex={0}
4046
>
41-
{lorem.paragraphs()}
47+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
48+
accusantium doloremque laudantium. Totam rem aperiam, eaque ipsa quae ab
49+
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
50+
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
51+
odit aut fugit, sed quia consequuntur magni dolores.
4252
</Tabs.Panel>
4353
<Tabs.Panel
4454
id="tabD"
4555
renderTitle="Tab D"
4656
isSelected={selectedIndex === 3}
57+
tabIndex={0}
4758
>
48-
{lorem.paragraphs()}
59+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
60+
praesentium voluptatum deleniti atque corrupti. Quos dolores et quas
61+
molestias excepturi sint occaecati cupiditate non provident, similique
62+
sunt in culpa. Qui officia deserunt mollitia animi, id est laborum et
63+
dolorum fuga.
4964
</Tabs.Panel>
5065
</Tabs>
5166
)
@@ -74,17 +89,29 @@ const Example = () => {
7489
minHeight="10rem"
7590
maxHeight="10rem"
7691
>
77-
<Tabs.Panel renderTitle="First Tab" isSelected={selectedIndex === 0}>
92+
<Tabs.Panel renderTitle="First Tab" isSelected={selectedIndex === 0} tabIndex={0}>
7893
Hello World
7994
</Tabs.Panel>
80-
<Tabs.Panel renderTitle="Disabled Tab" isDisabled>
81-
{lorem.paragraphs()}
95+
<Tabs.Panel renderTitle="Disabled Tab" isDisabled tabIndex={0}>
96+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
97+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
98+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
99+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
100+
velit esse cillum dolore eu fugiat nulla pariatur.
82101
</Tabs.Panel>
83-
<Tabs.Panel renderTitle="Third Tab" isSelected={selectedIndex === 2}>
84-
{lorem.paragraphs()}
102+
<Tabs.Panel renderTitle="Third Tab" isSelected={selectedIndex === 2} tabIndex={0}>
103+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
104+
accusantium doloremque laudantium. Totam rem aperiam, eaque ipsa quae ab
105+
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
106+
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
107+
odit aut fugit, sed quia consequuntur magni dolores.
85108
</Tabs.Panel>
86-
<Tabs.Panel renderTitle="Fourth Tab" isSelected={selectedIndex === 3}>
87-
{lorem.paragraphs()}
109+
<Tabs.Panel renderTitle="Fourth Tab" isSelected={selectedIndex === 3} tabIndex={0}>
110+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
111+
praesentium voluptatum deleniti atque corrupti. Quos dolores et quas
112+
molestias excepturi sint occaecati cupiditate non provident, similique
113+
sunt in culpa. Qui officia deserunt mollitia animi, id est laborum et
114+
dolorum fuga.
88115
</Tabs.Panel>
89116
</Tabs>
90117
)
@@ -122,50 +149,57 @@ const Example = () => {
122149
id="tabA"
123150
renderTitle="Tab A"
124151
isSelected={selectedIndex === 0}
152+
tabIndex={0}
125153
>
126-
{lorem.sentence()}
154+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
127155
</Tabs.Panel>
128156
<Tabs.Panel
129157
id="tabB"
130158
renderTitle="Tab B"
131159
isSelected={selectedIndex === 1}
160+
tabIndex={0}
132161
>
133-
{lorem.sentence()}
162+
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
134163
</Tabs.Panel>
135164
<Tabs.Panel
136165
id="tabC"
137166
renderTitle="Tab C"
138167
isSelected={selectedIndex === 2}
168+
tabIndex={0}
139169
>
140-
{lorem.sentence()}
170+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
141171
</Tabs.Panel>
142172
<Tabs.Panel
143173
id="tabD"
144174
renderTitle="Tab D"
145175
isSelected={selectedIndex === 3}
176+
tabIndex={0}
146177
>
147-
{lorem.sentence()}
178+
Duis aute irure dolor in reprehenderit in voluptate velit esse.
148179
</Tabs.Panel>
149180
<Tabs.Panel
150181
id="tabE"
151182
renderTitle="Tab E"
152183
isSelected={selectedIndex === 4}
184+
tabIndex={0}
153185
>
154-
{lorem.sentence()}
186+
Excepteur sint occaecat cupidatat non proident, sunt in culpa.
155187
</Tabs.Panel>
156188
<Tabs.Panel
157189
id="tabF"
158190
renderTitle="Tab F"
159191
isSelected={selectedIndex === 5}
192+
tabIndex={0}
160193
>
161-
{lorem.sentence()}
194+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
162195
</Tabs.Panel>
163196
<Tabs.Panel
164197
id="tabG"
165198
renderTitle="Tab G"
166199
isSelected={selectedIndex === 6}
200+
tabIndex={0}
167201
>
168-
{lorem.sentence()}
202+
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.
169203
</Tabs.Panel>
170204
</Tabs>
171205
)
@@ -244,29 +278,45 @@ const Example = () => {
244278
>
245279
<Tabs.Panel
246280
id="tabA"
281+
tabIndex={-1}
247282
renderTitle="Tab A"
248283
textAlign="center"
249284
padding="large"
250285
isSelected={selectedIndex === 0}
251286
>
252287
<Button>Focus Me</Button>
253288
</Tabs.Panel>
254-
<Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
255-
{lorem.paragraphs()}
289+
<Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled tabIndex={0}>
290+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
291+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
292+
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
293+
aliquip ex ea commodo consequat. Duis aute irure dolor in
294+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
295+
pariatur.
256296
</Tabs.Panel>
257297
<Tabs.Panel
258298
id="tabC"
259299
renderTitle="Tab C"
260300
isSelected={selectedIndex === 2}
301+
tabIndex={0}
261302
>
262-
{lorem.paragraphs()}
303+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
304+
accusantium doloremque laudantium. Totam rem aperiam, eaque ipsa quae
305+
ab illo inventore veritatis et quasi architecto beatae vitae dicta
306+
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
307+
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
263308
</Tabs.Panel>
264309
<Tabs.Panel
265310
id="tabD"
266311
renderTitle="Tab D"
267312
isSelected={selectedIndex === 3}
313+
tabIndex={0}
268314
>
269-
{lorem.paragraphs()}
315+
At vero eos et accusamus et iusto odio dignissimos ducimus qui
316+
blanditiis praesentium voluptatum deleniti atque corrupti. Quos
317+
dolores et quas molestias excepturi sint occaecati cupiditate non
318+
provident, similique sunt in culpa. Qui officia deserunt mollitia
319+
animi, id est laborum et dolorum fuga.
270320
</Tabs.Panel>
271321
</Tabs>
272322
</View>
@@ -299,7 +349,14 @@ const Outlet = () => {
299349
{show ? 'Hello Developer' : 'Simulating network call...'}
300350
</Heading>
301351
{show ? (
302-
lorem.paragraphs()
352+
<div>
353+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
354+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
355+
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
356+
aliquip ex ea commodo consequat. Duis aute irure dolor in
357+
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
358+
pariatur.
359+
</div>
303360
) : (
304361
<Spinner renderTitle="Loading" size="medium" />
305362
)}
@@ -327,6 +384,7 @@ const Example = () => {
327384
padding="large"
328385
isSelected={selectedIndex === 0}
329386
active
387+
tabIndex={0}
330388
>
331389
<Outlet />
332390
</Tabs.Panel>
@@ -387,6 +445,7 @@ const Example = () => {
387445
>
388446
<Tabs.Panel
389447
id="tabA"
448+
tabIndex={-1}
390449
renderTitle="I will persist"
391450
textAlign="center"
392451
padding="large"
@@ -397,6 +456,7 @@ const Example = () => {
397456
</Tabs.Panel>
398457
<Tabs.Panel
399458
id="tabB"
459+
tabIndex={-1}
400460
renderTitle="I will unmount"
401461
isSelected={selectedIndex === 1}
402462
textAlign="center"
@@ -408,13 +468,15 @@ const Example = () => {
408468
id="tabC"
409469
renderTitle="Tab C"
410470
isSelected={selectedIndex === 2}
471+
tabIndex={0}
411472
>
412473
Tab C
413474
</Tabs.Panel>
414475
<Tabs.Panel
415476
id="tabD"
416477
renderTitle="Tab D"
417478
isSelected={selectedIndex === 3}
479+
tabIndex={0}
418480
>
419481
Tab D
420482
</Tabs.Panel>
@@ -425,6 +487,52 @@ const Example = () => {
425487
render(<Example />)
426488
```
427489

490+
### Managing focus with tabIndex
491+
492+
**Best practice:** For text-only panels, set `tabIndex={0}` to include the panel in the keyboard tab sequence—this ensures screen reader users can navigate to and read the content. For panels containing interactive elements (buttons, inputs, links), leave `tabIndex` unset so keyboard users tab directly to the controls without stopping on the panel container first.
493+
494+
```js
495+
---
496+
type: example
497+
---
498+
const Example = () => {
499+
const [selectedIndex, setSelectedIndex] = useState(0)
500+
501+
const handleTabChange = (event, { index }) => {
502+
setSelectedIndex(index)
503+
}
504+
505+
return (
506+
<Tabs
507+
margin="large auto"
508+
padding="medium"
509+
onRequestTabChange={handleTabChange}
510+
>
511+
<Tabs.Panel
512+
id="tabA"
513+
renderTitle="Panel with button"
514+
textAlign="center"
515+
padding="large"
516+
isSelected={selectedIndex === 0}
517+
tabIndex={-1}
518+
>
519+
<Button>Focus Me First</Button>
520+
</Tabs.Panel>
521+
<Tabs.Panel
522+
id="tabB"
523+
renderTitle="Panel with text only"
524+
isSelected={selectedIndex === 1}
525+
tabIndex={0}
526+
>
527+
This panel only contains text, so tabIndex is set to 0 to include it in the tab sequence.
528+
</Tabs.Panel>
529+
</Tabs>
530+
)
531+
}
532+
533+
render(<Example />)
534+
```
535+
428536
### Guidelines
429537

430538
```js

0 commit comments

Comments
 (0)