feat!: Remove Visually Hidden component

packages/css/src/components/visually-hidden/README.md

@@ -4,5 +4,7 @@
 
 Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.
 
-Note: in most cases, visually available content should be accessible to non-visual user agents and vice versa.
-Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.
+## Guidelines
+
+- In most cases, visually available content should be accessible to non-visual user agents and vice versa.
+- Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.

packages/react/documentation/coding-conventions.md

@@ -36,7 +36,7 @@ Subcomponents (e.g. `Grid.Cell`) are kept in separate files (e.g. `GridCell.tsx`
 
 ## Text for screen readers only
 
-Use [Visually Hidden](https://designsystem.amsterdam/?path=/docs/components-containers-visually-hidden--docs) or the `ams-visually-hidden` utility class to hide content from sighted users but keep it accessible to non-visual user agents, such as screen readers.
+Use the `ams-visually-hidden` [utility class](http://designsystem.amsterdam/?path=/docs/utilities-css-visually-hidden--docs) to hide content from sighted users but keep it accessible to non-visual user agents, such as screen readers.
 
 Do not use `aria-label`. Tools for automatic translation often [do not translate its value](https://adrianroselli.com/2019/11/aria-label-does-not-translate.html), and it may get overlooked when doing manual translation.
 

packages/react/src/index.ts

@@ -42,7 +42,6 @@ export * from './Spotlight'
 export * from './Card'
 export * from './Alert'
 export * from './AspectRatio'
-export * from './VisuallyHidden'
 export * from './Footer'
 export * from './PageMenu'
 export * from './TopTaskLink'

storybook/config/preview.tsx

@@ -43,6 +43,7 @@ export const parameters = {
         'Foundation',
         'Components',
         ['Buttons', 'Containers', 'Feedback', 'Forms', 'Layout', 'Media', 'Navigation', 'Text'],
+        'Utilities',
         'Pages',
         ['Introduction', 'Amsterdam.nl', ['Home Page']],
       ],

storybook/src/utils/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,44 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { Paragraph } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+import type { HTMLAttributes } from 'react'
+
+type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement>
+
+const VisuallyHidden = ({ children }: VisuallyHiddenProps) => <span className="ams-visually-hidden">{children}</span>
+
+const render = ({ children }: VisuallyHiddenProps) => (
+  <div>
+    <Paragraph>
+      This paragraph is available for everyone. Below this is a second paragraph, but it is aimed at non-visual user
+      agents only. It is not perceivable on a screen.
+    </Paragraph>
+    <Paragraph className="ams-visually-hidden">{children}</Paragraph>
+  </div>
+)
+
+const meta = {
+  title: 'Utilities/CSS/Visually Hidden',
+  component: VisuallyHidden,
+  args: {
+    children: 'Here is the paragraph that is visually hidden. A screen reader will pick it up and read it to its user.',
+  },
+  argTypes: {
+    children: {
+      description: 'The content to hide visually.',
+      table: { disable: false },
+    },
+  },
+} satisfies Meta<typeof VisuallyHidden>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render,
+}