Skip to content

Commit b0c7300

Browse files
authored
Add aria labelling combination story for Picker (#5033)
1 parent c961c55 commit b0c7300

File tree

1 file changed

+26
-5
lines changed

1 file changed

+26
-5
lines changed

packages/@react-spectrum/picker/stories/Picker.stories.tsx

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -236,14 +236,35 @@ export const FalsyKey: PickerStory = {
236236
name: 'falsy item key'
237237
};
238238

239-
export const NoLabel: PickerStory = {
239+
export type LabelledByStory = ComponentStoryObj<any>;
240+
export const LabelledBy: LabelledByStory = {
240241
args: {
241-
children: (item: any) => <Item>{item.name}</Item>,
242-
items: flatOptions,
243-
'aria-label': 'Test',
242+
'aria-label': null,
243+
'aria-labelledby': true,
244244
label: null
245245
},
246-
name: 'no visible label'
246+
argTypes: {
247+
'aria-label': {
248+
control: 'text'
249+
},
250+
'aria-labelledby': {
251+
control: 'boolean'
252+
}
253+
},
254+
render: (args) => (
255+
<>
256+
<div id="test label">Test label</div>
257+
<Picker {...args} aria-labelledby={args['aria-labelledby'] ? 'test label' : null} items={flatOptions}>
258+
{(item: any) => <Item>{item.name}</Item>}
259+
</Picker>
260+
</>
261+
),
262+
name: 'no visible label combination story',
263+
parameters: {
264+
description: {
265+
data: 'Use controls to add/remove a visible label, aria-label, and toggle the aria-labelledby on/off'
266+
}
267+
}
247268
};
248269

249270
export const ContextualHelpPicker: PickerStory = {

0 commit comments

Comments
 (0)