Skip to content

Commit

Permalink
[Accessibility][Storybook] Add an aria-label on the calendar icon in …
Browse files Browse the repository at this point in the history
…the storybook loading example (#5550)
  • Loading branch information
kendallgassner authored Jan 16, 2025
1 parent 9986d67 commit 00e0f87
Showing 1 changed file with 13 additions and 11 deletions.
24 changes: 13 additions & 11 deletions packages/react/src/TextInput/TextInput.features.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,8 @@ export const WithTooltipDirection = () => {
)
}

const Calendar = () => <CalendarIcon aria-label="Calendar" />

export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
return (
<Box as="form">
Expand Down Expand Up @@ -219,19 +221,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
<Box mb={2}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} {...args} value="auto" />
<TextInput leadingVisual={Calendar} {...args} value="auto" />
</FormControl>
</Box>
<Box mb={2}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} {...args} loaderPosition="leading" value="leading" />
<TextInput leadingVisual={Calendar} {...args} loaderPosition="leading" value="leading" />
</FormControl>
</Box>
<Box mb={5}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput leadingVisual={CalendarIcon} {...args} loaderPosition="trailing" value="trailing" />
<TextInput leadingVisual={Calendar} {...args} loaderPosition="trailing" value="trailing" />
</FormControl>
</Box>

Expand All @@ -240,19 +242,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
<Box mb={2}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput trailingVisual={CalendarIcon} {...args} value="auto" />
<TextInput trailingVisual={Calendar} {...args} value="auto" />
</FormControl>
</Box>
<Box mb={2}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput trailingVisual={CalendarIcon} {...args} loaderPosition="leading" value="leading" />
<TextInput trailingVisual={Calendar} {...args} loaderPosition="leading" value="leading" />
</FormControl>
</Box>
<Box mb={5}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput trailingVisual={CalendarIcon} {...args} loaderPosition="trailing" value="trailing" />
<TextInput trailingVisual={Calendar} {...args} loaderPosition="trailing" value="trailing" />
</FormControl>
</Box>
</FormControl>
Expand All @@ -262,15 +264,15 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
<Box mb={2}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput size="small" leadingVisual={CalendarIcon} trailingVisual={CalendarIcon} {...args} value="auto" />
<TextInput size="small" leadingVisual={Calendar} trailingVisual={Calendar} {...args} value="auto" />
</FormControl>
</Box>
<Box mb={2}>
<FormControl>
<FormControl.Label>Default label</FormControl.Label>
<TextInput
leadingVisual={CalendarIcon}
trailingVisual={CalendarIcon}
leadingVisual={Calendar}
trailingVisual={Calendar}
{...args}
loaderPosition="leading"
value="leading"
Expand All @@ -282,8 +284,8 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
<FormControl.Label>Default label</FormControl.Label>
<TextInput
size="large"
leadingVisual={CalendarIcon}
trailingVisual={CalendarIcon}
leadingVisual={Calendar}
trailingVisual={Calendar}
{...args}
loaderPosition="trailing"
value="trailing"
Expand Down

0 comments on commit 00e0f87

Please sign in to comment.