@vkontakte/vkui 6.0.1 → 6.0.3

package/src/components/BaseGallery/types.ts

@@ -32,16 +32,16 @@ export interface BaseGalleryProps
   slideWidth?: string | number;
   slideIndex?: number;
   onDragStart?: TouchEventHandler;
-  onDragEnd?(e: TouchEvent, targetIndex: number): void;
-  onChange?(current: number): void;
+  onDragEnd?: (e: TouchEvent, targetIndex: number) => void;
+  onChange?: (current: number) => void;
   /**
    * Будет вызвано при клике на кнопку-стрелку влево
    */
-  onPrevClick?(event: React.MouseEvent): void;
+  onPrevClick?: (event: React.MouseEvent) => void;
   /**
    * Будет вызвано при клике на кнопку-стрелку вправо
    */
-  onNextClick?(event: React.MouseEvent): void;
+  onNextClick?: (event: React.MouseEvent) => void;
   bullets?: 'dark' | 'light' | false;
   /**
    * Позволяет отключить реагирование на тач-события

package/src/components/Button/Button.module.css

@@ -2,17 +2,21 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  text-decoration: none;
   border: 0;
   min-block-size: var(--vkui--size_button_small_height--compact);
   margin: 0;
   padding: 0;
-  user-select: none;
   border-radius: var(--vkui--size_border_radius--regular);
   max-inline-size: 100%;
   min-inline-size: var(--vkui--size_button_minimum_width--regular);
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .Button {
+    transition: background-color 0.15s ease-out, color 0.15s ease-out;
+  }
+}
+
 .Button--rounded {
   border-radius: var(--vkui--size_border_radius_rounded--regular);
 }

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -19,6 +19,7 @@ type Story = StoryObj<ButtonGroupProps>;
 
 const ButtonText = 'Button';
 const StretchedButtonText = 'Button (stretched)';
+const ButtonWithIconLabel = 'Кнопка с иконкой';
 
 export const Playground: Story = {
   args: {
@@ -30,10 +31,32 @@ export const Playground: Story = {
         <Button size="l" appearance="accent" stretched>
           {StretchedButtonText}
         </Button>
-        <Button size="m" appearance="accent" before={<Icon24Add />} />
-        <Button size="m" appearance="accent" before={<Icon24Add />} stretched />
-        <Button size="s" appearance="accent" before={<Icon16Add />} />
-        <Button size="s" appearance="accent" before={<Icon16Add />} stretched />
+        <Button
+          size="m"
+          appearance="accent"
+          before={<Icon24Add />}
+          aria-label={ButtonWithIconLabel}
+        />
+        <Button
+          size="m"
+          appearance="accent"
+          before={<Icon24Add />}
+          aria-label={ButtonWithIconLabel}
+          stretched
+        />
+        <Button
+          size="s"
+          appearance="accent"
+          before={<Icon16Add />}
+          aria-label={ButtonWithIconLabel}
+        />
+        <Button
+          size="s"
+          appearance="accent"
+          before={<Icon16Add />}
+          aria-label={ButtonWithIconLabel}
+          stretched
+        />
       </>
     ),
   },
@@ -53,21 +76,36 @@ export const NestedButtonGroup: Story = {
           <Button size="l" appearance="accent" stretched>
             {StretchedButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+          />
         </ButtonGroup>
 
         <ButtonGroup mode="horizontal" gap="m" stretched style={ButtonGroupHighlightStyles}>
           <Button size="l" appearance="accent">
             {ButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+          />
         </ButtonGroup>
 
         <ButtonGroup mode="horizontal" gap="m" stretched={false} style={ButtonGroupHighlightStyles}>
           <Button size="l" appearance="accent">
             {ButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+          />
         </ButtonGroup>
 
         <ButtonGroup mode="horizontal" gap="m" stretched style={ButtonGroupHighlightStyles}>
@@ -86,9 +124,20 @@ export const NestedButtonGroup: Story = {
           <Button size="l" appearance="accent" stretched>
             {StretchedButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+            stretched
+          />
           <ButtonGroup mode="horizontal" stretched style={ButtonGroupHighlightStyles}>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={ButtonWithIconLabel}
+            />
             <Button size="l" appearance="accent" stretched>
               {StretchedButtonText}
             </Button>

package/src/components/ButtonGroup/Readme.md

@@ -151,6 +151,7 @@ const ExampleUseCases = () => {
 
 const buttonText = 'Button';
 const stretchedButtonText = 'Button (stretched)';
+const buttonWithIconLabel = 'Кнопка с иконкой';
 
 const buttonGroupHighlightStyles = {
   border: '2px dotted tomato',
@@ -179,8 +180,19 @@ const ExampleBase = () => {
           <Button size="l" appearance="accent" stretched>
             {stretchedButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
-          <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={buttonWithIconLabel}
+          />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={buttonWithIconLabel}
+            stretched
+          />
         </ButtonGroup>
       </Div>
       <FormItem>
@@ -237,14 +249,24 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent" stretched>
               {stretchedButtonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
 
           <ButtonGroup mode="horizontal" gap="m" stretched style={buttonGroupHighlightStyles}>
             <Button size="l" appearance="accent">
               {buttonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
 
           <ButtonGroup
@@ -256,7 +278,12 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent">
               {buttonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
 
           <ButtonGroup mode="horizontal" gap="m" stretched style={buttonGroupHighlightStyles}>
@@ -274,9 +301,20 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent" stretched>
               {stretchedButtonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+              stretched
+            />
             <ButtonGroup mode="horizontal" stretched style={buttonGroupHighlightStyles}>
-              <Button size="l" appearance="accent" before={<Icon24Add />} />
+              <Button
+                size="l"
+                appearance="accent"
+                before={<Icon24Add />}
+                aria-label={buttonWithIconLabel}
+              />
               <Button size="l" appearance="accent" stretched>
                 {stretchedButtonText}
               </Button>
@@ -312,15 +350,31 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent">
               {buttonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
           <ButtonGroup mode="vertical" gap="m" stretched={false} style={buttonGroupHighlightStyles}>
             <Button size="l" appearance="accent" stretched>
               {stretchedButtonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+              stretched
+            />
             <ButtonGroup mode="horizontal" stretched style={buttonGroupHighlightStyles}>
-              <Button size="l" appearance="accent" before={<Icon24Add />} />
+              <Button
+                size="l"
+                appearance="accent"
+                before={<Icon24Add />}
+                aria-label={buttonWithIconLabel}
+              />
               <Button size="l" appearance="accent" stretched>
                 {stretchedButtonText}
               </Button>

package/src/components/Calendar/Calendar.stories.tsx

@@ -35,8 +35,8 @@ export const Playground: Story = {
     const parsedMinDateTime = minDateTime ? new Date(minDateTime) : minDateTime;
     const parsedMaxDateTime = maxDateTime ? new Date(maxDateTime) : maxDateTime;
 
-    const updateValue = (newDate: Date) => {
-      updateArgs({ value: newDate.getTime() });
+    const updateValue = (newDate: Date | undefined) => {
+      updateArgs({ value: newDate?.getTime() });
     };
     return (
       <Calendar

package/src/components/Calendar/Calendar.tsx

@@ -39,9 +39,9 @@ export interface CalendarProps
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: 's' | 'm';
-  onChange?(value?: Date): void;
-  shouldDisableDate?(value: Date): boolean;
-  onClose?(): void;
+  onChange?: (value?: Date) => void;
+  shouldDisableDate?: (value: Date) => boolean;
+  onClose?: () => void;
   /**
    * Дата отображаемого месяца.
    * При использовании обновление даты должно происходить вне компонента.
@@ -50,7 +50,7 @@ export interface CalendarProps
   /**
    * Изменение даты в шапке календаря.
    */
