Skip to content

Commit 016590a

Browse files
devongovettsnowystinger
devongovett
and
snowystinger
authored
chore: Refactor S2 tabs to fix accessibility issues (#7600)
* wip: Refactor S2 tabs to fix accessibility issues * yarn * review comments * fix lint * fix orientation case * Fix orientation case not updating overflow * Add required labelling and other review comments * fix a few more announcements * fix lint * fix chromatic * remove translations * fix announcements * fix lint --------- Co-authored-by: GitHub <[email protected]> Co-authored-by: Robert Snow <[email protected]>
1 parent b86dc20 commit 016590a

File tree

9 files changed

+972
-264
lines changed

9 files changed

+972
-264
lines changed

‎packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx

+68-61
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
1616
import type {Meta} from '@storybook/react';
1717
import {style} from '../style/spectrum-theme' with { type: 'macro' };
1818
import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
19+
import {Text} from '@react-spectrum/s2';
1920

2021
const meta: Meta<typeof Tabs> = {
2122
component: Tabs,
@@ -27,66 +28,72 @@ const meta: Meta<typeof Tabs> = {
2728

2829
export default meta;
2930

30-
export const Example = (args: any) => (
31-
<Tabs {...args} styles={style({width: 450, height: 256})}>
32-
<TabList aria-label="History of Ancient Rome">
33-
<Tab id="FoR"><Edit />Founding of Rome</Tab>
34-
<Tab id="MaR">Monarchy and Republic</Tab>
35-
<Tab id="Emp">Empire</Tab>
36-
</TabList>
37-
<TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
38-
<div style={{overflow: 'auto'}}>
39-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
40-
</div>
41-
</TabPanel>
42-
<TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
43-
<div style={{overflow: 'auto'}}>
44-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
45-
<p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
46-
</div>
47-
</TabPanel>
48-
<TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
49-
<div style={{overflow: 'auto'}}>
50-
<p>Alea jacta est.</p>
51-
</div>
52-
</TabPanel>
53-
</Tabs>
54-
);
31+
export const Example = {
32+
render: (args: any) => (
33+
<Tabs {...args} styles={style({width: 450, height: 256})} aria-label="History of Ancient Rome">
34+
<TabList>
35+
<Tab id="FoR">Founding of Rome</Tab>
36+
<Tab id="MaR">Monarchy and Republic</Tab>
37+
<Tab id="Emp">Empire</Tab>
38+
</TabList>
39+
<TabPanel id="FoR">
40+
<div>
41+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</div>
42+
</div>
43+
</TabPanel>
44+
<TabPanel id="MaR">
45+
<div>
46+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
47+
<div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
48+
</div>
49+
</TabPanel>
50+
<TabPanel id="Emp">
51+
<div>
52+
<div>Alea jacta est.</div>
53+
</div>
54+
</TabPanel>
55+
</Tabs>
56+
)
57+
};
5558

56-
export const Disabled = (args: any) => (
57-
<Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
58-
<TabList aria-label="History of Ancient Rome">
59-
<Tab id="FoR"><Edit />Founding of Rome</Tab>
60-
<Tab id="MaR">Monarchy and Republic</Tab>
61-
<Tab id="Emp">Empire</Tab>
62-
</TabList>
63-
<TabPanel id="FoR">
64-
Arma virumque cano, Troiae qui primus ab oris.
65-
</TabPanel>
66-
<TabPanel id="MaR">
67-
Senatus Populusque Romanus.
68-
</TabPanel>
69-
<TabPanel id="Emp">
70-
Alea jacta est.
71-
</TabPanel>
72-
</Tabs>
73-
);
59+
export const Disabled = {
60+
render: (args: any) => (
61+
<Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
62+
<TabList>
63+
<Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
64+
<Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
65+
<Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
66+
</TabList>
67+
<TabPanel id="FoR">
68+
Arma virumque cano, Troiae qui primus ab oris.
69+
</TabPanel>
70+
<TabPanel id="MaR">
71+
Senatus Populusque Romanus.
72+
</TabPanel>
73+
<TabPanel id="Emp">
74+
Alea jacta est.
75+
</TabPanel>
76+
</Tabs>
77+
)
78+
};
7479

75-
export const Icons = (args: any) => (
76-
<Tabs {...args} styles={style({width: 208, height: 144})}>
77-
<TabList aria-label="History of Ancient Rome">
78-
<Tab id="FoR" aria-label="Edit"><Edit /></Tab>
79-
<Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
80-
<Tab id="Emp" aria-label="Likes"><Heart /></Tab>
81-
</TabList>
82-
<TabPanel id="FoR">
83-
Arma virumque cano, Troiae qui primus ab oris.
84-
</TabPanel>
85-
<TabPanel id="MaR">
86-
Senatus Populusque Romanus.
87-
</TabPanel>
88-
<TabPanel id="Emp">
89-
Alea jacta est.
90-
</TabPanel>
91-
</Tabs>
92-
);
80+
export const Icons = {
81+
render: (args: any) => (
82+
<Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 208, height: 144})} labelBehavior="hide">
83+
<TabList>
84+
<Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
85+
<Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
86+
<Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
87+
</TabList>
88+
<TabPanel id="FoR">
89+
Arma virumque cano, Troiae qui primus ab oris.
90+
</TabPanel>
91+
<TabPanel id="MaR">
92+
Senatus Populusque Romanus.
93+
</TabPanel>
94+
<TabPanel id="Emp">
95+
Alea jacta est.
96+
</TabPanel>
97+
</Tabs>
98+
)
99+
};

‎packages/@react-spectrum/s2/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@
130130
},
131131
"dependencies": {
132132
"@react-aria/collections": "3.0.0-alpha.7",
133+
"@react-aria/focus": "^3.19.1",
133134
"@react-aria/i18n": "^3.12.5",
134135
"@react-aria/interactions": "^3.23.0",
135136
"@react-aria/live-announcer": "^3.4.1",

‎packages/@react-spectrum/s2/src/Content.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
2323
interface ContentProps extends UnsafeStyles, SlotProps {
2424
children?: ReactNode,
2525
styles?: StyleString,
26-
isHidden?: boolean
26+
isHidden?: boolean,
27+
id?: string
2728
}
2829

2930
interface HeadingProps extends ContentProps {

0 commit comments

Comments
 (0)