Refactor(web-react): Use VisuallyHidden component instead of className

refs #DS-926
lmc-eu · Sep 8, 2023 · ed302bc · ed302bc
1 parent e987ea3
commit ed302bc
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 29 deletions.
diff --git a/packages/web-react/src/components/FieldGroup/FieldGroup.tsx b/packages/web-react/src/components/FieldGroup/FieldGroup.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
-import { useFieldGroupStyleProps } from './useFieldGroupStyleProps';
-import { SpiritFieldGroupProps } from '../../types';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
+import { SpiritFieldGroupProps } from '../../types';
 import { useValidationText } from '../Field/useValidationText';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useFieldGroupStyleProps } from './useFieldGroupStyleProps';
 
 const FieldGroup = (props: SpiritFieldGroupProps) => {
   const {
@@ -35,7 +36,7 @@ const FieldGroup = (props: SpiritFieldGroupProps) => {
       className={classNames(classProps.root, styleProps.className)}
       disabled={isDisabled}
     >
-      <legend className="accessibility-hidden">{label}</legend>
+      <VisuallyHidden elementType="legend">{label}</VisuallyHidden>
       {!isLabelHidden && (
         <div className={classProps.label} aria-hidden="true">
           {label}

diff --git a/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx b/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from '../../hooks';
 import { SpiritAttachmentActionButtonProps } from '../../types';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
-import { useStyleProps } from '../../hooks';
 
 const AttachmentActionButton = (props: SpiritAttachmentActionButtonProps) => {
   const { name = 'edit', children, ...restProps } = props;
@@ -18,7 +19,7 @@ const AttachmentActionButton = (props: SpiritAttachmentActionButtonProps) => {
       {...styleProps}
       className={classNames(classProps.attachment.button, styleProps.className)}
     >
-      <span className="accessibility-hidden">{children}</span>
+      <VisuallyHidden>{children}</VisuallyHidden>
       <Icon name={name} aria-hidden="true" />
     </button>
   );

diff --git a/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx b/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from '../../hooks';
 import { SpiritAttachmentDismissButtonProps } from '../../types';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
-import { useStyleProps } from '../../hooks';
 
 const AttachmentDismissButton = (props: SpiritAttachmentDismissButtonProps) => {
   const { children, ...restProps } = props;
@@ -18,7 +19,7 @@ const AttachmentDismissButton = (props: SpiritAttachmentDismissButtonProps) => {
       {...styleProps}
       className={classNames(classProps.attachment.button, styleProps.className)}
     >
-      <span className="accessibility-hidden">{children}</span>
+      <VisuallyHidden>{children}</VisuallyHidden>
       <Icon name="close" aria-hidden="true" />
     </button>
   );

diff --git a/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx b/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { ClickEvent, HeaderDialogCloseButtonProps } from '../../types';
+import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useHeaderDialogContext } from './HeaderDialogContext';
 import { HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT } from './constants';
 import { useHeaderStyleProps } from './useHeaderStyleProps';
-import { useHeaderDialogContext } from './HeaderDialogContext';
-import { Icon } from '../Icon';
 
 const HeaderDialogCloseButton = (props: HeaderDialogCloseButtonProps) => {
   const { label = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT, onClick, ...restProps } = props;
@@ -30,7 +31,7 @@ const HeaderDialogCloseButton = (props: HeaderDialogCloseButtonProps) => {
       style={styleProps.style}
     >
       <Icon name="close" />
-      <span className="accessibility-hidden">{label}</span>
+      <VisuallyHidden>{label}</VisuallyHidden>
     </button>
   );
 };

diff --git a/packages/web-react/src/components/Header/HeaderMobileActions.tsx b/packages/web-react/src/components/Header/HeaderMobileActions.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { HeaderMobileActionsProps } from '../../types';
-import { HEADER_MENU_TOGGLE_LABEL_DEFAULT } from './constants';
-import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { HEADER_MENU_TOGGLE_LABEL_DEFAULT } from './constants';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderMobileActions = (props: HeaderMobileActionsProps) => {
   const {
@@ -29,7 +30,7 @@ const HeaderMobileActions = (props: HeaderMobileActionsProps) => {
       {children}
       <Button aria-controls={dialogId} aria-expanded={isOpen} color="inverted" onClick={onOpen} isSquare>
         <Icon name="hamburger" />
-        <span className="accessibility-hidden">{menuToggleLabel}</span>
+        <VisuallyHidden>{menuToggleLabel}</VisuallyHidden>
       </Button>
     </div>
   );

diff --git a/packages/web-react/src/components/Modal/ModalHeader.tsx b/packages/web-react/src/components/Modal/ModalHeader.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { ClickEvent, ModalHeaderProps } from '../../types';
-import { useModalStyleProps } from './useModalStyleProps';
-import { useModalContext } from './ModalContext';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useModalContext } from './ModalContext';
+import { useModalStyleProps } from './useModalStyleProps';
 
 const ModalHeader = (props: ModalHeaderProps) => {
   const { children, closeLabel = 'Close', ...restProps } = props;
@@ -31,7 +32,7 @@ const ModalHeader = (props: ModalHeaderProps) => {
         aria-controls={id}
       >
         <Icon name="close" />
-        <span className="accessibility-hidden">{closeLabel}</span>
+        <VisuallyHidden>{closeLabel}</VisuallyHidden>
       </Button>
     </header>
   );

diff --git a/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx b/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx
@@ -2,6 +2,7 @@ import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { SpiritPaginationButtonLinkProps } from '../../types';
 import { ButtonLink } from '../Button';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 
 /* We need an exception for components exported with forwardRef */
 /* eslint no-underscore-dangle: ['error', { allow: ['_PaginationButtonLink'] }] */
@@ -19,7 +20,7 @@ const _PaginationButtonLink = <E extends ElementType = 'a'>(
   return (
     <ButtonLink color="secondary" isSquare {...restProps} ref={ref}>
       <Icon name={iconType[direction]} />
-      <span className="accessibility-hidden">{accessibilityLabel}</span>
+      <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
     </ButtonLink>
   );
 };

diff --git a/packages/web-react/src/components/Pagination/PaginationLink.tsx b/packages/web-react/src/components/Pagination/PaginationLink.tsx
@@ -1,7 +1,8 @@
-import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import classNames from 'classnames';
-import { SpiritPaginationLinkProps } from '../../types';
+import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
+import { SpiritPaginationLinkProps } from '../../types';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { usePaginationStyleProps } from './usePaginationStyleProps';
 
 /* We need an exception for components exported with forwardRef */
@@ -22,7 +23,7 @@ const _PaginationLink = <E extends ElementType = 'a'>(
       {...styleProps}
       className={classNames(classProps.link, styleProps.className)}
     >
-      <span className="accessibility-hidden">{accessibilityLabel}</span>
+      <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
       <span aria-hidden="true">{pageNumber}</span>
     </ElementTag>
   );

diff --git a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
-import { Icon } from '../Icon';
 import { TooltipCloseButtonProps } from '../../types';
+import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { useTooltipStyleProps } from './useTooltipStyleProps';
 
 const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipCloseButtonProps) => {
@@ -18,7 +19,7 @@ const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipC
       aria-expanded="true"
     >
       <Icon name="close" aria-hidden="true" />
-      <span className="accessibility-hidden">{label}</span>
+      <VisuallyHidden>{label}</VisuallyHidden>
     </button>
   );
 };