-  onHeaderChange?(value: Date): void;
+  onHeaderChange?: (value: Date) => void;
   /**
    * Минимальные дата и время, которые можно выбрать
    */

package/src/components/CalendarDay/CalendarDay.tsx

@@ -26,9 +26,9 @@ export interface CalendarDayProps extends CalendarDayElementProps {
   hinted?: boolean;
   sameMonth?: boolean;
   size?: 's' | 'm';
-  onChange(value: Date): void;
-  onEnter?(value: Date): void;
-  onLeave?(value: Date): void;
+  onChange: (value: Date) => void;
+  onEnter?: (value: Date) => void;
+  onLeave?: (value: Date) => void;
 }
 
 export const CalendarDay = React.memo(

package/src/components/CalendarDays/CalendarDays.tsx

@@ -20,18 +20,18 @@ export interface CalendarDaysProps
   size?: 's' | 'm';
   dayProps?: CalendarDayElementProps;
   listenDayChangesForUpdate?: boolean;
-  onDayChange(value: Date): void;
-  isDayDisabled(value: Date): boolean;
-  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;
-  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;
-  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;
-  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;
-  isDayActive(value: Date): boolean;
-  isDayHinted?(value: Date): boolean;
-  isDaySelected?(value: Date): boolean;
-  isDayFocused(value: Date): boolean;
-  onDayEnter?(value: Date): void;
-  onDayLeave?(value: Date): void;
+  onDayChange: (value: Date) => void;
+  isDayDisabled: (value: Date) => boolean;
+  isDaySelectionStart: (value: Date, dayOfWeek: number) => boolean;
+  isDaySelectionEnd: (value: Date, dayOfWeek: number) => boolean;
+  isHintedDaySelectionStart?: (value: Date, dayOfWeek: number) => boolean;
+  isHintedDaySelectionEnd?: (value: Date, dayOfWeek: number) => boolean;
+  isDayActive: (value: Date) => boolean;
+  isDayHinted?: (value: Date) => boolean;
+  isDaySelected?: (value: Date) => boolean;
+  isDayFocused: (value: Date) => boolean;
+  onDayEnter?: (value: Date) => void;
+  onDayLeave?: (value: Date) => void;
 }
 
 export const CalendarDays = ({

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -39,15 +39,15 @@ export interface CalendarHeaderProps
   nextMonthIcon?: React.ReactNode;
   prevMonthProps?: ArrowMonthProps;
   nextMonthProps?: ArrowMonthProps;
-  onChange(viewDate: Date): void;
+  onChange: (viewDate: Date) => void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
    */
-  onNextMonth?(): void;
+  onNextMonth?: () => void;
   /**
    * Нажатие на кнопку переключения на предыдущий месяц.
    */
-  onPrevMonth?(): void;
+  onPrevMonth?: () => void;
 }
 
 export const CalendarHeader = ({

package/src/components/CalendarRange/CalendarRange.tsx

@@ -37,9 +37,9 @@ export interface CalendarRangeProps
   disablePickers?: boolean;
   changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  onChange?(value?: DateRangeType): void;
-  shouldDisableDate?(value: Date): boolean;
-  onClose?(): void;
+  onChange?: (value: DateRangeType | undefined) => void;
+  shouldDisableDate?: (value: Date) => boolean;
+  onClose?: () => void;
 }
 
 const getIsDaySelected = (day: Date, value?: DateRangeType) => {

package/src/components/CalendarTime/CalendarTime.tsx

@@ -10,9 +10,9 @@ export interface CalendarTimeProps {
   doneButtonText?: string;
   changeHoursLabel?: string;
   changeMinutesLabel?: string;
-  onChange?(value: Date): void;
-  onClose?(): void;
-  isDayDisabled?(day: Date, withTime?: boolean): boolean;
+  onChange?: (value: Date) => void;
+  onClose?: () => void;
+  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
 }
 
 const hours: Array<{

package/src/components/Cell/Cell.tsx

@@ -38,7 +38,7 @@ export interface CellProps
    * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
    * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
    */
-  onDragFinish?(swappedItemRange: SwappedItemRange): void;
+  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;
   /**
    * Текст для кнопки перетаскивания ячейки
    */

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -17,7 +17,7 @@ interface CellDraggerProps
   extends UseDraggableProps,
     Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps> {
   disabled?: boolean;
-  onDragStateChange?(dragging: boolean): void;
+  onDragStateChange?: (dragging: boolean) => void;
 }
 
 export const CellDragger = ({

package/src/components/CellButton/__image_snapshots__/cellbutton-ios-webkit-dark-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:827438196f7fd8291f51ca231c99ca4a148df8857e4e69ad11cd2d3265a5247e
-size 55648
+oid sha256:b9dccd56f4e5ade1fde3e75005656fd656f5ae9b75e025e60439c88cda32aedb
+size 55642

package/src/components/CellButton/__image_snapshots__/cellbutton-ios-webkit-light-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d7f55119670a62a7851a98414ec5edf62d3d45cbb40356ab523550513243d592
-size 55051
+oid sha256:400ec28f534e90afa67dd1f5d29b2d7702a66ae2c7324041f447454a16f9ac29
+size 55048

package/src/components/ChipsInputBase/types.ts

@@ -32,7 +32,7 @@ export interface ChipProps
   removeLabel?: string;
   before?: React.ReactNode;
   after?: React.ReactNode;
-  onRemove?(event: React.MouseEvent, value: ChipOptionValue): void;
+  onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;
 }
 
 export interface RenderChipProps extends ChipProps {
@@ -110,6 +110,6 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
 export interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>
   extends ChipsInputBaseProps<O>,
     Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {
-  onAddChipOption(value: O | string): void;
-  onRemoveChipOption(value: O | ChipOptionValue): void;
+  onAddChipOption: (value: string) => void;
+  onRemoveChipOption: (value: O | ChipOptionValue) => void;
 }

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -109,11 +109,11 @@ export interface ChipsSelectProps<O extends ChipOption>
    */
   noMaxHeight?: boolean;
 
-  renderOption?(props: CustomSelectOptionProps, option: O): React.ReactNode;
+  renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;
   /**
    * Событие срабатывающее перед onChange
    */
-  onChangeStart?(event: React.MouseEvent | React.KeyboardEvent, option: O): void;
+  onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;
 }
 
 /**

package/src/components/Clickable/Clickable.module.css

@@ -2,6 +2,20 @@
   cursor: pointer;
 }
 
+.Clickable__resetButtonStyle {
+  appearance: none;
+  user-select: none;
+  -webkit-tap-highlight-color: none;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+}
+
+.Clickable__resetLinkStyle {
+  appearance: none;
+  -webkit-tap-highlight-color: none;
+  text-decoration: none;
+}
+
 .Clickable__host:focus,
 .Clickable__host:focus-visible {
   outline: none;

package/src/components/Clickable/Clickable.tsx

@@ -150,6 +150,16 @@ function component<T>({
   return {};
 }
 
+const getUserAgentResetClassName = (Component?: React.ElementType) => {
+  if (Component === 'a') {
+    return styles.Clickable__resetLinkStyle;
+  }
+  if (Component === 'button') {
+    return styles.Clickable__resetButtonStyle;
+  }
+  return;
+};
+
 /**
  * Базовый кликабельный корневой компонент.
  *
@@ -169,7 +179,11 @@ export const Clickable = <T,>({
 }: ClickableProps<T>) => {
   const commonProps = component(restProps);
   const isClickable = checkClickable(restProps);
-  const baseClassName = classNames(baseClassNameProp, styles['Clickable__host']);
+  const baseClassName = classNames(
+    baseClassNameProp,
+    getUserAgentResetClassName(commonProps.Component),
+    styles['Clickable__host'],
+  );
 
   if (isClickable) {
     return (

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -29,7 +29,7 @@ export interface CustomScrollViewProps
   windowResize?: boolean;
   boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement['className'];
-  onScroll?(event: React.UIEvent<HTMLDivElement>): void;
+  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
   children: React.ReactNode;
 }
 

package/src/components/CustomScrollView/useTrackerVisibility.ts

@@ -89,21 +89,21 @@ export interface TrackerVisibilityProps {
   /**
    * Функция для обработки события у блока со скроллом
    */
-  onTargetScroll(this: void): void;
+  onTargetScroll: (this: void) => void;
   /**
    * Функция для обработки начала drag event ползунка
    */
-  onTrackerDragStart(this: void): void;
+  onTrackerDragStart: (this: void) => void;
   /**
    * Функция для обработки окончания drag event ползунка
    */
-  onTrackerDragStop(this: void): void;
+  onTrackerDragStop: (this: void) => void;
   /**
    * Функция для обработки mouseLeave event ползунка
    */
-  onTrackerMouseEnter(this: void): void;
+  onTrackerMouseEnter: (this: void) => void;
   /**
    * Функция для обработки mouseEnter event ползунка
    */
-  onTrackerMouseLeave(this: void): void;
+  onTrackerMouseLeave: (this: void) => void;
 }

package/src/components/CustomSelect/CustomSelect.test.tsx

@@ -15,7 +15,7 @@ const CustomSelectControlled = ({
   ...restProps
 }: Omit<SelectProps, 'value' | 'onChange'> & {
   initialValue?: string;
-  onChangeStub?(event: React.ChangeEvent<HTMLSelectElement>): void;
+  onChangeStub?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
   const [value, setValue] = React.useState(initialValue);
   const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {

package/src/components/CustomSelect/CustomSelectClearButton.tsx

@@ -6,7 +6,7 @@ import { IconButton } from '../IconButton/IconButton';
 
 export interface CustomSelectClearButtonProps extends HasDataAttribute {
   className?: string;
-  onClick(): void;
+  onClick: () => void;
   disabled?: boolean;
 }
 

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -21,7 +21,7 @@ export interface CustomSelectDropdownProps
    */
   autoWidth?: boolean;
   forcePortal?: boolean;
-  onPlacementChange?(placement: Placement): void;
+  onPlacementChange?: (placement: Placement) => void;
   /**
    * Отключает максимальную высоту по умолчанию
    */

package/src/components/CustomSelectOption/CustomSelectOption.stories.tsx

@@ -1,7 +1,15 @@
-import { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
+import type { PartialStoryFn } from '@storybook/types';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { CustomSelectOption, CustomSelectOptionProps } from './CustomSelectOption';
 
+const withListBox = (Story: PartialStoryFn<ReactRenderer>) => (
+  <div role="listbox" aria-label="Список администраторов">
+    <Story />
+  </div>
+);
+
 const story: Meta<CustomSelectOptionProps> = {
   title: 'Forms/CustomSelectOption',
   component: CustomSelectOption,
@@ -18,4 +26,5 @@ export const Playground: Story = {
     children: 'Игорь Федоров',
     description: 'Россия, Санкт-Петербург',
   },
+  decorators: [withListBox],
 };

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -5,6 +5,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CustomSelectOption.module.css';
 
 const sizeYClassNames = {
@@ -106,7 +107,10 @@ export const CustomSelectOption = ({
       <div className={styles['CustomSelectOption__main']}>
         <div className={styles['CustomSelectOption__children']}>{children}</div>
         {hasReactNode(description) && (
-          <Footnote className={styles['CustomSelectOption__description']}>{description}</Footnote>
+          <Footnote className={styles['CustomSelectOption__description']}>
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
+            {description}
+          </Footnote>
         )}
       </div>
       <div className={styles['CustomSelectOption__after']}>