From a0812dbaf9d45f7e71603f57598576053eb23c11 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 21 Jun 2024 15:49:25 +0200
Subject: [PATCH 1/2] fix: Use visually hidden as utility class only

---
 packages/react/src/Avatar/Avatar.tsx          |  3 +-
 .../react/src/ErrorMessage/ErrorMessage.tsx   |  5 ++-
 packages/react/src/Header/Header.tsx          |  3 +-
 packages/react/src/IconButton/IconButton.tsx  |  3 +-
 .../src/SearchField/SearchFieldButton.tsx     |  3 +-
 .../src/SearchField/SearchFieldInput.tsx      |  5 ++-
 .../react/src/TopTaskLink/TopTaskLink.tsx     |  3 +-
 .../src/components/Footer/Footer.stories.tsx  | 34 +++++++------------
 8 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index 45e220ddad..b32cb9dfe5 100644
--- 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
index ce9b2e1c0a..95d4f1321d 100644
--- 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
index f5ac29d449..907c46b57b 100644
--- 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
index 8705e727aa..0a6045ccff 100644
--- 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
index 27029eb727..e91ee9918a 100644
--- 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
index b52715d061..dc5c9618e5 100644
--- 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
index 97cf23c96d..6162596bbe 100644
--- 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/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx
index 54de0bbe19..09fe28144b 100644
--- 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>

From 1ee0e052492059f440bca99b326bdefde1adeab4 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 21 Jun 2024 15:50:49 +0200
Subject: [PATCH 2/2] Fix Avatar in a Header story

---
 storybook/src/components/Avatar/Avatar.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/storybook/src/components/Avatar/Avatar.stories.tsx b/storybook/src/components/Avatar/Avatar.stories.tsx
index 53014afa35..bd88e42a62 100644
--- 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"
     />
   ),
 }