fix: Use visually hidden as utility class only (#1269)

Amsterdam · Jun 21, 2024 · d21296f · d21296f
1 parent 5d796de
commit d21296f
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 39 deletions.
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
@@ -9,7 +9,6 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
 import { Image } from '../Image'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 export const avatarColors = [
   'black',
@@ -68,7 +67,7 @@ export const Avatar = forwardRef(
         ref={ref}
         className={clsx('ams-avatar', `ams-avatar--${color}`, imageSrc && 'ams-avatar--has-image', className)}
       >
-        <VisuallyHidden>{a11yLabel}</VisuallyHidden>
+        <span className="ams-visually-hidden">{a11yLabel}</span>
         <AvatarContent imageSrc={imageSrc} initials={initials} />
       </span>
     )

diff --git a/packages/react/src/ErrorMessage/ErrorMessage.tsx b/packages/react/src/ErrorMessage/ErrorMessage.tsx
@@ -6,7 +6,6 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 export type ErrorMessageProps = {
   /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
@@ -19,10 +18,10 @@ export const ErrorMessage = forwardRef(
     ref: ForwardedRef<HTMLParagraphElement>,
   ) => (
     <p {...restProps} ref={ref} className={clsx('ams-error-message', className)}>
-      <VisuallyHidden>
+      <span className="ams-visually-hidden">
         {prefix}
         {': '}
-      </VisuallyHidden>
+      </span>
       {children}
     </p>
   ),

diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
@@ -9,7 +9,6 @@ import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
 import { Heading } from '../Heading'
 import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 export type HeaderProps = {
   /** The name of the application. */
@@ -44,7 +43,7 @@ export const Header = forwardRef(
       <>
         <header {...restProps} ref={ref} className={clsx('ams-header', className)}>
           <a href={logoLink} className="ams-header__logo-link">
-            <VisuallyHidden>{logoLinkTitle}</VisuallyHidden>
+            <span className="ams-visually-hidden">{logoLinkTitle}</span>
             <Logo brand={logoBrand} />
           </a>
           {links && <div className="ams-header__links">{links}</div>}

diff --git a/packages/react/src/IconButton/IconButton.tsx b/packages/react/src/IconButton/IconButton.tsx
@@ -8,7 +8,6 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
 import { Icon } from '../Icon'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 export type IconButtonProps = {
   /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
@@ -36,7 +35,7 @@ export const IconButton = forwardRef(
         className,
       )}
     >
-      <VisuallyHidden>{label}</VisuallyHidden>
+      <span className="ams-visually-hidden">{label}</span>
       <Icon svg={svg} size={size} square />
     </button>
   ),

diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -8,7 +8,6 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 type SearchFieldButtonProps = {
   /** Describes the field for screen readers. */
@@ -20,7 +19,7 @@ type SearchFieldButtonProps = {
 export const SearchFieldButton = forwardRef(
   ({ label = 'Zoeken', className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
     <button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
-      <VisuallyHidden>{label}</VisuallyHidden>
+      <span className="ams-visually-hidden">{label}</span>
       <Icon svg={SearchIcon} size="level-5" square />
     </button>
   ),

diff --git a/packages/react/src/SearchField/SearchFieldInput.tsx b/packages/react/src/SearchField/SearchFieldInput.tsx
@@ -6,7 +6,6 @@
 import clsx from 'clsx'
 import { forwardRef, useId } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 type SearchFieldInputProps = {
   /** Whether the value fails a validation rule. */
@@ -24,8 +23,8 @@ export const SearchFieldInput = forwardRef(
 
     return (
       <>
-        <label htmlFor={id}>
-          <VisuallyHidden>{label}</VisuallyHidden>
+        <label htmlFor={id} className="ams-visually-hidden">
+          {label}
         </label>
         <input
           {...restProps}

diff --git a/packages/react/src/TopTaskLink/TopTaskLink.tsx b/packages/react/src/TopTaskLink/TopTaskLink.tsx
@@ -6,7 +6,6 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
-import { VisuallyHidden } from '../VisuallyHidden'
 
 export type TopTaskLinkProps = {
   /** The title. */
@@ -20,7 +19,7 @@ export const TopTaskLink = forwardRef(
     <a {...restProps} ref={ref} className={clsx('ams-top-task-link', className)}>
       <span className="ams-top-task-link__label">{label}</span>
       {/* This comma makes screen readers add a slight pause between the label and the description. */}
-      <VisuallyHidden>,</VisuallyHidden>
+      <span className="ams-visually-hidden">,</span>
       <span className="ams-top-task-link__description">{description}</span>
     </a>
   ),

diff --git a/storybook/src/components/Avatar/Avatar.stories.tsx b/storybook/src/components/Avatar/Avatar.stories.tsx
@@ -43,7 +43,7 @@ export const InAHeader: Story = {
   render: (args) => (
     <Header
       links={
-        <PageMenu>
+        <PageMenu alignEnd>
           <PageMenu.Link href="#">Contact</PageMenu.Link>
           <PageMenu.Link href="#" icon={SearchIcon}>
             Zoeken
@@ -53,7 +53,6 @@ export const InAHeader: Story = {
           </li>
         </PageMenu>
       }
-      title="Dashboard"
     />
   ),
 }
diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx
@@ -3,15 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-import {
-  Footer,
-  Grid,
-  Heading,
-  LinkList,
-  PageMenu,
-  Paragraph,
-  VisuallyHidden,
-} from '@amsterdam/design-system-react/src'
+import { Footer, Grid, Heading, LinkList, PageMenu, Paragraph } from '@amsterdam/design-system-react/src'
 import {
   CameraIcon,
   ClockIcon,
@@ -44,9 +36,9 @@ export const Default: Story = {
   args: {
     children: [
       <Footer.Top key="footer-top">
-        <VisuallyHidden>
-          <Heading>Colofon</Heading>
-        </VisuallyHidden>
+        <Heading className="ams-visually-hidden" inverseColor>
+          Colofon
+        </Heading>
         <Grid gapVertical="large" paddingVertical="medium">
           <Grid.Cell span={4}>
             <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
@@ -108,9 +100,9 @@ export const Default: Story = {
         </Grid>
       </Footer.Top>,
       <Footer.Bottom key="footer-bottom">
-        <VisuallyHidden>
-          <Heading level={2}>Over deze website</Heading>
-        </VisuallyHidden>
+        <Heading className="ams-visually-hidden" level={2}>
+          Over deze website
+        </Heading>
         <Grid paddingVertical="small">
           <Grid.Cell span="all">
             <PageMenu>{PageMenuStory.args?.children}</PageMenu>
@@ -125,9 +117,9 @@ export const Onderzoek: Story = {
   args: {
     children: [
       <Footer.Top key="footer-top">
-        <VisuallyHidden>
-          <Heading>Colofon</Heading>
-        </VisuallyHidden>
+        <Heading className="ams-visually-hidden" inverseColor>
+          Colofon
+        </Heading>
         <Grid gapVertical="large" paddingVertical="medium">
           <Grid.Cell span={3}>
             <Heading className="ams-mb--xs" level={2} size="level-4" inverseColor>
@@ -186,9 +178,9 @@ export const Onderzoek: Story = {
         </Grid>
       </Footer.Top>,
       <Footer.Bottom key="footer-bottom">
-        <VisuallyHidden>
-          <Heading level={2}>Over deze website</Heading>
-        </VisuallyHidden>
+        <Heading className="ams-visually-hidden" level={2}>
+          Over deze website
+        </Heading>
         <Grid paddingVertical="small">
           <Grid.Cell span="all">
             <PageMenu>{PageMenuStory.args?.children}</PageMenu>