feat(Spinner): remove auto-converting aria-label (#6167)

VKCOM · Nov 30, 2023 · ca74678 · ca74678
1 parent 808a6a5
commit ca74678
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/packages/vkui/src/components/PullToRefresh/PullToRefresh.tsx b/packages/vkui/src/components/PullToRefresh/PullToRefresh.tsx
@@ -257,6 +257,8 @@ export const PullToRefresh = ({
   return (
     <TouchRootContext.Provider value={true}>
       <Touch
+        aria-live="polite"
+        aria-busy={!!isFetching}
         {...restProps}
         onStart={onTouchStart}
         onMove={onTouchMove}

diff --git a/packages/vkui/src/components/PullToRefresh/PullToRefreshSpinner.tsx b/packages/vkui/src/components/PullToRefresh/PullToRefreshSpinner.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './PullToRefresh.module.css';
 
 function calcStrokeDashOffset(value: number, radius: number) {
@@ -21,7 +22,7 @@ export const PullToRefreshSpinner = ({
   size = 24,
   strokeWidth = 2.5,
   progress = 0,
-  'aria-label': ariaLabel = 'Пожалуйста, подождите...',
+  children = 'Пожалуйста, подождите...',
   ...restProps
 }: PullToRefreshSpinnerProps) => {
   const radius = 0.5 * size - 0.5 * strokeWidth;
@@ -36,9 +37,9 @@ export const PullToRefreshSpinner = ({
         styles['PullToRefresh__spinner'],
         on && styles['PullToRefresh__spinner--on'],
       )}
-      aria-label={on ? ariaLabel : undefined}
       {...restProps}
     >
+      {on && <VisuallyHidden>{children}</VisuallyHidden>}
       <svg
         role="presentation"
         className={styles['PullToRefresh__spinner-self']}

diff --git a/packages/vkui/src/components/ScreenSpinner/ScreenSpinner.tsx b/packages/vkui/src/components/ScreenSpinner/ScreenSpinner.tsx
@@ -20,8 +20,8 @@ export const ScreenSpinner = ({
   className,
   state = 'loading',
   size = 'large',
-  'aria-label': ariaLabel = 'Пожалуйста, подождите...',
   onClick,
+  children = 'Пожалуйста, подождите...',
   ...restProps
 }: ScreenSpinnerProps) => {
   const hideSpinner = state === 'done' || state === 'error';
@@ -52,9 +52,10 @@ export const ScreenSpinner = ({
             hideSpinner && styles['ScreenSpinner__spinner--hidden'],
           )}
           size={size}
-          aria-label={ariaLabel}
           {...restProps}
-        />
+        >
+          {children}
+        </Spinner>
         <div
           className={classNames(
             styles['ScreenSpinner__icon'],

diff --git a/packages/vkui/src/components/Spinner/Spinner.tsx b/packages/vkui/src/components/Spinner/Spinner.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
+import { hasReactNode } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -56,7 +57,7 @@ export const Spinner = React.memo(
             />
           )}
         </SpinnerIcon>
-        <VisuallyHidden>{children}</VisuallyHidden>
+        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}
       </RootComponent>
     );
   },